refactor: update views
This commit is contained in:
Łukasz Holeczek
parent
c00d01b51b
commit
f689c07470
22
src/_nav.js
22
src/_nav.js
@ -8,7 +8,7 @@ const _nav = [
|
||||
as: NavLink,
|
||||
anchor: 'Dashboard',
|
||||
to: '/dashboard',
|
||||
icon: <CIcon name="cil-speedometer" customClasses="nav-icon" />,
|
||||
icon: <CIcon name="cil-speedometer" customClassName="nav-icon" />,
|
||||
badge: {
|
||||
color: 'info',
|
||||
text: 'NEW',
|
||||
@ -23,14 +23,14 @@ const _nav = [
|
||||
as: NavLink,
|
||||
anchor: 'Colors',
|
||||
to: '/theme/colors',
|
||||
icon: <CIcon name="cil-drop" customClasses="nav-icon" />,
|
||||
icon: <CIcon name="cil-drop" customClassName="nav-icon" />,
|
||||
},
|
||||
{
|
||||
_component: 'CNavItem',
|
||||
as: NavLink,
|
||||
anchor: 'Typography',
|
||||
to: '/theme/typography',
|
||||
icon: <CIcon name="cil-pencil" customClasses="nav-icon" />,
|
||||
icon: <CIcon name="cil-pencil" customClassName="nav-icon" />,
|
||||
},
|
||||
{
|
||||
_component: 'CNavTitle',
|
||||
@ -41,7 +41,7 @@ const _nav = [
|
||||
as: NavLink,
|
||||
anchor: 'Base',
|
||||
to: '/to',
|
||||
icon: <CIcon name="cil-puzzle" customClasses="nav-icon" />,
|
||||
icon: <CIcon name="cil-puzzle" customClassName="nav-icon" />,
|
||||
items: [
|
||||
{
|
||||
_component: 'CNavItem',
|
||||
@ -126,7 +126,7 @@ const _nav = [
|
||||
{
|
||||
_component: 'CNavGroup',
|
||||
anchor: 'Buttons',
|
||||
icon: <CIcon name="cil-cursor" customClasses="nav-icon" />,
|
||||
icon: <CIcon name="cil-cursor" customClassName="nav-icon" />,
|
||||
items: [
|
||||
{
|
||||
_component: 'CNavItem',
|
||||
@ -151,7 +151,7 @@ const _nav = [
|
||||
{
|
||||
_component: 'CNavGroup',
|
||||
anchor: 'Forms',
|
||||
icon: <CIcon name="cil-notes" customClasses="nav-icon" />,
|
||||
icon: <CIcon name="cil-notes" customClassName="nav-icon" />,
|
||||
items: [
|
||||
{
|
||||
_component: 'CNavItem',
|
||||
@ -208,12 +208,12 @@ const _nav = [
|
||||
as: NavLink,
|
||||
anchor: 'Charts',
|
||||
to: '/charts',
|
||||
icon: <CIcon name="cil-chart-pie" customClasses="nav-icon" />,
|
||||
icon: <CIcon name="cil-chart-pie" customClassName="nav-icon" />,
|
||||
},
|
||||
{
|
||||
_component: 'CNavGroup',
|
||||
anchor: 'Icons',
|
||||
icon: <CIcon name="cil-star" customClasses="nav-icon" />,
|
||||
icon: <CIcon name="cil-star" customClassName="nav-icon" />,
|
||||
items: [
|
||||
{
|
||||
_component: 'CNavItem',
|
||||
@ -242,7 +242,7 @@ const _nav = [
|
||||
{
|
||||
_component: 'CNavGroup',
|
||||
anchor: 'Notifications',
|
||||
icon: <CIcon name="cil-bell" customClasses="nav-icon" />,
|
||||
icon: <CIcon name="cil-bell" customClassName="nav-icon" />,
|
||||
items: [
|
||||
{
|
||||
_component: 'CNavItem',
|
||||
@ -275,7 +275,7 @@ const _nav = [
|
||||
as: NavLink,
|
||||
anchor: 'Widgets',
|
||||
to: '/widgets',
|
||||
icon: <CIcon name="cil-calculator" customClasses="nav-icon" />,
|
||||
icon: <CIcon name="cil-calculator" customClassName="nav-icon" />,
|
||||
badge: {
|
||||
color: 'info',
|
||||
text: 'NEW',
|
||||
@ -288,7 +288,7 @@ const _nav = [
|
||||
{
|
||||
_component: 'CNavGroup',
|
||||
anchor: 'Pages',
|
||||
icon: <CIcon name="cil-star" customClasses="nav-icon" />,
|
||||
icon: <CIcon name="cil-star" customClassName="nav-icon" />,
|
||||
items: [
|
||||
{
|
||||
_component: 'CNavItem',
|
||||
|
||||
@ -35,6 +35,7 @@ import {
|
||||
cilAlignLeft,
|
||||
cilAlignRight,
|
||||
cilApplicationsSettings,
|
||||
cilArrowBottom,
|
||||
cilArrowRight,
|
||||
cilArrowTop,
|
||||
cilAsterisk,
|
||||
@ -138,6 +139,7 @@ export const icons = Object.assign(
|
||||
cilAlignLeft,
|
||||
cilAlignRight,
|
||||
cilApplicationsSettings,
|
||||
cilArrowBottom,
|
||||
cilArrowRight,
|
||||
cilArrowTop,
|
||||
cilAsterisk,
|
||||
|
||||
@ -15,7 +15,7 @@ const AppHeaderDropdown = () => {
|
||||
return (
|
||||
<CDropdown variant="nav-item">
|
||||
<CDropdownToggle placement="bottom-end" className="py-0" caret={false}>
|
||||
<CAvatar src="avatars/8.jpg" size="md" />
|
||||
<CAvatar src="/avatars/8.jpg" size="md" />
|
||||
</CDropdownToggle>
|
||||
<CDropdownMenu className="pt-0" placement="bottom-end">
|
||||
<CDropdownHeader className="bg-light fw-semibold py-2">Account</CDropdownHeader>
|
||||
|
||||
@ -117,7 +117,7 @@ const Widgets = () => {
|
||||
<CCol xs="12" sm="6" lg="3">
|
||||
<CWidgetIcon
|
||||
className="mb-3"
|
||||
icon={<CIcon width={24} name="cil-settings" className="icon icon-xl" />}
|
||||
icon={<CIcon width={24} name="cil-settings" size="xl" />}
|
||||
iconPadding={3}
|
||||
title="income"
|
||||
value="$1.999,50"
|
||||
@ -127,7 +127,7 @@ const Widgets = () => {
|
||||
<CCol xs="12" sm="6" lg="3">
|
||||
<CWidgetIcon
|
||||
className="mb-3"
|
||||
icon={<CIcon width={24} name="cil-user" className="icon icon-xl" />}
|
||||
icon={<CIcon width={24} name="cil-user" size="xl" />}
|
||||
iconPadding={3}
|
||||
title="income"
|
||||
value="$1.999,50"
|
||||
@ -137,7 +137,7 @@ const Widgets = () => {
|
||||
<CCol xs="12" sm="6" lg="3">
|
||||
<CWidgetIcon
|
||||
className="mb-3"
|
||||
icon={<CIcon width={24} name="cil-moon" className="icon icon-xl" />}
|
||||
icon={<CIcon width={24} name="cil-moon" size="xl" />}
|
||||
iconPadding={3}
|
||||
title="income"
|
||||
value="$1.999,50"
|
||||
@ -147,7 +147,7 @@ const Widgets = () => {
|
||||
<CCol xs="12" sm="6" lg="3">
|
||||
<CWidgetIcon
|
||||
className="mb-3"
|
||||
icon={<CIcon width={24} name="cil-bell" className="icon icon-xl" />}
|
||||
icon={<CIcon width={24} name="cil-bell" size="xl" />}
|
||||
iconPadding={3}
|
||||
title="income"
|
||||
value="$1.999,50"
|
||||
@ -157,7 +157,7 @@ const Widgets = () => {
|
||||
<CCol xs="12" sm="6" lg="3">
|
||||
<CWidgetIcon
|
||||
className="mb-3"
|
||||
icon={<CIcon width={24} name="cil-settings" className="icon icon-xl" />}
|
||||
icon={<CIcon width={24} name="cil-settings" size="xl" />}
|
||||
iconPadding={3}
|
||||
title="income"
|
||||
value="$1.999,50"
|
||||
@ -178,7 +178,7 @@ const Widgets = () => {
|
||||
<CCol xs="12" sm="6" lg="3">
|
||||
<CWidgetIcon
|
||||
className="mb-3"
|
||||
icon={<CIcon width={24} name="cil-laptop" className="icon icon-xl" />}
|
||||
icon={<CIcon width={24} name="cil-laptop" size="xl" />}
|
||||
iconPadding={3}
|
||||
title="income"
|
||||
value="$1.999,50"
|
||||
@ -199,7 +199,7 @@ const Widgets = () => {
|
||||
<CCol xs="12" sm="6" lg="3">
|
||||
<CWidgetIcon
|
||||
className="mb-3"
|
||||
icon={<CIcon width={24} name="cil-moon" className="icon icon-xl" />}
|
||||
icon={<CIcon width={24} name="cil-moon" size="xl" />}
|
||||
iconPadding={3}
|
||||
title="income"
|
||||
value="$1.999,50"
|
||||
@ -220,7 +220,7 @@ const Widgets = () => {
|
||||
<CCol xs="12" sm="6" lg="3">
|
||||
<CWidgetIcon
|
||||
className="mb-3"
|
||||
icon={<CIcon width={24} name="cil-bell" className="icon icon-xl" />}
|
||||
icon={<CIcon width={24} name="cil-bell" size="xl" />}
|
||||
iconPadding={3}
|
||||
title="income"
|
||||
value="$1.999,50"
|
||||
@ -242,7 +242,7 @@ const Widgets = () => {
|
||||
<CWidgetIcon
|
||||
className="mb-3"
|
||||
padding={0}
|
||||
icon={<CIcon width={24} name="cil-settings" className="icon icon-xl" />}
|
||||
icon={<CIcon width={24} name="cil-settings" size="xl" />}
|
||||
iconPadding={4}
|
||||
title="income"
|
||||
value="$1.999,50"
|
||||
@ -253,7 +253,7 @@ const Widgets = () => {
|
||||
<CWidgetIcon
|
||||
className="mb-3"
|
||||
padding={0}
|
||||
icon={<CIcon width={24} name="cil-user" className="icon icon-xl" />}
|
||||
icon={<CIcon width={24} name="cil-user" size="xl" />}
|
||||
iconPadding={4}
|
||||
title="income"
|
||||
value="$1.999,50"
|
||||
@ -264,7 +264,7 @@ const Widgets = () => {
|
||||
<CWidgetIcon
|
||||
className="mb-3"
|
||||
padding={0}
|
||||
icon={<CIcon width={24} name="cil-moon" className="icon icon-xl" />}
|
||||
icon={<CIcon width={24} name="cil-moon" size="xl" />}
|
||||
iconPadding={4}
|
||||
title="income"
|
||||
value="$1.999,50"
|
||||
@ -275,7 +275,7 @@ const Widgets = () => {
|
||||
<CWidgetIcon
|
||||
className="mb-3"
|
||||
padding={0}
|
||||
icon={<CIcon width={24} name="cil-bell" className="icon icon-xl" />}
|
||||
icon={<CIcon width={24} name="cil-bell" size="xl" />}
|
||||
iconPadding={4}
|
||||
title="income"
|
||||
value="$1.999,50"
|
||||
@ -287,34 +287,34 @@ const Widgets = () => {
|
||||
<WidgetsBrand withCharts />
|
||||
<CCardGroup className="mb-4">
|
||||
<CWidgetProgressIcon
|
||||
icon={<CIcon name="cil-people" className="icon icon-2xl" />}
|
||||
icon={<CIcon name="cil-people" height="36" />}
|
||||
value="87.500"
|
||||
title="Visitors"
|
||||
progressColor="info"
|
||||
progressValue={75}
|
||||
/>
|
||||
<CWidgetProgressIcon
|
||||
icon={<CIcon name="cil-userFollow" className="icon icon-2xl" />}
|
||||
icon={<CIcon name="cil-userFollow" height="36" />}
|
||||
value="385"
|
||||
title="New Clients"
|
||||
progressColor="success"
|
||||
progressValue={75}
|
||||
/>
|
||||
<CWidgetProgressIcon
|
||||
icon={<CIcon name="cil-basket" className="icon icon-2xl" />}
|
||||
icon={<CIcon name="cil-basket" height="36" />}
|
||||
value="1238"
|
||||
title="Products sold"
|
||||
progressColor="warning"
|
||||
progressValue={75}
|
||||
/>
|
||||
<CWidgetProgressIcon
|
||||
icon={<CIcon name="cil-chartPie" className="icon icon-2xl" />}
|
||||
icon={<CIcon name="cil-chartPie" height="36" />}
|
||||
value="28%"
|
||||
title="Returning Visitors"
|
||||
progressValue={75}
|
||||
/>
|
||||
<CWidgetProgressIcon
|
||||
icon={<CIcon name="cil-speedometer" className="icon icon-2xl" />}
|
||||
icon={<CIcon name="cil-speedometer" height="36" />}
|
||||
value="5:34:11"
|
||||
title="Avg. Time"
|
||||
progressColor="danger"
|
||||
|
||||
@ -19,8 +19,13 @@ const WidgetsDropdown = () => {
|
||||
<CWidgetDropdown
|
||||
className="mb-4"
|
||||
color="primary"
|
||||
value="9.823"
|
||||
title="Members online"
|
||||
value="26K"
|
||||
change={
|
||||
<>
|
||||
(-12.4% <CIcon name="cil-arrow-bottom" />)
|
||||
</>
|
||||
}
|
||||
title="Users"
|
||||
action={
|
||||
<CDropdown alignment="end">
|
||||
<CDropdownToggle color="transparent" caret={false} className="p-0">
|
||||
@ -99,8 +104,13 @@ const WidgetsDropdown = () => {
|
||||
<CWidgetDropdown
|
||||
className="mb-4"
|
||||
color="info"
|
||||
value="9.823"
|
||||
title="Members online"
|
||||
value="$6.200"
|
||||
change={
|
||||
<>
|
||||
(40.9% <CIcon name="cil-arrow-top" />)
|
||||
</>
|
||||
}
|
||||
title="Income"
|
||||
action={
|
||||
<CDropdown alignment="end">
|
||||
<CDropdownToggle color="transparent" caret={false} className="p-0">
|
||||
@ -130,6 +140,21 @@ const WidgetsDropdown = () => {
|
||||
},
|
||||
],
|
||||
}}
|
||||
getDatasetAtEvent={(dataset, event) => {
|
||||
console.log('init1')
|
||||
console.log(dataset)
|
||||
console.log(event)
|
||||
}}
|
||||
getElementAtEvent={(element, event) => {
|
||||
console.log('init2')
|
||||
console.log(element)
|
||||
console.log(event)
|
||||
}}
|
||||
getElementsAtEvent={(element, event) => {
|
||||
console.log('init3')
|
||||
console.log(element)
|
||||
console.log(event)
|
||||
}}
|
||||
options={{
|
||||
plugins: {
|
||||
legend: {
|
||||
@ -178,8 +203,13 @@ const WidgetsDropdown = () => {
|
||||
<CWidgetDropdown
|
||||
className="mb-4"
|
||||
color="warning"
|
||||
value="9.823"
|
||||
title="Members online"
|
||||
value="2.49%"
|
||||
change={
|
||||
<>
|
||||
(84.7% <CIcon name="cil-arrow-top" />)
|
||||
</>
|
||||
}
|
||||
title="Conversion Rate"
|
||||
action={
|
||||
<CDropdown alignment="end">
|
||||
<CDropdownToggle color="transparent" caret={false} className="p-0">
|
||||
@ -244,8 +274,13 @@ const WidgetsDropdown = () => {
|
||||
<CWidgetDropdown
|
||||
className="mb-4"
|
||||
color="danger"
|
||||
value="9.823"
|
||||
title="Members online"
|
||||
value="44K"
|
||||
change={
|
||||
<>
|
||||
(-23.6% <CIcon name="cil-arrow-bottom" />)
|
||||
</>
|
||||
}
|
||||
title="Sessions"
|
||||
action={
|
||||
<CDropdown alignment="end">
|
||||
<CDropdownToggle color="transparent" caret={false} className="p-0">
|
||||
|
||||
@ -146,28 +146,28 @@ const Dashboard = () => {
|
||||
/>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<CRow className="text-center">
|
||||
<CCol md sm="12" className="mb-sm-2 mb-0">
|
||||
<CRow xs={{ cols: 1 }} md={{ cols: 5 }} className="text-center">
|
||||
<CCol className="mb-sm-2 mb-0">
|
||||
<div className="text-medium-emphasis">Visits</div>
|
||||
<strong>29.703 Users (40%)</strong>
|
||||
<CProgress thin className="mt-2" precision={1} color="success" value={40} />
|
||||
</CCol>
|
||||
<CCol md sm="12" className="mb-sm-2 mb-0">
|
||||
<CCol className="mb-sm-2 mb-0">
|
||||
<div className="text-medium-emphasis">Unique</div>
|
||||
<strong>24.093 Users (20%)</strong>
|
||||
<CProgress thin className="mt-2" precision={1} color="info" value={40} />
|
||||
</CCol>
|
||||
<CCol md sm="12" className="mb-sm-2 mb-0">
|
||||
<CCol className="mb-sm-2 mb-0">
|
||||
<div className="text-medium-emphasis">Pageviews</div>
|
||||
<strong>78.706 Views (60%)</strong>
|
||||
<CProgress thin className="mt-2" precision={1} color="warning" value={40} />
|
||||
</CCol>
|
||||
<CCol md sm="12" className="mb-sm-2 mb-0">
|
||||
<CCol className="mb-sm-2 mb-0">
|
||||
<div className="text-medium-emphasis">New Users</div>
|
||||
<strong>22.123 Users (80%)</strong>
|
||||
<CProgress thin className="mt-2" precision={1} color="danger" value={40} />
|
||||
</CCol>
|
||||
<CCol md sm="12" className="mb-sm-2 mb-0">
|
||||
<CCol className="mb-sm-2 mb-0">
|
||||
<div className="text-medium-emphasis">Bounce Rate</div>
|
||||
<strong>Average Rate (40.15%)</strong>
|
||||
<CProgress thin className="mt-2" precision={1} value={40} />
|
||||
@ -375,7 +375,7 @@ const Dashboard = () => {
|
||||
<CTableBody>
|
||||
<CTableRow>
|
||||
<CTableDataCell className="text-center">
|
||||
<CAvatar size="md" src="avatars/1.jpg" status="success" />
|
||||
<CAvatar size="md" src="/avatars/1.jpg" status="success" />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div>Yiorgos Avraamu</div>
|
||||
@ -409,7 +409,7 @@ const Dashboard = () => {
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableDataCell className="text-center">
|
||||
<CAvatar size="md" src="avatars/2.jpg" status="danger" />
|
||||
<CAvatar size="md" src="/avatars/2.jpg" status="danger" />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div>Avram Tarasios</div>
|
||||
@ -443,7 +443,7 @@ const Dashboard = () => {
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableDataCell className="text-center">
|
||||
<CAvatar size="md" src="avatars/3.jpg" status="warning" />
|
||||
<CAvatar size="md" src="/avatars/3.jpg" status="warning" />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div>Quintin Ed</div>
|
||||
@ -477,7 +477,7 @@ const Dashboard = () => {
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableDataCell className="text-center">
|
||||
<CAvatar size="md" src="avatars/4.jpg" status="secondary" />
|
||||
<CAvatar size="md" src="/avatars/4.jpg" status="secondary" />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div>Enéas Kwadwo</div>
|
||||
@ -511,7 +511,7 @@ const Dashboard = () => {
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableDataCell className="text-center">
|
||||
<CAvatar size="md" src="avatars/5.jpg" status="success" />
|
||||
<CAvatar size="md" src="/avatars/5.jpg" status="success" />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div>Agapetus Tadeáš</div>
|
||||
@ -545,7 +545,7 @@ const Dashboard = () => {
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableDataCell className="text-center">
|
||||
<CAvatar size="md" src="avatars/6.jpg" status="danger" />
|
||||
<CAvatar size="md" src="/avatars/6.jpg" status="danger" />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div>Friderik Dávid</div>
|
||||
|
||||
@ -84,40 +84,6 @@ const Colors = () => {
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>Grays</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow className="mb-3">
|
||||
<ThemeColor className="bg-gray-100">
|
||||
<h6>Gray 100 Color</h6>
|
||||
</ThemeColor>
|
||||
<ThemeColor className="bg-gray-200">
|
||||
<h6>Gray 200 Color</h6>
|
||||
</ThemeColor>
|
||||
<ThemeColor className="bg-gray-300">
|
||||
<h6>Gray 300 Color</h6>
|
||||
</ThemeColor>
|
||||
<ThemeColor className="bg-gray-400">
|
||||
<h6>Gray 400 Color</h6>
|
||||
</ThemeColor>
|
||||
<ThemeColor className="bg-gray-500">
|
||||
<h6>Gray 500 Color</h6>
|
||||
</ThemeColor>
|
||||
<ThemeColor className="bg-gray-600">
|
||||
<h6>Gray 600 Color</h6>
|
||||
</ThemeColor>
|
||||
<ThemeColor className="bg-gray-700">
|
||||
<h6>Gray 700 Color</h6>
|
||||
</ThemeColor>
|
||||
<ThemeColor className="bg-gray-800">
|
||||
<h6>Gray 800 Color</h6>
|
||||
</ThemeColor>
|
||||
<ThemeColor className="bg-gray-900">
|
||||
<h6>Gray 900 Color</h6>
|
||||
</ThemeColor>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user