Skip to content

Commit e0c3778

Browse files
mrholekmrholek
committed
Add Social Box Chart
1 parent 04e1176 commit e0c3778

File tree

1 file changed

+140
-16
lines changed

1 file changed

+140
-16
lines changed

‎React_Full_Project/src/views/Dashboard/Dashboard.js

Lines changed: 140 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import {
2626
const brandPrimary = '#20a8d8';
2727
const brandSuccess = '#4dbd74';
2828
const brandInfo = '#63c2de';
29+
const brandWarning = '#f8cb00';
2930
const brandDanger = '#f86c6b';
3031

3132
// Card Chart 1
@@ -198,6 +199,127 @@ const cardChartOpts4 = {
198199
}
199200
}
200201

202+
// Social Box Chart
203+
const socialBoxData = [
204+
{data: [65, 59, 84, 84, 51, 55, 40], label: 'facebook'},
205+
{data: [1, 13, 9, 17, 34, 41, 38], label: 'twitter'},
206+
{data: [78, 81, 80, 45, 34, 12, 40], label: 'linkedin'},
207+
{data: [35, 23, 56, 22, 97, 23, 64], label: 'google'}
208+
];
209+
210+
const makeSocialBoxData = (dataSetNo) => {
211+
const dataset = socialBoxData[dataSetNo];
212+
const data = {
213+
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
214+
datasets: [
215+
{
216+
backgroundColor: 'rgba(255,255,255,.1)',
217+
borderColor: 'rgba(255,255,255,.55)',
218+
pointHoverBackgroundColor: '#fff',
219+
borderWidth: 2,
220+
data: dataset.data,
221+
label: dataset.label,
222+
}
223+
]
224+
};
225+
return () => data;
226+
};
227+
228+
const socialChartOpts = {
229+
responsive: true,
230+
maintainAspectRatio: false,
231+
legend: {
232+
display: false
233+
},
234+
scales: {
235+
xAxes: [{
236+
display: false
237+
}],
238+
yAxes: [{
239+
display: false
240+
}]
241+
},
242+
elements: {
243+
point: {
244+
radius: 0,
245+
hitRadius: 10,
246+
hoverRadius: 4,
247+
hoverBorderWidth: 3
248+
}
249+
}
250+
};
251+
252+
// sparkline charts
253+
const sparkLineChartData = [
254+
{
255+
data: [35, 23, 56, 22, 97, 23, 64],
256+
label: 'New Clients'
257+
},
258+
{
259+
data: [65, 59, 84, 84, 51, 55, 40],
260+
label: 'Recurring Clients'
261+
},
262+
{
263+
data: [35, 23, 56, 22, 97, 23, 64],
264+
label: 'Pageviews'
265+
},
266+
{
267+
data: [65, 59, 84, 84, 51, 55, 40],
268+
label: 'Organic'
269+
},
270+
{
271+
data: [78, 81, 80, 45, 34, 12, 40],
272+
label: 'CTR'
273+
},
274+
{
275+
data: [1, 13, 9, 17, 34, 41, 38],
276+
label: 'Bounce Rate'
277+
}
278+
];
279+
280+
const makeSparkLineData = (dataSetNo, variant) => {
281+
const dataset = sparkLineChartData[dataSetNo];
282+
const data = {
283+
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
284+
datasets: [
285+
{
286+
backgroundColor: 'transparent',
287+
borderColor: variant ? variant : '#c2cfd6',
288+
data: dataset.data,
289+
label: dataset.label
290+
}
291+
],
292+
};
293+
return () => data;
294+
};
295+
296+
const sparklineChartOpts = {
297+
responsive: true,
298+
maintainAspectRatio: true,
299+
scales: {
300+
xAxes: [{
301+
display: false,
302+
}],
303+
yAxes: [{
304+
display: false,
305+
}]
306+
},
307+
elements: {
308+
line: {
309+
borderWidth: 2
310+
},
311+
point: {
312+
radius: 0,
313+
hitRadius: 10,
314+
hoverRadius: 4,
315+
hoverBorderWidth: 3,
316+
}
317+
},
318+
legend: {
319+
display: false
320+
}
321+
};
322+
201323
// Main Chart
202324

203325
// convert Hex to RGBA
@@ -305,7 +427,9 @@ class Dashboard extends Component {
305427
});
306428
}
307429

430+
308431
render() {
432+
309433
return (
310434
<div className="animated fadeIn">
311435
<Row>
@@ -329,7 +453,7 @@ class Dashboard extends Component {
329453
<h4 className="mb-0">9.823</h4>
330454
<p>Members online</p>
331455
</CardBlock>
332-
<div className="chart-wrapper px-3" style={{height:'82px'}}>
456+
<div className="chart-wrapper px-3" style={{height:'70px'}}>
333457
<Line data={cardChartData1} options={cardChartOpts1} height={70}/>
334458
</div>
335459
</Card>
@@ -354,7 +478,7 @@ class Dashboard extends Component {
354478
<h4 className="mb-0">9.823</h4>
355479
<p>Members online</p>
356480
</CardBlock>
357-
<div className="chart-wrapper px-3" style={{height:'82px'}}>
481+
<div className="chart-wrapper px-3" style={{height:'70px'}}>
358482
<Line data={cardChartData2} options={cardChartOpts2} height={70}/>
359483
</div>
360484
</Card>
@@ -379,7 +503,7 @@ class Dashboard extends Component {
379503
<h4 className="mb-0">9.823</h4>
380504
<p>Members online</p>
381505
</CardBlock>
382-
<div className="chart-wrapper px-0" style={{height:'82px'}}>
506+
<div className="chart-wrapper px-0" style={{height:'70px'}}>
383507
<Line data={cardChartData3} options={cardChartOpts3} height={70}/>
384508
</div>
385509
</Card>
@@ -404,7 +528,7 @@ class Dashboard extends Component {
404528
<h4 className="mb-0">9.823</h4>
405529
<p>Members online</p>
406530
</CardBlock>
407-
<div className="chart-wrapper px-3" style={{height:'82px'}}>
531+
<div className="chart-wrapper px-3" style={{height:'70px'}}>
408532
<Bar data={cardChartData4} options={cardChartOpts4} height={70}/>
409533
</div>
410534
</Card>
@@ -478,7 +602,7 @@ class Dashboard extends Component {
478602
<div className="social-box facebook">
479603
<i className="fa fa-facebook"></i>
480604
<div className="chart-wrapper">
481-
<canvas id="social-box-chart-1" height="90"></canvas>
605+
<Line data={makeSocialBoxData(0)} options={socialChartOpts} height={90}/>
482606
</div>
483607
<ul>
484608
<li>
@@ -497,7 +621,7 @@ class Dashboard extends Component {
497621
<div className="social-box twitter">
498622
<i className="fa fa-twitter"></i>
499623
<div className="chart-wrapper">
500-
<canvas id="social-box-chart-2" height="90"></canvas>
624+
<Line data={makeSocialBoxData(1)} options={socialChartOpts} height={90}/>
501625
</div>
502626
<ul>
503627
<li>
@@ -517,7 +641,7 @@ class Dashboard extends Component {
517641
<div className="social-box linkedin">
518642
<i className="fa fa-linkedin"></i>
519643
<div className="chart-wrapper">
520-
<canvas id="social-box-chart-3" height="90"></canvas>
644+
<Line data={makeSocialBoxData(2)} options={socialChartOpts} height={90}/>
521645
</div>
522646
<ul>
523647
<li>
@@ -536,7 +660,7 @@ class Dashboard extends Component {
536660
<div className="social-box google-plus">
537661
<i className="fa fa-google-plus"></i>
538662
<div className="chart-wrapper">
539-
<canvas id="social-box-chart-4" height="90"></canvas>
663+
<Line data={makeSocialBoxData(3)} options={socialChartOpts} height={90}/>
540664
</div>
541665
<ul>
542666
<li>
@@ -556,7 +680,7 @@ class Dashboard extends Component {
556680
<Col>
557681
<Card>
558682
<CardHeader>
559-
Traffic &amp; Sales
683+
Traffic {'&'} Sales
560684
</CardHeader>
561685
<CardBlock className="card-body">
562686
<Row>
@@ -568,17 +692,17 @@ class Dashboard extends Component {
568692
<br/>
569693
<strong className="h4">9,123</strong>
570694
<div className="chart-wrapper">
571-
<canvas id="sparkline-chart-1" width="100" height="30"></canvas>
695+
<Line data={makeSparkLineData(0, brandPrimary)} options={sparklineChartOpts} width={100} height={30}/>
572696
</div>
573697
</div>
574698
</Col>
575699
<Col sm="6">
576700
<div className="callout callout-danger">
577-
<small className="text-muted">Recuring Clients</small>
701+
<small className="text-muted">Recurring Clients</small>
578702
<br/>
579703
<strong className="h4">22,643</strong>
580704
<div className="chart-wrapper">
581-
<canvas id="sparkline-chart-2" width="100" height="30"></canvas>
705+
<Line data={makeSparkLineData(1, brandDanger)} options={sparklineChartOpts} width={100} height={30}/>
582706
</div>
583707
</div>
584708
</Col>
@@ -664,7 +788,7 @@ class Dashboard extends Component {
664788
<br/>
665789
<strong className="h4">78,623</strong>
666790
<div className="chart-wrapper">
667-
<canvas id="sparkline-chart-3" width="100" height="30"></canvas>
791+
<Line data={makeSparkLineData(2, brandWarning)} options={sparklineChartOpts} width={100} height={30}/>
668792
</div>
669793
</div>
670794
</Col>
@@ -674,7 +798,7 @@ class Dashboard extends Component {
674798
<br/>
675799
<strong className="h4">49,123</strong>
676800
<div className="chart-wrapper">
677-
<canvas id="sparkline-chart-4" width="100" height="30"></canvas>
801+
<Line data={makeSparkLineData(3, brandSuccess)} options={sparklineChartOpts} width={100} height={30}/>
678802
</div>
679803
</div>
680804
</Col>
@@ -744,7 +868,7 @@ class Dashboard extends Component {
744868
<br/>
745869
<strong className="h4">23%</strong>
746870
<div className="chart-wrapper">
747-
<canvas id="sparkline-chart-5" width="100" height="30"></canvas>
871+
<Line data={makeSparkLineData(4)} options={sparklineChartOpts} width={100} height={30}/>
748872
</div>
749873
</div>
750874
</Col>
@@ -754,7 +878,7 @@ class Dashboard extends Component {
754878
<br/>
755879
<strong className="h4">5%</strong>
756880
<div className="chart-wrapper">
757-
<canvas id="sparkline-chart-6" width="100" height="30"></canvas>
881+
<Line data={makeSparkLineData(5, brandPrimary)} options={sparklineChartOpts} width={100} height={30}/>
758882
</div>
759883
</div>
760884
</Col>

0 commit comments

Comments
 (0)