Skip to content

Commit c8a1aaf

Browse files
JoeJoe
Joe
authored and
Joe
committed
adding cards and creating insta slide screens
1 parent 0a535e2 commit c8a1aaf

18 files changed

+997
-49
lines changed

‎package-lock.json

Lines changed: 15 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,14 @@
1111
"apexcharts": "^3.18.1",
1212
"chartist-plugin-fill-donut": "^0.1.4",
1313
"core-js": "^3.6.4",
14+
"leaflet": "^1.6.0",
1415
"vue": "^2.6.11",
1516
"vue-agile": "^1.0.12",
1617
"vue-apexcharts": "^1.5.3",
1718
"vue-chartist": "^2.2.1",
18-
"vue-styled-components": "^1.4.14"
19+
"vue-router": "^3.1.6",
20+
"vue-styled-components": "^1.4.14",
21+
"vue2-leaflet": "^2.5.2"
1922
},
2023
"devDependencies": {
2124
"@vue/cli-plugin-babel": "^4.2.0",

‎public/index.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,10 @@
1414
href="https://fonts.googleapis.com/css?family=Alata&display=swap"
1515
rel="stylesheet"
1616
/>
17+
<link
18+
href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap"
19+
rel="stylesheet"
20+
/>
1721
</head>
1822
<body>
1923
<noscript>

‎src/App.vue

Lines changed: 9 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,11 @@
11
<template>
22
<Content>
3-
<div class="row">
4-
<div class="col-sm-6 offset-sm-3 col-md-6 offset-md-3">
5-
<BlogCard />
6-
<CoolPieChartCard />
7-
<IconProgressCard />
8-
<AreaChartCard />
9-
<CarouselCard />
10-
<LineChartCard />
11-
<ProfileImageCard />
12-
<SubscribeIconCard />
13-
</div>
14-
<!-- <div class="col-md-10 offset-md-1">
15-
<div class="row">
16-
<div class="col-md-4">
17-
<BlogCard />
18-
<AreaChartCard />
19-
</div>
20-
<div class="col-md-4">
21-
<IconProgressCard />
22-
<LineChartCard />
23-
<CoolPieChartCard />
24-
</div>
25-
<div class="col-md-4">
26-
<CarouselCard />
27-
<ProfileImageCard />
28-
</div>
29-
</div>
30-
</div> -->
31-
</div>
3+
<router-view />
324
</Content>
335
</template>
346

357
<script>
368
import Content from "./components/layout/Content";
37-
import BlogCard from "./components/cards/BlogCard";
38-
import CoolPieChartCard from "./components/cards/CoolPieChartCard";
39-
import IconProgressCard from "./components/cards/IconProgressCard";
40-
import AreaChartCard from "./components/cards/AreaChartCard";
41-
import CarouselCard from "./components/cards/CarouselCard";
42-
import LineChartCard from "./components/cards/LineChartCard";
43-
import ProfileImageCard from "./components/cards/ProfileImageCard";
44-
import SubscribeIconCard from "./components/cards/SubscribeIconCard";
459
4610
require("./assets/css/bootstrap.css");
4711
require("./assets/css/tonicons.css");
@@ -50,15 +14,7 @@ require("chartist/dist/chartist.min.css");
5014
export default {
5115
name: "App",
5216
components: {
53-
Content,
54-
BlogCard,
55-
CoolPieChartCard,
56-
IconProgressCard,
57-
AreaChartCard,
58-
CarouselCard,
59-
LineChartCard,
60-
ProfileImageCard,
61-
SubscribeIconCard
17+
Content
6218
}
6319
};
6420
</script>
@@ -71,6 +27,13 @@ body {
7127
-moz-osx-font-smoothing: grayscale;
7228
}
7329
30+
body,
31+
html {
32+
margin: 0;
33+
padding: 0;
34+
height: 100%;
35+
}
36+
7437
* {
7538
box-sizing: border-box;
7639
line-height: 1;

‎src/assets/geojson/ukLow.json

Lines changed: 18 additions & 0 deletions
Large diffs are not rendered by default.

‎src/assets/geojson/worldRegionsLow.json

Lines changed: 13 additions & 0 deletions
Large diffs are not rendered by default.

‎src/assets/images/arrows.png

1.64 KB
Loading

‎src/assets/images/frontendjoe.png

11.5 KB
Loading

‎src/components/cards/AnimatedChartCard.vue

Lines changed: 239 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,239 @@
1+
<template>
2+
<Card>
3+
<Title>Realtime Users</Title>
4+
<Window>
5+
<ChartWrapper>
6+
<apexchart
7+
width="300px"
8+
height="160px"
9+
type="area"
10+
:options="areaChartOptions"
11+
:series="areaChartSeries"
12+
></apexchart>
13+
</ChartWrapper>
14+
<WindowLabel>275</WindowLabel>
15+
</Window>
16+
<apexchart
17+
height="130px"
18+
type="bar"
19+
:options="barChartOptions"
20+
:series="barChartSeries"
21+
></apexchart>
22+
<BottomRow>
23+
<span>12:00AM</span>
24+
<span>1:00PM</span>
25+
</BottomRow>
26+
</Card>
27+
</template>
28+
29+
<script>
30+
import VueApexCharts from "vue-apexcharts";
31+
import styled from "vue-styled-components";
32+
33+
const Card = styled.div`
34+
display: flex;
35+
flex-direction: column;
36+
align-items: center;
37+
padding: 2rem 1rem 1.5rem;
38+
border-radius: 0.5rem;
39+
color: #ffffff;
40+
background: #f3f3f3;
41+
background-image: linear-gradient(to bottom, #8771c1 65%, #522ea9 100%);
42+
box-shadow: 8px 8px 10px #e0e0e0, -2px -2px 15px #ffffff;
43+
`;
44+
45+
const Title = styled.div`
46+
font-size: 1rem;
47+
margin-bottom: 2rem;
48+
`;
49+
50+
const WindowLabel = styled.div`
51+
font-size: 2rem;
52+
color: #606060;
53+
`;
54+
55+
const Window = styled.div`
56+
position: relative;
57+
z-index: 0;
58+
overflow: hidden;
59+
display: flex;
60+
align-items: center;
61+
justify-content: center;
62+
width: 100px;
63+
height: 100px;
64+
border-radius: 50%;
65+
background: #e2e2e2;
66+
margin-bottom: 1rem;
67+
`;
68+
69+
const ChartWrapper = styled.div`
70+
position: absolute;
71+
z-index: -1;
72+
top: 0;
73+
left: -16px;
74+
`;
75+
76+
const BottomRow = styled.div`
77+
align-self: stretch;
78+
display: flex;
79+
justify-content: space-between;
80+
font-size: 0.875rem;
81+
`;
82+
83+
export default {
84+
components: {
85+
Card,
86+
Title,
87+
Window,
88+
WindowLabel,
89+
ChartWrapper,
90+
BottomRow,
91+
apexchart: VueApexCharts
92+
},
93+
data: function() {
94+
return {
95+
areaChartSeries: [
96+
{
97+
data: [20, 10, 30, 15, 10, 20, 10, 30, 15, 10]
98+
}
99+
],
100+
areaChartOptions: {
101+
grid: {
102+
show: false
103+
},
104+
fill: {
105+
colors: ["#fbc00a"],
106+
opacity: 0.7,
107+
type: "solid"
108+
},
109+
chart: {
110+
toolbar: {
111+
show: false
112+
},
113+
parentHeightOffset: 0,
114+
animations: {
115+
enabled: true,
116+
easing: "linear",
117+
dynamicAnimation: {
118+
enabled: true,
119+
speed: 1000
120+
}
121+
}
122+
},
123+
dataLabels: {
124+
enabled: false
125+
},
126+
stroke: {
127+
show: false
128+
},
129+
yaxis: {
130+
min: 0,
131+
show: false,
132+
lines: {
133+
show: false
134+
},
135+
labels: {
136+
show: false
137+
}
138+
},
139+
xaxis: {
140+
lines: {
141+
show: false
142+
},
143+
axisBorder: {
144+
show: false
145+
},
146+
axisTicks: {
147+
show: false
148+
},
149+
labels: {
150+
show: false
151+
}
152+
},
153+
legend: {
154+
show: false
155+
},
156+
tooltip: {
157+
enabled: false
158+
}
159+
},
160+
barChartSeries: [
161+
{
162+
data: [20, 10, 30, 15, 10, 20, 10, 30, 15, 10]
163+
}
164+
],
165+
barChartOptions: {
166+
grid: {
167+
show: false
168+
},
169+
fill: {
170+
colors: ["#000000"],
171+
opacity: 0.2
172+
},
173+
chart: {
174+
toolbar: {
175+
show: false
176+
},
177+
parentHeightOffset: 0
178+
},
179+
dataLabels: {
180+
enabled: false
181+
},
182+
stroke: {
183+
show: false
184+
},
185+
yaxis: {
186+
show: false
187+
},
188+
xaxis: {
189+
show: false,
190+
lines: {
191+
show: false
192+
},
193+
axisBorder: {
194+
show: false
195+
},
196+
axisTicks: {
197+
show: false
198+
},
199+
labels: {
200+
show: false
201+
}
202+
},
203+
legend: {
204+
show: false
205+
},
206+
tooltip: {
207+
enabled: false
208+
}
209+
}
210+
};
211+
},
212+
methods: {
213+
updateChart() {
214+
let newData = this.areaChartSeries[0].data;
215+
newData.splice(0, 1);
216+
217+
const lastValue = newData[newData.length - 1];
218+
const max = 40,
219+
min = 1;
220+
const numberData =
221+
lastValue > max / 2
222+
? { max: max / 2, min: min + 10 }
223+
: { max: max - 10, min: max / 2 };
224+
225+
newData.push(
226+
Math.floor(Math.random() * (numberData.max - numberData.min + 1)) +
227+
numberData.min
228+
);
229+
230+
this.areaChartSeries = [{ data: newData }];
231+
}
232+
},
233+
mounted() {
234+
setInterval(() => {
235+
this.updateChart();
236+
}, 1000);
237+
}
238+
};
239+
</script>

‎src/components/cards/ProfileImageCard.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const Card = styled.div`
3232
background: #f3f3f3;
3333
box-shadow: 8px 8px 10px #e0e0e0, -2px -2px 15px #ffffff;
3434
overflow: hidden;
35-
margin-bottom: 10rem;
35+
margin-bottom: 2rem;
3636
`;
3737
3838
const BackgroundColor = styled.div`

0 commit comments

Comments
 (0)