Skip to content

Commit f689c07

Browse files
mrholekmrholek
committed
refactor: update views
1 parent c00d01b commit f689c07

File tree

7 files changed

+86
-83
lines changed

7 files changed

+86
-83
lines changed

‎src/_nav.js

+11-11
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const _nav = [
88
as: NavLink,
99
anchor: 'Dashboard',
1010
to: '/dashboard',
11-
icon: <CIcon name="cil-speedometer" customClasses="nav-icon" />,
11+
icon: <CIcon name="cil-speedometer" customClassName="nav-icon" />,
1212
badge: {
1313
color: 'info',
1414
text: 'NEW',
@@ -23,14 +23,14 @@ const _nav = [
2323
as: NavLink,
2424
anchor: 'Colors',
2525
to: '/theme/colors',
26-
icon: <CIcon name="cil-drop" customClasses="nav-icon" />,
26+
icon: <CIcon name="cil-drop" customClassName="nav-icon" />,
2727
},
2828
{
2929
_component: 'CNavItem',
3030
as: NavLink,
3131
anchor: 'Typography',
3232
to: '/theme/typography',
33-
icon: <CIcon name="cil-pencil" customClasses="nav-icon" />,
33+
icon: <CIcon name="cil-pencil" customClassName="nav-icon" />,
3434
},
3535
{
3636
_component: 'CNavTitle',
@@ -41,7 +41,7 @@ const _nav = [
4141
as: NavLink,
4242
anchor: 'Base',
4343
to: '/to',
44-
icon: <CIcon name="cil-puzzle" customClasses="nav-icon" />,
44+
icon: <CIcon name="cil-puzzle" customClassName="nav-icon" />,
4545
items: [
4646
{
4747
_component: 'CNavItem',
@@ -126,7 +126,7 @@ const _nav = [
126126
{
127127
_component: 'CNavGroup',
128128
anchor: 'Buttons',
129-
icon: <CIcon name="cil-cursor" customClasses="nav-icon" />,
129+
icon: <CIcon name="cil-cursor" customClassName="nav-icon" />,
130130
items: [
131131
{
132132
_component: 'CNavItem',
@@ -151,7 +151,7 @@ const _nav = [
151151
{
152152
_component: 'CNavGroup',
153153
anchor: 'Forms',
154-
icon: <CIcon name="cil-notes" customClasses="nav-icon" />,
154+
icon: <CIcon name="cil-notes" customClassName="nav-icon" />,
155155
items: [
156156
{
157157
_component: 'CNavItem',
@@ -208,12 +208,12 @@ const _nav = [
208208
as: NavLink,
209209
anchor: 'Charts',
210210
to: '/charts',
211-
icon: <CIcon name="cil-chart-pie" customClasses="nav-icon" />,
211+
icon: <CIcon name="cil-chart-pie" customClassName="nav-icon" />,
212212
},
213213
{
214214
_component: 'CNavGroup',
215215
anchor: 'Icons',
216-
icon: <CIcon name="cil-star" customClasses="nav-icon" />,
216+
icon: <CIcon name="cil-star" customClassName="nav-icon" />,
217217
items: [
218218
{
219219
_component: 'CNavItem',
@@ -242,7 +242,7 @@ const _nav = [
242242
{
243243
_component: 'CNavGroup',
244244
anchor: 'Notifications',
245-
icon: <CIcon name="cil-bell" customClasses="nav-icon" />,
245+
icon: <CIcon name="cil-bell" customClassName="nav-icon" />,
246246
items: [
247247
{
248248
_component: 'CNavItem',
@@ -275,7 +275,7 @@ const _nav = [
275275
as: NavLink,
276276
anchor: 'Widgets',
277277
to: '/widgets',
278-
icon: <CIcon name="cil-calculator" customClasses="nav-icon" />,
278+
icon: <CIcon name="cil-calculator" customClassName="nav-icon" />,
279279
badge: {
280280
color: 'info',
281281
text: 'NEW',
@@ -288,7 +288,7 @@ const _nav = [
288288
{
289289
_component: 'CNavGroup',
290290
anchor: 'Pages',
291-
icon: <CIcon name="cil-star" customClasses="nav-icon" />,
291+
icon: <CIcon name="cil-star" customClassName="nav-icon" />,
292292
items: [
293293
{
294294
_component: 'CNavItem',

‎src/assets/icons/index.js

+2
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ import {
3535
cilAlignLeft,
3636
cilAlignRight,
3737
cilApplicationsSettings,
38+
cilArrowBottom,
3839
cilArrowRight,
3940
cilArrowTop,
4041
cilAsterisk,
@@ -138,6 +139,7 @@ export const icons = Object.assign(
138139
cilAlignLeft,
139140
cilAlignRight,
140141
cilApplicationsSettings,
142+
cilArrowBottom,
141143
cilArrowRight,
142144
cilArrowTop,
143145
cilAsterisk,

‎src/components/header/AppHeaderDropdown.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const AppHeaderDropdown = () => {
1515
return (
1616
<CDropdown variant="nav-item">
1717
<CDropdownToggle placement="bottom-end" className="py-0" caret={false}>
18-
<CAvatar src="avatars/8.jpg" size="md" />
18+
<CAvatar src="/avatars/8.jpg" size="md" />
1919
</CDropdownToggle>
2020
<CDropdownMenu className="pt-0" placement="bottom-end">
2121
<CDropdownHeader className="bg-light fw-semibold py-2">Account</CDropdownHeader>

‎src/views/components/widgets/Widgets.js

+17-17
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@ const Widgets = () => {
117117
<CCol xs="12" sm="6" lg="3">
118118
<CWidgetIcon
119119
className="mb-3"
120-
icon={<CIcon width={24} name="cil-settings" className="icon icon-xl" />}
120+
icon={<CIcon width={24} name="cil-settings" size="xl" />}
121121
iconPadding={3}
122122
title="income"
123123
value="$1.999,50"
@@ -127,7 +127,7 @@ const Widgets = () => {
127127
<CCol xs="12" sm="6" lg="3">
128128
<CWidgetIcon
129129
className="mb-3"
130-
icon={<CIcon width={24} name="cil-user" className="icon icon-xl" />}
130+
icon={<CIcon width={24} name="cil-user" size="xl" />}
131131
iconPadding={3}
132132
title="income"
133133
value="$1.999,50"
@@ -137,7 +137,7 @@ const Widgets = () => {
137137
<CCol xs="12" sm="6" lg="3">
138138
<CWidgetIcon
139139
className="mb-3"
140-
icon={<CIcon width={24} name="cil-moon" className="icon icon-xl" />}
140+
icon={<CIcon width={24} name="cil-moon" size="xl" />}
141141
iconPadding={3}
142142
title="income"
143143
value="$1.999,50"
@@ -147,7 +147,7 @@ const Widgets = () => {
147147
<CCol xs="12" sm="6" lg="3">
148148
<CWidgetIcon
149149
className="mb-3"
150-
icon={<CIcon width={24} name="cil-bell" className="icon icon-xl" />}
150+
icon={<CIcon width={24} name="cil-bell" size="xl" />}
151151
iconPadding={3}
152152
title="income"
153153
value="$1.999,50"
@@ -157,7 +157,7 @@ const Widgets = () => {
157157
<CCol xs="12" sm="6" lg="3">
158158
<CWidgetIcon
159159
className="mb-3"
160-
icon={<CIcon width={24} name="cil-settings" className="icon icon-xl" />}
160+
icon={<CIcon width={24} name="cil-settings" size="xl" />}
161161
iconPadding={3}
162162
title="income"
163163
value="$1.999,50"
@@ -178,7 +178,7 @@ const Widgets = () => {
178178
<CCol xs="12" sm="6" lg="3">
179179
<CWidgetIcon
180180
className="mb-3"
181-
icon={<CIcon width={24} name="cil-laptop" className="icon icon-xl" />}
181+
icon={<CIcon width={24} name="cil-laptop" size="xl" />}
182182
iconPadding={3}
183183
title="income"
184184
value="$1.999,50"
@@ -199,7 +199,7 @@ const Widgets = () => {
199199
<CCol xs="12" sm="6" lg="3">
200200
<CWidgetIcon
201201
className="mb-3"
202-
icon={<CIcon width={24} name="cil-moon" className="icon icon-xl" />}
202+
icon={<CIcon width={24} name="cil-moon" size="xl" />}
203203
iconPadding={3}
204204
title="income"
205205
value="$1.999,50"
@@ -220,7 +220,7 @@ const Widgets = () => {
220220
<CCol xs="12" sm="6" lg="3">
221221
<CWidgetIcon
222222
className="mb-3"
223-
icon={<CIcon width={24} name="cil-bell" className="icon icon-xl" />}
223+
icon={<CIcon width={24} name="cil-bell" size="xl" />}
224224
iconPadding={3}
225225
title="income"
226226
value="$1.999,50"
@@ -242,7 +242,7 @@ const Widgets = () => {
242242
<CWidgetIcon
243243
className="mb-3"
244244
padding={0}
245-
icon={<CIcon width={24} name="cil-settings" className="icon icon-xl" />}
245+
icon={<CIcon width={24} name="cil-settings" size="xl" />}
246246
iconPadding={4}
247247
title="income"
248248
value="$1.999,50"
@@ -253,7 +253,7 @@ const Widgets = () => {
253253
<CWidgetIcon
254254
className="mb-3"
255255
padding={0}
256-
icon={<CIcon width={24} name="cil-user" className="icon icon-xl" />}
256+
icon={<CIcon width={24} name="cil-user" size="xl" />}
257257
iconPadding={4}
258258
title="income"
259259
value="$1.999,50"
@@ -264,7 +264,7 @@ const Widgets = () => {
264264
<CWidgetIcon
265265
className="mb-3"
266266
padding={0}
267-
icon={<CIcon width={24} name="cil-moon" className="icon icon-xl" />}
267+
icon={<CIcon width={24} name="cil-moon" size="xl" />}
268268
iconPadding={4}
269269
title="income"
270270
value="$1.999,50"
@@ -275,7 +275,7 @@ const Widgets = () => {
275275
<CWidgetIcon
276276
className="mb-3"
277277
padding={0}
278-
icon={<CIcon width={24} name="cil-bell" className="icon icon-xl" />}
278+
icon={<CIcon width={24} name="cil-bell" size="xl" />}
279279
iconPadding={4}
280280
title="income"
281281
value="$1.999,50"
@@ -287,34 +287,34 @@ const Widgets = () => {
287287
<WidgetsBrand withCharts />
288288
<CCardGroup className="mb-4">
289289
<CWidgetProgressIcon
290-
icon={<CIcon name="cil-people" className="icon icon-2xl" />}
290+
icon={<CIcon name="cil-people" height="36" />}
291291
value="87.500"
292292
title="Visitors"
293293
progressColor="info"
294294
progressValue={75}
295295
/>
296296
<CWidgetProgressIcon
297-
icon={<CIcon name="cil-userFollow" className="icon icon-2xl" />}
297+
icon={<CIcon name="cil-userFollow" height="36" />}
298298
value="385"
299299
title="New Clients"
300300
progressColor="success"
301301
progressValue={75}
302302
/>
303303
<CWidgetProgressIcon
304-
icon={<CIcon name="cil-basket" className="icon icon-2xl" />}
304+
icon={<CIcon name="cil-basket" height="36" />}
305305
value="1238"
306306
title="Products sold"
307307
progressColor="warning"
308308
progressValue={75}
309309
/>
310310
<CWidgetProgressIcon
311-
icon={<CIcon name="cil-chartPie" className="icon icon-2xl" />}
311+
icon={<CIcon name="cil-chartPie" height="36" />}
312312
value="28%"
313313
title="Returning Visitors"
314314
progressValue={75}
315315
/>
316316
<CWidgetProgressIcon
317-
icon={<CIcon name="cil-speedometer" className="icon icon-2xl" />}
317+
icon={<CIcon name="cil-speedometer" height="36" />}
318318
value="5:34:11"
319319
title="Avg. Time"
320320
progressColor="danger"

‎src/views/components/widgets/WidgetsDropdown.js

+43-8
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,13 @@ const WidgetsDropdown = () => {
1919
<CWidgetDropdown
2020
className="mb-4"
2121
color="primary"
22-
value="9.823"
23-
title="Members online"
22+
value="26K"
23+
change={
24+
<>
25+
(-12.4% <CIcon name="cil-arrow-bottom" />)
26+
</>
27+
}
28+
title="Users"
2429
action={
2530
<CDropdown alignment="end">
2631
<CDropdownToggle color="transparent" caret={false} className="p-0">
@@ -99,8 +104,13 @@ const WidgetsDropdown = () => {
99104
<CWidgetDropdown
100105
className="mb-4"
101106
color="info"
102-
value="9.823"
103-
title="Members online"
107+
value="$6.200"
108+
change={
109+
<>
110+
(40.9% <CIcon name="cil-arrow-top" />)
111+
</>
112+
}
113+
title="Income"
104114
action={
105115
<CDropdown alignment="end">
106116
<CDropdownToggle color="transparent" caret={false} className="p-0">
@@ -130,6 +140,21 @@ const WidgetsDropdown = () => {
130140
},
131141
],
132142
}}
143+
getDatasetAtEvent={(dataset, event) => {
144+
console.log('init1')
145+
console.log(dataset)
146+
console.log(event)
147+
}}
148+
getElementAtEvent={(element, event) => {
149+
console.log('init2')
150+
console.log(element)
151+
console.log(event)
152+
}}
153+
getElementsAtEvent={(element, event) => {
154+
console.log('init3')
155+
console.log(element)
156+
console.log(event)
157+
}}
133158
options={{
134159
plugins: {
135160
legend: {
@@ -178,8 +203,13 @@ const WidgetsDropdown = () => {
178203
<CWidgetDropdown
179204
className="mb-4"
180205
color="warning"
181-
value="9.823"
182-
title="Members online"
206+
value="2.49%"
207+
change={
208+
<>
209+
(84.7% <CIcon name="cil-arrow-top" />)
210+
</>
211+
}
212+
title="Conversion Rate"
183213
action={
184214
<CDropdown alignment="end">
185215
<CDropdownToggle color="transparent" caret={false} className="p-0">
@@ -244,8 +274,13 @@ const WidgetsDropdown = () => {
244274
<CWidgetDropdown
245275
className="mb-4"
246276
color="danger"
247-
value="9.823"
248-
title="Members online"
277+
value="44K"
278+
change={
279+
<>
280+
(-23.6% <CIcon name="cil-arrow-bottom" />)
281+
</>
282+
}
283+
title="Sessions"
249284
action={
250285
<CDropdown alignment="end">
251286
<CDropdownToggle color="transparent" caret={false} className="p-0">

0 commit comments

Comments
 (0)