gitadmin/admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: update views

Browse Source
This commit is contained in:
Łukasz Holeczek 2021-05-18 23:23:33 +02:00
parent 9842172b67
commit dd64f3c2db
11 changed files with 251 additions and 217 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/icons/index.js
View File

@ -88,6 +88,7 @@ import {
cilLockLocked, cilLockLocked,
cilMagnifyingGlass, cilMagnifyingGlass,
cilMap, cilMap,
cilMenu,
cilMoon, cilMoon,
cilNotes, cilNotes,
cilOptions, cilOptions,
@ -189,6 +190,7 @@ export const icons = Object.assign(
cilLockLocked, cilLockLocked,
cilMagnifyingGlass, cilMagnifyingGlass,
cilMap, cilMap,
cilMenu,
cilMoon, cilMoon,
cilNotes, cilNotes,
cilOptions, cilOptions,

2
src/components/AppBreadcrumb.js
View File

@ -31,7 +31,7 @@ const AppBreadcrumb = () => {
const breadcrumbs = getBreadcrumbs(currentLocation) const breadcrumbs = getBreadcrumbs(currentLocation)
return ( return (
<CBreadcrumb className="m-0"> <CBreadcrumb className="m-0 ms-2">
<CBreadcrumbItem href="/">Home</CBreadcrumbItem> <CBreadcrumbItem href="/">Home</CBreadcrumbItem>
{breadcrumbs.map((breadcrumb, index) => { {breadcrumbs.map((breadcrumb, index) => {
return ( return (

26
src/components/AppHeader.js
View File

@ -42,13 +42,13 @@ const AppHeader = () => {
className="ms-md-3 d-lg-none" className="ms-md-3 d-lg-none"
onClick={() => dispatch({ type: 'set', sidebarShow: !sidebarShow })} onClick={() => dispatch({ type: 'set', sidebarShow: !sidebarShow })}
> >
<CIcon name="cil-menu" /> <CIcon name="cil-menu" size="lg" />
</CHeaderToggler> </CHeaderToggler>
<CHeaderBrand className="mx-auto d-lg-none" to="/"> <CHeaderBrand className="mx-auto d-md-none" to="/">
<CIcon name="logo" height="48" alt="Logo" /> <CIcon name="logo" height="48" alt="Logo" />
</CHeaderBrand> </CHeaderBrand>
<CHeaderNav className="d-md-down-none me-auto"> <CHeaderNav className="d-none d-md-flex me-auto">
<CNavItem> <CNavItem>
<CNavLink to="/dashboard" component={NavLink} activeClassName="active"> <CNavLink to="/dashboard" component={NavLink} activeClassName="active">
Dashboard Dashboard
@ -63,9 +63,23 @@ const AppHeader = () => {
</CHeaderNav> </CHeaderNav>
<CHeaderNav> <CHeaderNav>
<AppHeaderDropdownNotif /> <CNavItem>
<AppHeaderDropdownTasks /> <CNavLink>
<AppHeaderDropdownMssg /> <CIcon name="cil-bell" size="lg" />
</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink>
<CIcon name="cil-list" size="lg" />
</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink>
<CIcon name="cil-envelope-open" size="lg" />
</CNavLink>
</CNavItem>
</CHeaderNav>
<CHeaderNav>
<AppHeaderDropdown /> <AppHeaderDropdown />
</CHeaderNav> </CHeaderNav>
</CContainer> </CContainer>

4
src/components/AppSidebar.js
View File

@ -30,7 +30,7 @@ const AppSidebar = () => {
dispatch({ type: 'set', sidebarShow: false }) dispatch({ type: 'set', sidebarShow: false })
}} }}
> >
<CSidebarBrand className="d-md-down-none" to="/"> <CSidebarBrand className="d-none d-md-flex" to="/">
<CIcon className="sidebar-brand-full" name="logo-negative" height={35} /> <CIcon className="sidebar-brand-full" name="logo-negative" height={35} />
<CIcon className="sidebar-brand-narrow" name="sygnet" height={35} /> <CIcon className="sidebar-brand-narrow" name="sygnet" height={35} />
</CSidebarBrand> </CSidebarBrand>
@ -38,7 +38,7 @@ const AppSidebar = () => {
<CCreateNavItem items={navigation} /> <CCreateNavItem items={navigation} />
</CSidebarNav> </CSidebarNav>
<CSidebarToggler <CSidebarToggler
className="c-d-md-down-none" className="d-none d-lg-flex"
onClick={() => dispatch({ type: 'set', sidebarUnfoldable: !unfoldable })} onClick={() => dispatch({ type: 'set', sidebarUnfoldable: !unfoldable })}
/> />
</CSidebar> </CSidebar>

34
src/components/header/AppHeaderDropdown.js
View File

@ -14,64 +14,64 @@ import CIcon from '@coreui/icons-react'
const AppHeaderDropdown = () => { const AppHeaderDropdown = () => {
return ( return (
<CDropdown variant="nav-item"> <CDropdown variant="nav-item">
<CDropdownToggle placement="bottom-end"> <CDropdownToggle placement="bottom-end" className="py-0" caret={false}>
<CAvatar image="avatars/6.jpg" /> <CAvatar src="avatars/8.jpg" size="md" />
</CDropdownToggle> </CDropdownToggle>
<CDropdownMenu className="pt-0" placement="bottom-end"> <CDropdownMenu className="pt-0" placement="bottom-end">
<CDropdownHeader className="bg-light fw-semibold py-2">Account</CDropdownHeader> <CDropdownHeader className="bg-light fw-semibold py-2">Account</CDropdownHeader>
<CDropdownItem> <CDropdownItem href="#">
<CIcon name="cil-bell" className="me-2" /> <CIcon name="cil-bell" className="me-2" />
Updates Updates
<CBadge color="info" className="ms-auto"> <CBadge color="info" className="ms-2">
42 42
</CBadge> </CBadge>
</CDropdownItem> </CDropdownItem>
<CDropdownItem> <CDropdownItem href="#">
<CIcon name="cil-envelope-open" className="me-2" /> <CIcon name="cil-envelope-open" className="me-2" />
Messages Messages
<CBadge color="success" className="ms-auto"> <CBadge color="success" className="ms-2">
42 42
</CBadge> </CBadge>
</CDropdownItem> </CDropdownItem>
<CDropdownItem> <CDropdownItem href="#">
<CIcon name="cil-task" className="me-2" /> <CIcon name="cil-task" className="me-2" />
Tasks Tasks
<CBadge color="danger" className="ms-auto"> <CBadge color="danger" className="ms-2">
42 42
</CBadge> </CBadge>
</CDropdownItem> </CDropdownItem>
<CDropdownItem> <CDropdownItem href="#">
<CIcon name="cil-comment-square" className="me-2" /> <CIcon name="cil-comment-square" className="me-2" />
Comments Comments
<CBadge color="warning" className="ms-auto"> <CBadge color="warning" className="ms-2">
42 42
</CBadge> </CBadge>
</CDropdownItem> </CDropdownItem>
<CDropdownHeader className="bg-light fw-semibold py-2">Settings</CDropdownHeader> <CDropdownHeader className="bg-light fw-semibold py-2">Settings</CDropdownHeader>
<CDropdownItem> <CDropdownItem href="#">
<CIcon name="cil-user" className="me-2" /> <CIcon name="cil-user" className="me-2" />
Profile Profile
</CDropdownItem> </CDropdownItem>
<CDropdownItem> <CDropdownItem href="#">
<CIcon name="cil-settings" className="me-2" /> <CIcon name="cil-settings" className="me-2" />
Settings Settings
</CDropdownItem> </CDropdownItem>
<CDropdownItem> <CDropdownItem href="#">
<CIcon name="cil-credit-card" className="me-2" /> <CIcon name="cil-credit-card" className="me-2" />
Payments Payments
<CBadge color="secondary" className="ms-auto"> <CBadge color="secondary" className="ms-2">
42 42
</CBadge> </CBadge>
</CDropdownItem> </CDropdownItem>
<CDropdownItem> <CDropdownItem href="#">
<CIcon name="cil-file" className="me-2" /> <CIcon name="cil-file" className="me-2" />
Projects Projects
<CBadge color="primary" className="ms-auto"> <CBadge color="primary" className="ms-2">
42 42
</CBadge> </CBadge>
</CDropdownItem> </CDropdownItem>
<CDropdownDivider /> <CDropdownDivider />
<CDropdownItem> <CDropdownItem href="#">
<CIcon name="cil-lock-locked" className="me-2" /> <CIcon name="cil-lock-locked" className="me-2" />
Lock Account Lock Account
</CDropdownItem> </CDropdownItem>

32
src/components/header/AppHeaderDropdownMssg.js
View File

@ -26,16 +26,16 @@ const AppHeaderDropdownMssg = () => {
<CDropdownItem href="#"> <CDropdownItem href="#">
<div className="message"> <div className="message">
<div className="pt-3 me-3 float-start"> <div className="pt-3 me-3 float-start">
<CAvatar image={'avatars/7.jpg'} status="success" /> <CAvatar src={'avatars/7.jpg'} status="success" />
</div> </div>
<div> <div>
<small className="text-muted">John Doe</small> <small className="text-medium-emphasis">John Doe</small>
<small className="text-muted float-end mt-1">Just now</small> <small className="text-medium-emphasis float-end mt-1">Just now</small>
</div> </div>
<div className="text-truncate font-weight-bold"> <div className="text-truncate font-weight-bold">
<span className="fa fa-exclamation text-danger"></span> Important message <span className="fa fa-exclamation text-danger"></span> Important message
</div> </div>
<div className="small text-muted text-truncate"> <div className="small text-medium-emphasis text-truncate">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt... incididunt...
</div> </div>
@ -45,14 +45,14 @@ const AppHeaderDropdownMssg = () => {
<CDropdownItem href="#"> <CDropdownItem href="#">
<div className="message"> <div className="message">
<div className="pt-3 me-3 float-start"> <div className="pt-3 me-3 float-start">
<CAvatar image={'avatars/6.jpg'} status="warning" /> <CAvatar src={'avatars/6.jpg'} status="warning" />
</div> </div>
<div> <div>
<small className="text-muted">Jane Dovve</small> <small className="text-medium-emphasis">Jane Dovve</small>
<small className="text-muted float-end mt-1">5 minutes ago</small> <small className="text-medium-emphasis float-end mt-1">5 minutes ago</small>
</div> </div>
<div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div> <div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
<div className="small text-muted text-truncate"> <div className="small text-medium-emphasis text-truncate">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt... incididunt...
</div> </div>
@ -62,14 +62,14 @@ const AppHeaderDropdownMssg = () => {
<CDropdownItem href="#"> <CDropdownItem href="#">
<div className="message"> <div className="message">
<div className="pt-3 me-3 float-start"> <div className="pt-3 me-3 float-start">
<CAvatar image={'avatars/5.jpg'} status="danger" /> <CAvatar src={'avatars/5.jpg'} status="danger" />
</div> </div>
<div> <div>
<small className="text-muted">Janet Doe</small> <small className="text-medium-emphasis">Janet Doe</small>
<small className="text-muted float-end mt-1">1:52 PM</small> <small className="text-medium-emphasis float-end mt-1">1:52 PM</small>
</div> </div>
<div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div> <div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
<div className="small text-muted text-truncate"> <div className="small text-medium-emphasis text-truncate">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt... incididunt...
</div> </div>
@ -79,14 +79,14 @@ const AppHeaderDropdownMssg = () => {
<CDropdownItem href="#"> <CDropdownItem href="#">
<div className="message"> <div className="message">
<div className="pt-3 me-3 float-start"> <div className="pt-3 me-3 float-start">
<CAvatar image={'avatars/4.jpg'} status="info" /> <CAvatar src={'avatars/4.jpg'} status="info" />
</div> </div>
<div> <div>
<small className="text-muted">Joe Doe</small> <small className="text-medium-emphasis">Joe Doe</small>
<small className="text-muted float-end mt-1">4:03 AM</small> <small className="text-medium-emphasis float-end mt-1">4:03 AM</small>
</div> </div>
<div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div> <div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
<div className="small text-muted text-truncate"> <div className="small text-medium-emphasis text-truncate">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt... incididunt...
</div> </div>

6
src/components/header/AppHeaderDropdownNotif.js
View File

@ -48,7 +48,7 @@ const AppHeaderDropdownNotif = () => {
</small> </small>
</div> </div>
<CProgress size="xs" color="info" value={25} /> <CProgress size="xs" color="info" value={25} />
<small className="text-muted">348 Processes. 1/4 Cores.</small> <small className="text-medium-emphasis">348 Processes. 1/4 Cores.</small>
</CDropdownItem> </CDropdownItem>
<CDropdownItem className="d-block"> <CDropdownItem className="d-block">
<div className="text-uppercase mb-1"> <div className="text-uppercase mb-1">
@ -57,7 +57,7 @@ const AppHeaderDropdownNotif = () => {
</small> </small>
</div> </div>
<CProgress size="xs" color="warning" value={70} /> <CProgress size="xs" color="warning" value={70} />
<small className="text-muted">11444GB/16384MB</small> <small className="text-medium-emphasis">11444GB/16384MB</small>
</CDropdownItem> </CDropdownItem>
<CDropdownItem className="d-block"> <CDropdownItem className="d-block">
<div className="text-uppercase mb-1"> <div className="text-uppercase mb-1">
@ -66,7 +66,7 @@ const AppHeaderDropdownNotif = () => {
</small> </small>
</div> </div>
<CProgress size="xs" color="danger" value={90} /> <CProgress size="xs" color="danger" value={90} />
<small className="text-muted">243GB/256GB</small> <small className="text-medium-emphasis">243GB/256GB</small>
</CDropdownItem> </CDropdownItem>
</CDropdownMenu> </CDropdownMenu>
</CDropdown> </CDropdown>

12
src/containers/_nav.js
View File

@ -139,14 +139,14 @@ const _nav = [
_component: 'CNavItem', _component: 'CNavItem',
as: NavLink, as: NavLink,
anchor: 'Dropdowns', anchor: 'Dropdowns',
to: '/buttons/button-dropdowns', to: '/buttons/dropdowns',
}, },
], ],
}, },
{ {
_component: 'CNavGroup', _component: 'CNavGroup',
anchor: 'Forms', anchor: 'Forms',
icon: <CIcon name="cil-note" customClasses="nav-icon" />, icon: <CIcon name="cil-notes" customClasses="nav-icon" />,
items: [ items: [
{ {
_component: 'CNavItem', _component: 'CNavItem',
@ -288,25 +288,25 @@ const _nav = [
_component: 'CNavItem', _component: 'CNavItem',
as: NavLink, as: NavLink,
anchor: 'Login', anchor: 'Login',
to: '/pages/login', to: '/login',
}, },
{ {
_component: 'CNavItem', _component: 'CNavItem',
as: NavLink, as: NavLink,
anchor: 'Register', anchor: 'Register',
to: '/pages/register', to: '/register',
}, },
{ {
_component: 'CNavItem', _component: 'CNavItem',
as: NavLink, as: NavLink,
anchor: 'Error 404', anchor: 'Error 404',
to: '/pages/404', to: '/404',
}, },
{ {
_component: 'CNavItem', _component: 'CNavItem',
as: NavLink, as: NavLink,
anchor: 'Error 500', anchor: 'Error 500',
to: '/pages/500', to: '/500',
}, },
], ],
}, },

8
src/routes.js
View File

@ -41,6 +41,8 @@ const Toasts = React.lazy(() => import('./views/examples/notifications/toasts/To
const Login = React.lazy(() => import('./views/examples/pages/login/Login')) const Login = React.lazy(() => import('./views/examples/pages/login/Login'))
const Register = React.lazy(() => import('./views/examples/pages/register/Register')) const Register = React.lazy(() => import('./views/examples/pages/register/Register'))
const Page404 = React.lazy(() => import('./views/examples/pages/page404/Page404'))
const Page500 = React.lazy(() => import('./views/examples/pages/page500/Page500'))
const Widgets = React.lazy(() => import('./views/examples/widgets/Widgets')) const Widgets = React.lazy(() => import('./views/examples/widgets/Widgets'))
@ -88,8 +90,10 @@ const routes = [
{ path: '/notifications/badges', name: 'Badges', component: Badges }, { path: '/notifications/badges', name: 'Badges', component: Badges },
{ path: '/notifications/modals', name: 'Modals', component: Modals }, { path: '/notifications/modals', name: 'Modals', component: Modals },
{ path: '/notifications/toasts', name: 'Toasts', component: Toasts }, { path: '/notifications/toasts', name: 'Toasts', component: Toasts },
{ path: '/pages/login', name: 'Login', component: Login }, // { path: '/login', name: 'Login', component: Login },
{ path: '/pages/register', name: 'Register', component: Register }, // { path: '/register', name: 'Register', component: Register },
// { path: '/404', name: '404', component: Page404 },
// { path: '/500', name: '500', component: Page500 },
{ path: '/widgets', name: 'Widgets', component: Widgets }, { path: '/widgets', name: 'Widgets', component: Widgets },
] ]

321
src/views/dashboard/Dashboard.js
View File

@ -4,7 +4,6 @@ import {
CAvatar, CAvatar,
CButton, CButton,
CButtonGroup, CButtonGroup,
CCallout,
CCard, CCard,
CCardBody, CCardBody,
CCardFooter, CCardFooter,
@ -12,6 +11,12 @@ import {
CCol, CCol,
CProgress, CProgress,
CRow, CRow,
CTable,
CTableBody,
CTableDataCell,
CTableHead,
CTableHeaderCell,
CTableRow,
} from '@coreui/react' } from '@coreui/react'
import { CChart } from '@coreui/react-chartjs' import { CChart } from '@coreui/react-chartjs'
import { getStyle, hexToRgba } from '@coreui/utils' import { getStyle, hexToRgba } from '@coreui/utils'
@ -37,7 +42,7 @@ const Dashboard = () => {
<h4 id="traffic" className="card-title mb-0"> <h4 id="traffic" className="card-title mb-0">
Traffic Traffic
</h4> </h4>
<div className="small text-muted">January - July 2021</div> <div className="small text-medium-emphasis">January - July 2021</div>
</CCol> </CCol>
<CCol sm="7" className="d-none d-md-block"> <CCol sm="7" className="d-none d-md-block">
<CButton color="primary" className="float-end"> <CButton color="primary" className="float-end">
@ -146,27 +151,27 @@ const Dashboard = () => {
<CCardFooter> <CCardFooter>
<CRow className="text-center"> <CRow className="text-center">
<CCol md sm="12" className="mb-sm-2 mb-0"> <CCol md sm="12" className="mb-sm-2 mb-0">
<div className="text-muted">Visits</div> <div className="text-medium-emphasis">Visits</div>
<strong>29.703 Users (40%)</strong> <strong>29.703 Users (40%)</strong>
<CProgress className="progress-xs mt-2" precision={1} color="success" value={40} /> <CProgress className="progress-xs mt-2" precision={1} color="success" value={40} />
</CCol> </CCol>
<CCol md sm="12" className="mb-sm-2 mb-0 d-md-down-none"> <CCol md sm="12" className="mb-sm-2 mb-0">
<div className="text-muted">Unique</div> <div className="text-medium-emphasis">Unique</div>
<strong>24.093 Users (20%)</strong> <strong>24.093 Users (20%)</strong>
<CProgress className="progress-xs mt-2" precision={1} color="info" value={40} /> <CProgress className="progress-xs mt-2" precision={1} color="info" value={40} />
</CCol> </CCol>
<CCol md sm="12" className="mb-sm-2 mb-0"> <CCol md sm="12" className="mb-sm-2 mb-0">
<div className="text-muted">Pageviews</div> <div className="text-medium-emphasis">Pageviews</div>
<strong>78.706 Views (60%)</strong> <strong>78.706 Views (60%)</strong>
<CProgress className="progress-xs mt-2" precision={1} color="warning" value={40} /> <CProgress className="progress-xs mt-2" precision={1} color="warning" value={40} />
</CCol> </CCol>
<CCol md sm="12" className="mb-sm-2 mb-0"> <CCol md sm="12" className="mb-sm-2 mb-0">
<div className="text-muted">New Users</div> <div className="text-medium-emphasis">New Users</div>
<strong>22.123 Users (80%)</strong> <strong>22.123 Users (80%)</strong>
<CProgress className="progress-xs mt-2" precision={1} color="danger" value={40} /> <CProgress className="progress-xs mt-2" precision={1} color="danger" value={40} />
</CCol> </CCol>
<CCol md sm="12" className="mb-sm-2 mb-0 d-md-down-none"> <CCol md sm="12" className="mb-sm-2 mb-0">
<div className="text-muted">Bounce Rate</div> <div className="text-medium-emphasis">Bounce Rate</div>
<strong>Average Rate (40.15%)</strong> <strong>Average Rate (40.15%)</strong>
<CProgress className="progress-xs mt-2" precision={1} value={40} /> <CProgress className="progress-xs mt-2" precision={1} value={40} />
</CCol> </CCol>
@ -185,13 +190,13 @@ const Dashboard = () => {
<CCol xs="12" md="6" xl="6"> <CCol xs="12" md="6" xl="6">
<CRow> <CRow>
<CCol sm="6"> <CCol sm="6">
<div className="border-start border-start-3 border-start-info py-1 px-3"> <div className="border-start border-start-4 border-start-info py-1 px-3">
<div className="text-medium-emphasis small">New Clients</div> <div className="text-medium-emphasis small">New Clients</div>
<div className="fs-3 fw-semibold">9,123</div> <div className="fs-3 fw-semibold">9,123</div>
</div> </div>
</CCol> </CCol>
<CCol sm="6"> <CCol sm="6">
<div className="border-start border-start-3 border-start-danger py-1 px-3 mb-3"> <div className="border-start border-start-4 border-start-danger py-1 px-3 mb-3">
<div className="text-medium-emphasis small">Recurring Clients</div> <div className="text-medium-emphasis small">Recurring Clients</div>
<div className="fs-3 fw-semibold">22,643</div> <div className="fs-3 fw-semibold">22,643</div>
</div> </div>
@ -268,13 +273,13 @@ const Dashboard = () => {
<CCol xs="12" md="6" xl="6"> <CCol xs="12" md="6" xl="6">
<CRow> <CRow>
<CCol sm="6"> <CCol sm="6">
<div className="border-start border-start-3 border-start-warning py-1 px-3 mb-3"> <div className="border-start border-start-4 border-start-warning py-1 px-3 mb-3">
<div className="text-medium-emphasis small">Pageviews</div> <div className="text-medium-emphasis small">Pageviews</div>
<div className="fs-3 fw-semibold">78,623</div> <div className="fs-3 fw-semibold">78,623</div>
</div> </div>
</CCol> </CCol>
<CCol sm="6"> <CCol sm="6">
<div className="border-start border-start-3 border-start-success py-1 px-3 mb-3"> <div className="border-start border-start-4 border-start-success py-1 px-3 mb-3">
<div className="text-medium-emphasis small">Organic</div> <div className="text-medium-emphasis small">Organic</div>
<div className="fs-3 fw-semibold">49,123</div> <div className="fs-3 fw-semibold">49,123</div>
</div> </div>
@ -309,7 +314,7 @@ const Dashboard = () => {
<CIcon className="icon icon-lg me-2" name="cib-google" /> <CIcon className="icon icon-lg me-2" name="cib-google" />
<span>Organic Search</span> <span>Organic Search</span>
<span className="ms-auto font-semibold"> <span className="ms-auto font-semibold">
191,235 <span className="text-muted small">(56%)</span> 191,235 <span className="text-medium-emphasis small">(56%)</span>
</span> </span>
</div> </div>
<div className="progress-group-bars"> <div className="progress-group-bars">
@ -321,7 +326,7 @@ const Dashboard = () => {
<CIcon name="cib-facebook" className="icon icon-lg me-2" /> <CIcon name="cib-facebook" className="icon icon-lg me-2" />
<span>Facebook</span> <span>Facebook</span>
<span className="ms-auto font-semibold"> <span className="ms-auto font-semibold">
51,223 <span className="text-muted small">(15%)</span> 51,223 <span className="text-medium-emphasis small">(15%)</span>
</span> </span>
</div> </div>
<div className="progress-group-bars"> <div className="progress-group-bars">
@ -333,7 +338,7 @@ const Dashboard = () => {
<CIcon name="cib-twitter" className="icon icon-lg me-2" /> <CIcon name="cib-twitter" className="icon icon-lg me-2" />
<span>Twitter</span> <span>Twitter</span>
<span className="ms-auto font-semibold"> <span className="ms-auto font-semibold">
37,564 <span className="text-muted small">(11%)</span> 37,564 <span className="text-medium-emphasis small">(11%)</span>
</span> </span>
</div> </div>
<div className="progress-group-bars"> <div className="progress-group-bars">
@ -345,7 +350,7 @@ const Dashboard = () => {
<CIcon name="cib-linkedin" className="icon icon-lg me-2" /> <CIcon name="cib-linkedin" className="icon icon-lg me-2" />
<span>LinkedIn</span> <span>LinkedIn</span>
<span className="ms-auto font-semibold"> <span className="ms-auto font-semibold">
27,319 <span className="text-muted small">(8%)</span> 27,319 <span className="text-medium-emphasis small">(8%)</span>
</span> </span>
</div> </div>
<div className="progress-group-bars"> <div className="progress-group-bars">
@ -357,214 +362,226 @@ const Dashboard = () => {
<br /> <br />
<table className="table table-hover table-outline mb-0 d-none d-sm-table"> <CTable hover responsive className="mb-0 border">
<thead className="thead-light"> <CTableHead color="light">
<tr> <CTableRow>
<th className="text-center"> <CTableHeaderCell className="text-center">
<CIcon name="cil-people" /> <CIcon name="cil-people" />
</th> </CTableHeaderCell>
<th>User</th> <CTableHeaderCell>User</CTableHeaderCell>
<th className="text-center">Country</th> <CTableHeaderCell className="text-center">Country</CTableHeaderCell>
<th>Usage</th> <CTableHeaderCell>Usage</CTableHeaderCell>
<th className="text-center">Payment Method</th> <CTableHeaderCell className="text-center">Payment Method</CTableHeaderCell>
<th>Activity</th> <CTableHeaderCell>Activity</CTableHeaderCell>
</tr> </CTableRow>
</thead> </CTableHead>
<tbody> <CTableBody>
<tr> <CTableRow>
<td className="text-center"> <CTableDataCell className="text-center">
<CAvatar image="avatars/1.jpg" status="success" /> <CAvatar size="md" src="avatars/1.jpg" status="success" />
</td> </CTableDataCell>
<td> <CTableDataCell>
<div>Yiorgos Avraamu</div> <div>Yiorgos Avraamu</div>
<div className="small text-muted"> <div className="small text-medium-emphasis">
<span>New</span> | Registered: Jan 1, 2015 <span>New</span> | Registered: Jan 1, 2015
</div> </div>
</td> </CTableDataCell>
<td className="text-center"> <CTableDataCell className="text-center">
<CIcon height={25} name="cif-us" title="us" id="us" /> <CIcon size="xl" name="cif-us" title="us" id="us" />
</td> </CTableDataCell>
<td> <CTableDataCell>
<div className="clearfix"> <div className="clearfix">
<div className="float-start"> <div className="float-start">
<strong>50%</strong> <strong>50%</strong>
</div> </div>
<div className="float-end"> <div className="float-end">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small> <small className="text-medium-emphasis">
Jun 11, 2015 - Jul 10, 2015
</small>
</div> </div>
</div> </div>
<CProgress className="progress-xs" color="success" value="50" /> <CProgress className="progress-xs" color="success" value="50" />
</td> </CTableDataCell>
<td className="text-center"> <CTableDataCell className="text-center">
<CIcon height={25} name="cib-cc-mastercard" /> <CIcon size="xl" name="cib-cc-mastercard" />
</td> </CTableDataCell>
<td> <CTableDataCell>
<div className="small text-muted">Last login</div> <div className="small text-medium-emphasis">Last login</div>
<strong>10 sec ago</strong> <strong>10 sec ago</strong>
</td> </CTableDataCell>
</tr> </CTableRow>
<tr> <CTableRow>
<td className="text-center"> <CTableDataCell className="text-center">
<CAvatar image="avatars/2.jpg" status="danger" /> <CAvatar size="md" src="avatars/2.jpg" status="danger" />
</td> </CTableDataCell>
<td> <CTableDataCell>
<div>Avram Tarasios</div> <div>Avram Tarasios</div>
<div className="small text-muted"> <div className="small text-medium-emphasis">
<span>Recurring</span> | Registered: Jan 1, 2015 <span>Recurring</span> | Registered: Jan 1, 2015
</div> </div>
</td> </CTableDataCell>
<td className="text-center"> <CTableDataCell className="text-center">
<CIcon height={25} name="cif-br" title="br" id="br" /> <CIcon size="xl" name="cif-br" title="br" id="br" />
</td> </CTableDataCell>
<td> <CTableDataCell>
<div className="clearfix"> <div className="clearfix">
<div className="float-start"> <div className="float-start">
<strong>10%</strong> <strong>10%</strong>
</div> </div>
<div className="float-end"> <div className="float-end">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small> <small className="text-medium-emphasis">
Jun 11, 2015 - Jul 10, 2015
</small>
</div> </div>
</div> </div>
<CProgress className="progress-xs" color="info" value="10" /> <CProgress className="progress-xs" color="info" value="10" />
</td> </CTableDataCell>
<td className="text-center"> <CTableDataCell className="text-center">
<CIcon height={25} name="cib-cc-visa" /> <CIcon size="xl" name="cib-cc-visa" />
</td> </CTableDataCell>
<td> <CTableDataCell>
<div className="small text-muted">Last login</div> <div className="small text-medium-emphasis">Last login</div>
<strong>5 minutes ago</strong> <strong>5 minutes ago</strong>
</td> </CTableDataCell>
</tr> </CTableRow>
<tr> <CTableRow>
<td className="text-center"> <CTableDataCell className="text-center">
<CAvatar image="avatars/3.jpg" status="warning" /> <CAvatar size="md" src="avatars/3.jpg" status="warning" />
</td> </CTableDataCell>
<td> <CTableDataCell>
<div>Quintin Ed</div> <div>Quintin Ed</div>
<div className="small text-muted"> <div className="small text-medium-emphasis">
<span>New</span> | Registered: Jan 1, 2015 <span>New</span> | Registered: Jan 1, 2015
</div> </div>
</td> </CTableDataCell>
<td className="text-center"> <CTableDataCell className="text-center">
<CIcon height={25} name="cif-in" title="in" id="in" /> <CIcon size="xl" name="cif-in" title="in" id="in" />
</td> </CTableDataCell>
<td> <CTableDataCell>
<div className="clearfix"> <div className="clearfix">
<div className="float-start"> <div className="float-start">
<strong>74%</strong> <strong>74%</strong>
</div> </div>
<div className="float-end"> <div className="float-end">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small> <small className="text-medium-emphasis">
Jun 11, 2015 - Jul 10, 2015
</small>
</div> </div>
</div> </div>
<CProgress className="progress-xs" color="warning" value="74" /> <CProgress className="progress-xs" color="warning" value="74" />
</td> </CTableDataCell>
<td className="text-center"> <CTableDataCell className="text-center">
<CIcon height={25} name="cib-stripe" /> <CIcon size="xl" name="cib-stripe" />
</td> </CTableDataCell>
<td> <CTableDataCell>
<div className="small text-muted">Last login</div> <div className="small text-medium-emphasis">Last login</div>
<strong>1 hour ago</strong> <strong>1 hour ago</strong>
</td> </CTableDataCell>
</tr> </CTableRow>
<tr> <CTableRow>
<td className="text-center"> <CTableDataCell className="text-center">
<CAvatar image="avatars/4.jpg" status="secondary" /> <CAvatar size="md" src="avatars/4.jpg" status="secondary" />
</td> </CTableDataCell>
<td> <CTableDataCell>
<div>Enéas Kwadwo</div> <div>Enéas Kwadwo</div>
<div className="small text-muted"> <div className="small text-medium-emphasis">
<span>New</span> | Registered: Jan 1, 2015 <span>New</span> | Registered: Jan 1, 2015
</div> </div>
</td> </CTableDataCell>
<td className="text-center"> <CTableDataCell className="text-center">
<CIcon height={25} name="cif-fr" title="fr" id="fr" /> <CIcon size="xl" name="cif-fr" title="fr" id="fr" />
</td> </CTableDataCell>
<td> <CTableDataCell>
<div className="clearfix"> <div className="clearfix">
<div className="float-start"> <div className="float-start">
<strong>98%</strong> <strong>98%</strong>
</div> </div>
<div className="float-end"> <div className="float-end">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small> <small className="text-medium-emphasis">
Jun 11, 2015 - Jul 10, 2015
</small>
</div> </div>
</div> </div>
<CProgress className="progress-xs" color="danger" value="98" /> <CProgress className="progress-xs" color="danger" value="98" />
</td> </CTableDataCell>
<td className="text-center"> <CTableDataCell className="text-center">
<CIcon height={25} name="cib-paypal" /> <CIcon size="xl" name="cib-paypal" />
</td> </CTableDataCell>
<td> <CTableDataCell>
<div className="small text-muted">Last login</div> <div className="small text-medium-emphasis">Last login</div>
<strong>Last month</strong> <strong>Last month</strong>
</td> </CTableDataCell>
</tr> </CTableRow>
<tr> <CTableRow>
<td className="text-center"> <CTableDataCell className="text-center">
<CAvatar image="avatars/5.jpg" status="success" /> <CAvatar size="md" src="avatars/5.jpg" status="success" />
</td> </CTableDataCell>
<td> <CTableDataCell>
<div>Agapetus Tadeáš</div> <div>Agapetus Tadeáš</div>
<div className="small text-muted"> <div className="small text-medium-emphasis">
<span>New</span> | Registered: Jan 1, 2015 <span>New</span> | Registered: Jan 1, 2015
</div> </div>
</td> </CTableDataCell>
<td className="text-center"> <CTableDataCell className="text-center">
<CIcon height={25} name="cif-es" title="es" id="es" /> <CIcon size="xl" name="cif-es" title="es" id="es" />
</td> </CTableDataCell>
<td> <CTableDataCell>
<div className="clearfix"> <div className="clearfix">
<div className="float-start"> <div className="float-start">
<strong>22%</strong> <strong>22%</strong>
</div> </div>
<div className="float-end"> <div className="float-end">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small> <small className="text-medium-emphasis">
Jun 11, 2015 - Jul 10, 2015
</small>
</div> </div>
</div> </div>
<CProgress className="progress-xs" color="info" value="22" /> <CProgress className="progress-xs" color="info" value="22" />
</td> </CTableDataCell>
<td className="text-center"> <CTableDataCell className="text-center">
<CIcon height={25} name="cib-google-pay" /> <CIcon size="xl" name="cib-google-pay" />
</td> </CTableDataCell>
<td> <CTableDataCell>
<div className="small text-muted">Last login</div> <div className="small text-medium-emphasis">Last login</div>
<strong>Last week</strong> <strong>Last week</strong>
</td> </CTableDataCell>
</tr> </CTableRow>
<tr> <CTableRow>
<td className="text-center"> <CTableDataCell className="text-center">
<CAvatar image="avatars/6.jpg" status="danger" /> <CAvatar size="md" src="avatars/6.jpg" status="danger" />
</td> </CTableDataCell>
<td> <CTableDataCell>
<div>Friderik Dávid</div> <div>Friderik Dávid</div>
<div className="small text-muted"> <div className="small text-medium-emphasis">
<span>New</span> | Registered: Jan 1, 2015 <span>New</span> | Registered: Jan 1, 2015
</div> </div>
</td> </CTableDataCell>
<td className="text-center"> <CTableDataCell className="text-center">
<CIcon height={25} name="cif-pl" title="pl" id="pl" /> <CIcon size="xl" name="cif-pl" title="pl" id="pl" />
</td> </CTableDataCell>
<td> <CTableDataCell>
<div className="clearfix"> <div className="clearfix">
<div className="float-start"> <div className="float-start">
<strong>43%</strong> <strong>43%</strong>
</div> </div>
<div className="float-end"> <div className="float-end">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small> <small className="text-medium-emphasis">
Jun 11, 2015 - Jul 10, 2015
</small>
</div> </div>
</div> </div>
<CProgress className="progress-xs" color="success" value="43" /> <CProgress className="progress-xs" color="success" value="43" />
</td> </CTableDataCell>
<td className="text-center"> <CTableDataCell className="text-center">
<CIcon height={25} name="cib-cc-amex" /> <CIcon size="xl" name="cib-cc-amex" />
</td> </CTableDataCell>
<td> <CTableDataCell>
<div className="small text-muted">Last login</div> <div className="small text-medium-emphasis">Last login</div>
<strong>Yesterday</strong> <strong>Yesterday</strong>
</td> </CTableDataCell>
</tr> </CTableRow>
</tbody> </CTableBody>
</table> </CTable>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>

21
src/views/examples/charts/ChartBarSimple.js
View File

@ -14,16 +14,13 @@ const ChartBarSimple = (props) => {
} = props } = props
const defaultDatasets = { const defaultDatasets = {
datasets: [
{ data: dataPoints,
data: dataPoints, backgroundColor: getColor(backgroundColor),
backgroundColor: getColor(backgroundColor), pointHoverBackgroundColor: getColor(pointHoverBackgroundColor),
pointHoverBackgroundColor: getColor(pointHoverBackgroundColor), label: label,
label: label, barPercentage: 0.5,
barPercentage: 0.5, categoryPercentage: 1,
categoryPercentage: 1,
},
],
} }
const defaultOptions = { const defaultOptions = {
@ -62,8 +59,8 @@ const ChartBarSimple = (props) => {
type="bar" type="bar"
{...attributes} {...attributes}
data={defaultDatasets} data={defaultDatasets}
options={defaultOptions} // options={defaultOptions}
labels={label} // labels={label}
/> />
) )
} }