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

refactor: update to v4

Browse Source
This commit is contained in:
Łukasz Holeczek 2021-04-13 00:38:48 +02:00
parent 2f793d1746
commit d1a87d22f8
17 changed files with 440 additions and 876 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
.eslintrc Normal file
View File

@ -0,0 +1,7 @@
{
"extends": "react-app",
"plugins": ["prettier"],
"rules": {
"prettier/prettier": "error"
}
}

1
.prettierignore Normal file
View File

@ -0,0 +1 @@
dist/

7
.prettierrc.js Normal file
View File

@ -0,0 +1,7 @@
module.exports = {
semi: false,
trailingComma: "all",
singleQuote: true,
printWidth: 100,
tabWidth: 2
};

30
migration.md
View File

@ -11,47 +11,57 @@
- `float-left` to `float-start` - `float-left` to `float-start`
- `float-right` to `float-end` - `float-right` to `float-end`
## Badges ## Components
- variant="pill" --> shape="rounded-pill" - Deprecated component `CEmbed`
- variant="square" --> shape="rounded-0" - Deprecated component `CJumbotron`
## Forms ### Badges
- variant="pill" => shape="rounded-pill"
- variant="square" => shape="rounded-0"
### Forms
- `CInput` => `CFormControl` - `CInput` => `CFormControl`
- `CInputCheckbox` => `CFormCheck`
- `CLabel` => `CFormLabel` - `CLabel` => `CFormLabel`
- `CSelect` => `CFormSelect` - `CSelect` => `CFormSelect`
- `CValidFeedback` => `CFormFeedback valid`
- `CInvalidFeedback` => `CFormFeedback invalid`
- Deprecated component `CFormGroup` - Deprecated component `CFormGroup`
- Deprecated component `CInputGroupAppend` - Deprecated component `CInputGroupAppend`
- Deprecated component `CInputGroupPrepend` - Deprecated component `CInputGroupPrepend`
- Depreacted component `CSwitch`, use `CFormCheck switch` instead of.
- Deprecated `.help-block`
## Header ### Header
- Deprecated pro `withSubheader` - Deprecated pro `withSubheader`
- Deprecated component `CHeaderNavItem`, use `CNavItem` instead of. - Deprecated component `CHeaderNavItem`, use `CNavItem` instead of.
- Deprecated component `CHeaderNavLink`, use `CNavLink` instead of. - Deprecated component `CHeaderNavLink`, use `CNavLink` instead of.
## List Group ### List Group
- Depracated prop `action` Use `component="a"` or `component="b"` instead of `action`. - Depracated prop `action` Use `component="a"` or `component="b"` instead of `action`.
## Modal ### Modal
- Depracated prop `show` Use `visible` instead of. - Depracated prop `show` Use `visible` instead of.
## Popover ### Popover
- Depracated prop `header` Use `title` instead of. - Depracated prop `header` Use `title` instead of.
## Progress Bar ### Progress Bar
- Depracated prop `precision` - Depracated prop `precision`
- Depracated prop `showLabel` - Depracated prop `showLabel`
- Depracated prop `showPercentage` - Depracated prop `showPercentage`
- Depracated prop `showValue` - Depracated prop `showValue`
## Tabs ### Tabs
- Deprecated component `<CTabs>` use `<CNav variant="tabs">` without wrapper component `<CTabs>` - Deprecated component `<CTabs>` use `<CNav variant="tabs">` without wrapper component `<CTabs>`

5
package.json
View File

@ -30,10 +30,10 @@
"@coreui/react": "^3.4.0", "@coreui/react": "^3.4.0",
"@coreui/react-chartjs": "^1.0.1", "@coreui/react-chartjs": "^1.0.1",
"@coreui/utils": "^1.3.1", "@coreui/utils": "^1.3.1",
"@wojtekmaj/enzyme-adapter-react-17": "^0.3.2",
"classnames": "^2.2.6", "classnames": "^2.2.6",
"core-js": "^3.8.1", "core-js": "^3.8.1",
"enzyme": "^3.11.0", "enzyme": "^3.11.0",
"@wojtekmaj/enzyme-adapter-react-17": "^0.3.2",
"node-sass": "^4.14.1", "node-sass": "^4.14.1",
"prop-types": "^15.7.2", "prop-types": "^15.7.2",
"react": "^17.0.1", "react": "^17.0.1",
@ -45,6 +45,9 @@
}, },
"devDependencies": { "devDependencies": {
"auto-changelog": "~2.2.1", "auto-changelog": "~2.2.1",
"eslint-plugin-prettier": "^3.3.1",
"gatsby-plugin-sitemap": "^3.2.0",
"prettier": "2.2.1",
"react-scripts": "^4.0.1" "react-scripts": "^4.0.1"
}, },
"scripts": { "scripts": {

6
public/index.html
View File

@ -1,9 +1,9 @@
<!DOCTYPE html> <!DOCTYPE html>
<!-- <!--
* CoreUI Free - React.js Admin Template * CoreUI - Free React.js Admin Template
* @version v3.2.0 * @version v4.0.0-alpha.0
* @link https://coreui.io/pro/react/ * @link https://coreui.io/pro/react/
* Copyright (c) 2020 creativeLabs Łukasz Holeczek * Copyright (c) 2021 creativeLabs Łukasz Holeczek
* License MIT * License MIT
--> -->
<html lang="en"> <html lang="en">

24
src/components/AppHeader.js
View File

@ -25,21 +25,25 @@ const AppHeader = () => {
const dispatch = useDispatch() const dispatch = useDispatch()
const sidebarShow = useSelector((state) => state.sidebarShow) const sidebarShow = useSelector((state) => state.sidebarShow)
const toggleSidebar = () => { // const toggleSidebar = () => {
const val = [true, 'responsive'].includes(sidebarShow) ? false : 'responsive' // const val = [true, 'responsive'].includes(sidebarShow) ? false : 'responsive'
dispatch({ type: 'set', sidebarShow: val }) // dispatch({ type: 'set', sidebarShow: val })
} // }
const toggleSidebarMobile = () => { // const toggleSidebarMobile = () => {
const val = [false, 'responsive'].includes(sidebarShow) ? true : 'responsive' // const val = [false, 'responsive'].includes(sidebarShow) ? true : 'responsive'
dispatch({ type: 'set', sidebarShow: val }) // dispatch({ type: 'set', sidebarShow: val })
} // }
return ( return (
<CHeader position="sticky" className="mb-4"> <CHeader position="sticky" className="mb-4">
<CContainer fluid> <CContainer fluid>
<CHeaderToggler inHeader className="ms-md-3 d-lg-none" onClick={toggleSidebarMobile} /> <CHeaderToggler
<CHeaderToggler inHeader className="ms-3 d-md-down-none" onClick={toggleSidebar} /> className="ms-md-3 d-lg-none"
onClick={() => dispatch({ type: 'set', sidebarShow: !sidebarShow })}
>
<CIcon name="cil-menu" />
</CHeaderToggler>
<CHeaderBrand className="mx-auto d-lg-none" to="/"> <CHeaderBrand className="mx-auto d-lg-none" to="/">
<CIcon name="logo" height="48" alt="Logo" /> <CIcon name="logo" height="48" alt="Logo" />
</CHeaderBrand> </CHeaderBrand>

9
src/components/AppSidebar.js
View File

@ -17,14 +17,19 @@ import navigation from '../containers/_nav'
const AppSidebar = () => { const AppSidebar = () => {
const dispatch = useDispatch() const dispatch = useDispatch()
const unfoldable = useSelector((state) => state.sidebarUnfoldable) const unfoldable = useSelector((state) => state.sidebarUnfoldable)
// const visible = useSelector(state => state.sidebarUnfoldable) const sidebarShow = useSelector((state) => state.sidebarShow)
return ( return (
<CSidebar <CSidebar
position="fixed" position="fixed"
selfHiding="md" selfHiding="md"
unfoldable={unfoldable} unfoldable={unfoldable}
// show={show} show={sidebarShow}
onShow={() => console.log('show')}
onHide={() => {
console.log('hide')
dispatch({ type: 'set', sidebarShow: false })
}}
// onShowChange={(val) => dispatch({type: 'set', sidebarShow: val })} // onShowChange={(val) => dispatch({type: 'set', sidebarShow: val })}
> >
<CSidebarBrand className="d-md-down-none" to="/"> <CSidebarBrand className="d-md-down-none" to="/">

6
src/containers/_nav.js
View File

@ -147,12 +147,6 @@ const _nav = [
anchor: 'Buttons', anchor: 'Buttons',
to: '/buttons/buttons', to: '/buttons/buttons',
}, },
{
_component: 'CNavItem',
as: NavLink,
anchor: 'Brand buttons',
to: '/buttons/brand-buttons',
},
{ {
_component: 'CNavItem', _component: 'CNavItem',
as: NavLink, as: NavLink,

2
src/routes.js
View File

@ -19,7 +19,6 @@ const ProgressBar = React.lazy(() => import('./views/base/progress-bar/ProgressB
const Tabs = React.lazy(() => import('./views/base/tabs/Tabs')) const Tabs = React.lazy(() => import('./views/base/tabs/Tabs'))
const Tooltips = React.lazy(() => import('./views/base/tooltips/Tooltips')) const Tooltips = React.lazy(() => import('./views/base/tooltips/Tooltips'))
const BrandButtons = React.lazy(() => import('./views/buttons/brand-buttons/BrandButtons'))
const ButtonDropdowns = React.lazy(() => import('./views/buttons/button-dropdowns/ButtonDropdowns')) const ButtonDropdowns = React.lazy(() => import('./views/buttons/button-dropdowns/ButtonDropdowns'))
const ButtonGroups = React.lazy(() => import('./views/buttons/button-groups/ButtonGroups')) const ButtonGroups = React.lazy(() => import('./views/buttons/button-groups/ButtonGroups'))
const Buttons = React.lazy(() => import('./views/buttons/buttons/Buttons')) const Buttons = React.lazy(() => import('./views/buttons/buttons/Buttons'))
@ -64,7 +63,6 @@ const routes = [
{ path: '/buttons/buttons', name: 'Buttons', component: Buttons }, { path: '/buttons/buttons', name: 'Buttons', component: Buttons },
{ path: '/buttons/button-dropdowns', name: 'Dropdowns', component: ButtonDropdowns }, { path: '/buttons/button-dropdowns', name: 'Dropdowns', component: ButtonDropdowns },
{ path: '/buttons/button-groups', name: 'Button Groups', component: ButtonGroups }, { path: '/buttons/button-groups', name: 'Button Groups', component: ButtonGroups },
{ path: '/buttons/brand-buttons', name: 'Brand Buttons', component: BrandButtons },
{ path: '/charts', name: 'Charts', component: Charts }, { path: '/charts', name: 'Charts', component: Charts },
{ path: '/icons', exact: true, name: 'Icons', component: CoreUIIcons }, { path: '/icons', exact: true, name: 'Icons', component: CoreUIIcons },
{ path: '/icons/coreui-icons', name: 'CoreUI Icons', component: CoreUIIcons }, { path: '/icons/coreui-icons', name: 'CoreUI Icons', component: CoreUIIcons },

2
src/store.js
View File

@ -1,7 +1,7 @@
import { createStore } from 'redux' import { createStore } from 'redux'
const initialState = { const initialState = {
sidebarShow: 'responsive', sidebarShow: false,
} }
const changeState = (state = initialState, { type, ...rest }) => { const changeState = (state = initialState, { type, ...rest }) => {

238
src/views/base/collapses/Collapses.js
View File

@ -13,37 +13,9 @@ import {
import { DocsLink } from 'src/reusable' import { DocsLink } from 'src/reusable'
const Collapses = () => { const Collapses = () => {
const [collapse, setCollapse] = useState(false) const [visible, setVisible] = useState(false)
const [collapseMulti, setCollapseMulti] = useState([false, false]) const [visibleA, setVisibleA] = useState(false)
const [accordion, setAccordion] = useState(1) const [visibleB, setVisibleB] = useState(false)
const [fade, setFade] = useState(true)
const toggle = (e) => {
setCollapse(!collapse)
e.preventDefault()
}
const toggleMulti = (type) => {
let newCollapse = collapseMulti.slice()
switch (type) {
case 'left':
newCollapse[0] = !collapseMulti[0]
break
case 'right':
newCollapse[1] = !collapseMulti[1]
break
case 'both':
newCollapse[0] = !collapseMulti[0]
newCollapse[1] = !collapseMulti[1]
break
default:
}
setCollapseMulti(newCollapse)
}
const toggleFade = () => {
setFade(!fade)
}
return ( return (
<CRow> <CRow>
@ -53,85 +25,64 @@ const Collapses = () => {
Collapse Collapse
<DocsLink name="CCollapse" /> <DocsLink name="CCollapse" />
</CCardHeader> </CCardHeader>
<CCollapse show={collapse}> <CCardBody>
<CCardBody> <CButton
<p> href="#"
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry onClick={(e) => {
richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson e.preventDefault()
cred nesciunt sapiente ea proident. setVisible(!visible)
</p> }}
<p> >
Donec molestie odio id nisi malesuada, mattis tincidunt velit egestas. Sed non Link
pulvinar risus. Aenean elementum eleifend nunc, pellentesque dapibus arcu hendrerit
fringilla. Aliquam in nibh massa. Cras ultricies lorem non enim volutpat, a eleifend
urna placerat. Fusce id luctus urna. In sed leo tellus. Mauris tristique leo a nisl
feugiat, eget vehicula leo venenatis. Quisque magna metus, luctus quis sollicitudin
vel, vehicula nec ipsum. Donec rutrum commodo lacus ut condimentum. Integer vel
turpis purus. Etiam vehicula, nulla non fringilla blandit, massa purus faucibus
tellus, a luctus enim orci non augue. Aenean ullamcorper nisl urna, non feugiat
tortor volutpat in. Vivamus lobortis massa dolor, eget faucibus ipsum varius eget.
Pellentesque imperdiet, turpis sed sagittis lobortis, leo elit laoreet arcu,
vehicula sagittis elit leo id nisi.
</p>
</CCardBody>
</CCollapse>
<CCardFooter>
<CButton color="primary" onClick={toggle} className={'mb-1'}>
Toggling button
</CButton> </CButton>
</CCardFooter> <CButton onClick={() => setVisible(!visible)}>Button</CButton>
<CCollapse visible={visible}>
<CCard className="mt-3">
<CCardBody>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
cred nesciunt sapiente ea proident.
</CCardBody>
</CCard>
</CCollapse>
</CCardBody>
</CCard> </CCard>
</CCol>
<CCol xl="6">
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Collapse Collapse
<small> multi target</small> <small> multi target</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p> <CButton onClick={() => setVisibleA(!visibleA)}>Toggle first element</CButton>
<CButton <CButton onClick={() => setVisibleB(!visibleB)}>Toggle second element</CButton>
color="primary" <CButton
onClick={() => { onClick={() => {
toggleMulti('left') setVisibleA(!visibleA)
}} setVisibleB(!visibleB)
> }}
Left >
</CButton>{' '} Toggle both elements
<CButton </CButton>
color="primary"
onClick={() => {
toggleMulti('right')
}}
>
Right
</CButton>{' '}
<CButton
color="primary"
onClick={() => {
toggleMulti('both')
}}
>
Both
</CButton>{' '}
</p>
<CRow> <CRow>
<CCol xs> <CCol xs="6">
<CCollapse show={collapseMulti[0]}> <CCollapse visible={visibleA}>
<CCard className="mb-4"> <CCard className="mt-3">
<CCardBody> <CCardBody>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
richardson ad squid.Nihil anim keffiyeh helvetica, craft beer labore wes richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes
anderson cred nesciunt sapiente ea proident. anderson cred nesciunt sapiente ea proident.
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCollapse> </CCollapse>
</CCol> </CCol>
<CCol className="col-sm-12 col-md-6"> <CCol xs="6">
<CCollapse show={collapseMulti[1]}> <CCollapse visible={visibleB}>
<CCard className="mb-4"> <CCard className="mt-3">
<CCardBody> <CCardBody>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
richardson ad squid.Nihil anim keffiyeh helvetica, craft beer labore wes richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes
anderson cred nesciunt sapiente ea proident. anderson cred nesciunt sapiente ea proident.
</CCardBody> </CCardBody>
</CCard> </CCard>
@ -140,109 +91,6 @@ const Collapses = () => {
</CRow> </CRow>
</CCardBody> </CCardBody>
</CCard> </CCard>
<hr />
<CCard className="mb-4">
<CCardHeader>
Fade
<DocsLink name="CFade" />
</CCardHeader>
<CCardBody>
<CFade timeout={300} in={fade} tag="h5" className="mt-3">
This content will fade in and out as the button is pressed...
</CFade>
</CCardBody>
<CCardFooter>
<CButton color="primary" onClick={toggleFade}>
Toggle Fade
</CButton>
</CCardFooter>
</CCard>
</CCol>
<CCol xl="6">
<CCard className="mb-4">
<CCardHeader>
Collapse
<small> accordion</small>
</CCardHeader>
<CCardBody>
<div id="accordion">
<CCard className="mb-0">
<CCardHeader id="headingOne">
<CButton
block
color="link"
className="text-left m-0 p-0"
onClick={() => setAccordion(accordion === 0 ? null : 0)}
>
<h5 className="m-0 p-0">Collapsible Group Item #1</h5>
</CButton>
</CCardHeader>
<CCollapse show={accordion === 0}>
<CCardBody>
1. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
sunt aliqua put a bird on it squid single-origin coffee nulla assumenda
shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
you probably haven''t heard of them accusamus labore sustainable VHS.
</CCardBody>
</CCollapse>
</CCard>
<CCard className="mb-0">
<CCardHeader id="headingTwo">
<CButton
block
color="link"
className="text-left m-0 p-0"
onClick={() => setAccordion(accordion === 1 ? null : 1)}
>
<h5 className="m-0 p-0">Collapsible Group Item #2</h5>
</CButton>
</CCardHeader>
<CCollapse show={accordion === 1}>
<CCardBody>
2. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
sunt aliqua put a bird on it squid single-origin coffee nulla assumenda
shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
you probably haven''t heard of them accusamus labore sustainable VHS.
</CCardBody>
</CCollapse>
</CCard>
<CCard className="mb-0">
<CCardHeader id="headingThree">
<CButton
block
color="link"
className="text-left m-0 p-0"
onClick={() => setAccordion(accordion === 2 ? null : 2)}
>
<h5 className="m-0 p-0">Collapsible Group Item #3</h5>
</CButton>
</CCardHeader>
<CCollapse show={accordion === 2}>
<CCardBody>
3. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
sunt aliqua put a bird on it squid single-origin coffee nulla assumenda
shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
you probably havent heard of them accusamus labore sustainable VHS.
</CCardBody>
</CCollapse>
</CCard>
</div>
</CCardBody>
</CCard>
</CCol> </CCol>
</CRow> </CRow>
) )

134
src/views/base/paginations/Pagnations.js
View File

@ -13,7 +13,6 @@ const Paginations = () => {
<DocsLink name="CPagination" /> <DocsLink name="CPagination" />
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<h6>Default</h6>
<CPagination> <CPagination>
<CPaginationItem>Previous</CPaginationItem> <CPaginationItem>Previous</CPaginationItem>
<CPaginationItem>1</CPaginationItem> <CPaginationItem>1</CPaginationItem>
@ -21,61 +20,98 @@ const Paginations = () => {
<CPaginationItem>3</CPaginationItem> <CPaginationItem>3</CPaginationItem>
<CPaginationItem>Next</CPaginationItem> <CPaginationItem>Next</CPaginationItem>
</CPagination> </CPagination>
<br></br>
<h6>Small</h6>
<CPagination
size="sm"
activePage={currentPage}
pages={10}
onActivePageChange={setCurrentPage}
/>
<br></br>
<div className="d-md-down-none">
<h6>Large</h6>
<CPagination
size="lg"
activePage={currentPage}
pages={10}
onActivePageChange={setCurrentPage}
/>
<br></br>
</div>
<div>currentPage: {currentPage}</div>
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
<strong> Pagination </strong> Pagination
<small>with icons</small>
</CCardHeader>
<CCardBody>
<CPagination>
<CPaginationItem aria-label="previous">
<span aria-hidden="true">&laquo;</span>
</CPaginationItem>
<CPaginationItem>1</CPaginationItem>
<CPaginationItem>2</CPaginationItem>
<CPaginationItem>3</CPaginationItem>
<CPaginationItem aria-label="next">
<span aria-hidden="true">&raquo;</span>
</CPaginationItem>
</CPagination>
</CCardBody>
</CCard>
<CCard className="mb-4">
<CCardHeader>
Pagination
<small>with icons</small>
</CCardHeader>
<CCardBody>
<CPagination ariaLabel="Page navigation example">
<CPaginationItem ariaLabel="Previous" disabled>
<span aria-hidden="true">&laquo;</span>
</CPaginationItem>
<CPaginationItem active>1</CPaginationItem>
<CPaginationItem>2</CPaginationItem>
<CPaginationItem>3</CPaginationItem>
<CPaginationItem ariaLabel="Next">
<span aria-hidden="true">&raquo;</span>
</CPaginationItem>
</CPagination>
</CCardBody>
</CCard>
<CCard className="mb-4">
<CCardHeader>
Pagination
<small>sizing</small>
</CCardHeader>
<CCardBody>
<CPagination size="lg" ariaLabel="Page navigation example">
<CPaginationItem>Previous</CPaginationItem>
<CPaginationItem>1</CPaginationItem>
<CPaginationItem>2</CPaginationItem>
<CPaginationItem>3</CPaginationItem>
<CPaginationItem>Next</CPaginationItem>
</CPagination>
<hr />
<CPagination size="sm" ariaLabel="Page navigation example">
<CPaginationItem>Previous</CPaginationItem>
<CPaginationItem>1</CPaginationItem>
<CPaginationItem>2</CPaginationItem>
<CPaginationItem>3</CPaginationItem>
<CPaginationItem>Next</CPaginationItem>
</CPagination>
</CCardBody>
</CCard>
<CCard className="mb-4">
<CCardHeader>
Pagination
<small>alignment</small> <small>alignment</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<h6>Left alignment (default)</h6> <CPagination className="justify-content-start" ariaLabel="Page navigation example">
<CPagination activePage={currentPage} pages={10} onActivePageChange={setCurrentPage} /> <CPaginationItem disabled>Previous</CPaginationItem>
<br></br> <CPaginationItem>1</CPaginationItem>
<CPaginationItem>2</CPaginationItem>
<h6>Center alignment</h6> <CPaginationItem>3</CPaginationItem>
<CPagination <CPaginationItem>Next</CPaginationItem>
align="center" </CPagination>
addListClass="some-class" <hr />
activePage={currentPage} <CPagination className="justify-content-center" ariaLabel="Page navigation example">
pages={10} <CPaginationItem disabled>Previous</CPaginationItem>
onActivePageChange={setCurrentPage} <CPaginationItem>1</CPaginationItem>
/> <CPaginationItem>2</CPaginationItem>
<br></br> <CPaginationItem>3</CPaginationItem>
<CPaginationItem>Next</CPaginationItem>
<h6>Right (end) alignment</h6> </CPagination>
<CPagination <hr />
align="end" <CPagination className="justify-content-end" ariaLabel="Page navigation example">
activePage={currentPage} <CPaginationItem disabled>Previous</CPaginationItem>
pages={10} <CPaginationItem>1</CPaginationItem>
onActivePageChange={setCurrentPage} <CPaginationItem>2</CPaginationItem>
/> <CPaginationItem>3</CPaginationItem>
<br></br> <CPaginationItem>Next</CPaginationItem>
</CPagination>
<div>currentPage: {currentPage}</div>
</CCardBody> </CCardBody>
</CCard> </CCard>
</> </>

429
src/views/buttons/brand-buttons/BrandButtons.js
View File

@ -1,429 +0,0 @@
import React from 'react'
import { CButton, CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react-ts'
import CIcon from '@coreui/icons-react'
const BrandButtons = () => {
return (
<CRow>
<CCol xs="12">
<CCard className="mb-4">
<CCardHeader>Brand button</CCardHeader>
<CCardBody>
<h6>
Size Small
<small>
{' '}
<code>size="sm"</code>
</small>
</h6>
<p>
<CButton size="sm" className="btn-facebook btn-brand me-1 mb-1">
<CIcon size="sm" name="cib-facebook" />
<span className="ms-2">Facebook</span>
</CButton>
<CButton size="sm" className="btn-twitter btn-brand me-1 mb-1">
<CIcon size="sm" name="cib-twitter" />
<span className="ms-2">Twitter</span>
</CButton>
<CButton size="sm" className="btn-linkedin btn-brand me-1 mb-1">
<CIcon size="sm" name="cib-linkedin" />
<span className="ms-2">LinkedIn</span>
</CButton>
<CButton size="sm" className="btn-flickr btn-brand me-1 mb-1">
<CIcon size="sm" name="cib-flickr" />
<span className="ms-2">Flickr</span>
</CButton>
<CButton size="sm" className="btn-tumblr btn-brand me-1 mb-1">
<CIcon size="sm" name="cib-tumblr" />
<span className="ms-2">Tumblr</span>
</CButton>
<CButton size="sm" className="btn-xing btn-brand me-1 mb-1">
<CIcon size="sm" name="cib-xing" />
<span className="ms-2">Xing</span>
</CButton>
<CButton size="sm" className="btn-github btn-brand me-1 mb-1">
<CIcon size="sm" name="cib-github" />
<span className="ms-2">Github</span>
</CButton>
<CButton size="sm" className="btn-stack-overflow btn-brand me-1 mb-1">
<CIcon size="sm" name="cib-stackoverflow" />
<span className="ms-2">StackOverflow</span>
</CButton>
<CButton size="sm" className="btn-youtube btn-brand me-1 mb-1">
<CIcon size="sm" name="cib-youtube" />
<span className="ms-2">YouTube</span>
</CButton>
<CButton size="sm" className="btn-dribbble btn-brand me-1 mb-1">
<CIcon size="sm" name="cib-dribbble" />
<span className="ms-2">Dribbble</span>
</CButton>
<CButton size="sm" className="btn-instagram btn-brand me-1 mb-1">
<CIcon size="sm" name="cib-instagram" />
<span className="ms-2">Instagram</span>
</CButton>
<CButton size="sm" className="btn-pinterest btn-brand me-1 mb-1">
<CIcon size="sm" name="cib-pinterest" />
<span className="ms-2">Pinterest</span>
</CButton>
<CButton size="sm" className="btn-vk btn-brand me-1 mb-1">
<CIcon size="sm" name="cib-vk" />
<span className="ms-2">VK</span>
</CButton>
<CButton size="sm" className="btn-yahoo btn-brand me-1 mb-1">
<CIcon size="sm" name="cib-yahoo" />
<span className="ms-2">Yahoo</span>
</CButton>
<CButton size="sm" className="btn-behance btn-brand me-1 mb-1">
<CIcon size="sm" name="cib-behance" />
<span className="ms-2">Behance</span>
</CButton>
<CButton size="sm" className="btn-reddit btn-brand me-1 mb-1">
<CIcon size="sm" name="cib-reddit" />
<span className="ms-2">Reddit</span>
</CButton>
<CButton size="sm" className="btn-vimeo btn-brand me-1 mb-1">
<CIcon size="sm" name="cib-vimeo" />
<span className="ms-2">Vimeo</span>
</CButton>
</p>
<h6>Size Normal</h6>
<p>
<CButton className="btn-facebook btn-brand me-1 mb-1">
<CIcon name="cib-facebook" />
<span className="ms-2">Facebook</span>
</CButton>
<CButton className="btn-twitter btn-brand me-1 mb-1">
<CIcon name="cib-twitter" />
<span className="ms-2">Twitter</span>
</CButton>
<CButton className="btn-linkedin btn-brand me-1 mb-1">
<CIcon name="cib-linkedin" />
<span className="ms-2">LinkedIn</span>
</CButton>
<CButton className="btn-flickr btn-brand me-1 mb-1">
<CIcon name="cib-flickr" />
<span className="ms-2">Flickr</span>
</CButton>
<CButton className="btn-tumblr btn-brand me-1 mb-1">
<CIcon name="cib-tumblr" />
<span className="ms-2">Tumblr</span>
</CButton>
<CButton className="btn-xing btn-brand me-1 mb-1">
<CIcon name="cib-xing" />
<span className="ms-2">Xing</span>
</CButton>
<CButton className="btn-github btn-brand me-1 mb-1">
<CIcon name="cib-github" />
<span className="ms-2">Github</span>
</CButton>
<CButton className="btn-stack-overflow btn-brand me-1 mb-1">
<CIcon name="cib-stackoverflow" />
<span className="ms-2">StackOverflow</span>
</CButton>
<CButton className="btn-youtube btn-brand me-1 mb-1">
<CIcon name="cib-youtube" />
<span className="ms-2">YouTube</span>
</CButton>
<CButton className="btn-dribbble btn-brand me-1 mb-1">
<CIcon name="cib-dribbble" />
<span className="ms-2">Dribbble</span>
</CButton>
<CButton className="btn-instagram btn-brand me-1 mb-1">
<CIcon name="cib-instagram" />
<span className="ms-2">Instagram</span>
</CButton>
<CButton className="btn-pinterest btn-brand me-1 mb-1">
<CIcon name="cib-pinterest" />
<span className="ms-2">Pinterest</span>
</CButton>
<CButton className="btn-vk btn-brand me-1 mb-1">
<CIcon name="cib-vk" />
<span className="ms-2">VK</span>
</CButton>
<CButton className="btn-yahoo btn-brand me-1 mb-1">
<CIcon name="cib-yahoo" />
<span className="ms-2">Yahoo</span>
</CButton>
<CButton className="btn-behance btn-brand me-1 mb-1">
<CIcon name="cib-behance" />
<span className="ms-2">Behance</span>
</CButton>
<CButton className="btn-reddit btn-brand me-1 mb-1">
<CIcon name="cib-reddit" />
<span className="ms-2">Reddit</span>
</CButton>
<CButton className="btn-vimeo btn-brand me-1 mb-1">
<CIcon name="cib-vimeo" />
<span className="ms-2">Vimeo</span>
</CButton>
</p>
<h6>
Size Large
<small>
{' '}
<code>size="lg"</code>
</small>
</h6>
<p>
<CButton size="lg" className="btn-facebook btn-brand me-1 mb-1">
<CIcon size="lg" name="cib-facebook" />
<span className="ms-2">Facebook</span>
</CButton>
<CButton size="lg" className="btn-twitter btn-brand me-1 mb-1">
<CIcon size="lg" name="cib-twitter" />
<span className="ms-2">Twitter</span>
</CButton>
<CButton size="lg" className="btn-linkedin btn-brand me-1 mb-1">
<CIcon size="lg" name="cib-linkedin" />
<span className="ms-2">LinkedIn</span>
</CButton>
<CButton size="lg" className="btn-flickr btn-brand me-1 mb-1">
<CIcon size="lg" name="cib-flickr" />
<span className="ms-2">Flickr</span>
</CButton>
<CButton size="lg" className="btn-tumblr btn-brand me-1 mb-1">
<CIcon size="lg" name="cib-tumblr" />
<span className="ms-2">Tumblr</span>
</CButton>
<CButton size="lg" className="btn-xing btn-brand me-1 mb-1">
<CIcon size="lg" name="cib-xing" />
<span className="ms-2">Xing</span>
</CButton>
<CButton size="lg" className="btn-github btn-brand me-1 mb-1">
<CIcon size="lg" name="cib-github" />
<span className="ms-2">Github</span>
</CButton>
<CButton size="lg" className="btn-stack-overflow btn-brand me-1 mb-1">
<CIcon size="lg" name="cib-stackoverflow" />
<span className="ms-2">StackOverflow</span>
</CButton>
<CButton size="lg" className="btn-youtube btn-brand me-1 mb-1">
<CIcon size="lg" name="cib-youtube" />
<span className="ms-2">YouTube</span>
</CButton>
<CButton size="lg" className="btn-dribbble btn-brand me-1 mb-1">
<CIcon size="lg" name="cib-dribbble" />
<span className="ms-2">Dribbble</span>
</CButton>
<CButton size="lg" className="btn-instagram btn-brand me-1 mb-1">
<CIcon size="lg" name="cib-instagram" />
<span className="ms-2">Instagram</span>
</CButton>
<CButton size="lg" className="btn-pinterest btn-brand me-1 mb-1">
<CIcon size="lg" name="cib-pinterest" />
<span className="ms-2">Pinterest</span>
</CButton>
<CButton size="lg" className="btn-vk btn-brand me-1 mb-1">
<CIcon size="lg" name="cib-vk" />
<span className="ms-2">VK</span>
</CButton>
<CButton size="lg" className="btn-yahoo btn-brand me-1 mb-1">
<CIcon size="lg" name="cib-yahoo" />
<span className="ms-2">Yahoo</span>
</CButton>
<CButton size="lg" className="btn-behance btn-brand me-1 mb-1">
<CIcon size="lg" name="cib-behance" />
<span className="ms-2">Behance</span>
</CButton>
<CButton size="lg" className="btn-reddit btn-brand me-1 mb-1">
<CIcon size="lg" name="cib-reddit" />
<span className="ms-2">Reddit</span>
</CButton>
<CButton size="lg" className="btn-vimeo btn-brand me-1 mb-1">
<CIcon size="lg" name="cib-vimeo" />
<span className="ms-2">Vimeo</span>
</CButton>
</p>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCard className="mb-4">
<CCardHeader>
Brand button
<small> only icons</small>
</CCardHeader>
<CCardBody>
<h6>
Size Small
<small>
{' '}
<code>size="sm"</code>
</small>
</h6>
<p>
<CButton size="sm" className="btn-facebook btn-brand me-1 mb-1">
<CIcon size="sm" name="cib-facebook" />
</CButton>
<CButton size="sm" className="btn-twitter btn-brand me-1 mb-1">
<CIcon size="sm" name="cib-twitter" />
</CButton>
<CButton size="sm" className="btn-linkedin btn-brand me-1 mb-1">
<CIcon size="sm" name="cib-linkedin" />
</CButton>
<CButton size="sm" className="btn-flickr btn-brand me-1 mb-1">
<CIcon size="sm" name="cib-flickr" />
</CButton>
<CButton size="sm" className="btn-tumblr btn-brand me-1 mb-1">
<CIcon size="sm" name="cib-tumblr" />
</CButton>
<CButton size="sm" className="btn-xing btn-brand me-1 mb-1">
<CIcon size="sm" name="cib-xing" />
</CButton>
<CButton size="sm" className="btn-github btn-brand me-1 mb-1">
<CIcon size="sm" name="cib-github" />
</CButton>
<CButton size="sm" className="btn-stack-overflow btn-brand me-1 mb-1">
<CIcon size="sm" name="cib-stackoverflow" />
</CButton>
<CButton size="sm" className="btn-youtube btn-brand me-1 mb-1">
<CIcon size="sm" name="cib-youtube" />
</CButton>
<CButton size="sm" className="btn-dribbble btn-brand me-1 mb-1">
<CIcon size="sm" name="cib-dribbble" />
</CButton>
<CButton size="sm" className="btn-instagram btn-brand me-1 mb-1">
<CIcon size="sm" name="cib-instagram" />
</CButton>
<CButton size="sm" className="btn-pinterest btn-brand me-1 mb-1">
<CIcon size="sm" name="cib-pinterest" />
</CButton>
<CButton size="sm" className="btn-vk btn-brand me-1 mb-1">
<CIcon size="sm" name="cib-vk" />
</CButton>
<CButton size="sm" className="btn-yahoo btn-brand me-1 mb-1">
<CIcon size="sm" name="cib-yahoo" />
</CButton>
<CButton size="sm" className="btn-behance btn-brand me-1 mb-1">
<CIcon size="sm" name="cib-behance" />
</CButton>
<CButton size="sm" className="btn-reddit btn-brand me-1 mb-1">
<CIcon size="sm" name="cib-reddit" />
</CButton>
<CButton size="sm" className="btn-vimeo btn-brand me-1 mb-1">
<CIcon size="sm" name="cib-vimeo" />
</CButton>
</p>
<h6>Size Normal</h6>
<p>
<CButton className="btn-facebook btn-brand me-1 mb-1">
<CIcon name="cib-facebook" />
</CButton>
<CButton className="btn-twitter btn-brand me-1 mb-1">
<CIcon name="cib-twitter" />
</CButton>
<CButton className="btn-linkedin btn-brand me-1 mb-1">
<CIcon name="cib-linkedin" />
</CButton>
<CButton className="btn-flickr btn-brand me-1 mb-1">
<CIcon name="cib-flickr" />
</CButton>
<CButton className="btn-tumblr btn-brand me-1 mb-1">
<CIcon name="cib-tumblr" />
</CButton>
<CButton className="btn-xing btn-brand me-1 mb-1">
<CIcon name="cib-xing" />
</CButton>
<CButton className="btn-github btn-brand me-1 mb-1">
<CIcon name="cib-github" />
</CButton>
<CButton className="btn-stack-overflow btn-brand me-1 mb-1">
<CIcon name="cib-stackoverflow" />
</CButton>
<CButton className="btn-youtube btn-brand me-1 mb-1">
<CIcon name="cib-youtube" />
</CButton>
<CButton className="btn-dribbble btn-brand me-1 mb-1">
<CIcon name="cib-dribbble" />
</CButton>
<CButton className="btn-instagram btn-brand me-1 mb-1">
<CIcon name="cib-instagram" />
</CButton>
<CButton className="btn-pinterest btn-brand me-1 mb-1">
<CIcon name="cib-pinterest" />
</CButton>
<CButton className="btn-vk btn-brand me-1 mb-1">
<CIcon name="cib-vk" />
</CButton>
<CButton className="btn-yahoo btn-brand me-1 mb-1">
<CIcon name="cib-yahoo" />
</CButton>
<CButton className="btn-behance btn-brand me-1 mb-1">
<CIcon name="cib-behance" />
</CButton>
<CButton className="btn-reddit btn-brand me-1 mb-1">
<CIcon name="cib-reddit" />
</CButton>
<CButton className="btn-vimeo btn-brand me-1 mb-1">
<CIcon name="cib-vimeo" />
</CButton>
</p>
<h6>
Size Large
<small>
{' '}
<code>size="lg"</code>
</small>
</h6>
<p>
<CButton size="lg" className="btn-facebook btn-brand me-1 mb-1">
<CIcon size="lg" name="cib-facebook" />
</CButton>
<CButton size="lg" className="btn-twitter btn-brand me-1 mb-1">
<CIcon size="lg" name="cib-twitter" />
</CButton>
<CButton size="lg" className="btn-linkedin btn-brand me-1 mb-1">
<CIcon size="lg" name="cib-linkedin" />
</CButton>
<CButton size="lg" className="btn-flickr btn-brand me-1 mb-1">
<CIcon size="lg" name="cib-flickr" />
</CButton>
<CButton size="lg" className="btn-tumblr btn-brand me-1 mb-1">
<CIcon size="lg" name="cib-tumblr" />
</CButton>
<CButton size="lg" className="btn-xing btn-brand me-1 mb-1">
<CIcon size="lg" name="cib-xing" />
</CButton>
<CButton size="lg" className="btn-github btn-brand me-1 mb-1">
<CIcon size="lg" name="cib-github" />
</CButton>
<CButton size="lg" className="btn-stack-overflow btn-brand me-1 mb-1">
<CIcon size="lg" name="cib-stackoverflow" />
</CButton>
<CButton size="lg" className="btn-youtube btn-brand me-1 mb-1">
<CIcon size="lg" name="cib-youtube" />
</CButton>
<CButton size="lg" className="btn-dribbble btn-brand me-1 mb-1">
<CIcon size="lg" name="cib-dribbble" />
</CButton>
<CButton size="lg" className="btn-instagram btn-brand me-1 mb-1">
<CIcon size="lg" name="cib-instagram" />
</CButton>
<CButton size="lg" className="btn-pinterest btn-brand me-1 mb-1">
<CIcon size="lg" name="cib-pinterest" />
</CButton>
<CButton size="lg" className="btn-vk btn-brand me-1 mb-1">
<CIcon size="lg" name="cib-vk" />
</CButton>
<CButton size="lg" className="btn-yahoo btn-brand me-1 mb-1">
<CIcon size="lg" name="cib-yahoo" />
</CButton>
<CButton size="lg" className="btn-behance btn-brand me-1 mb-1">
<CIcon size="lg" name="cib-behance" />
</CButton>
<CButton size="lg" className="btn-reddit btn-brand me-1 mb-1">
<CIcon size="lg" name="cib-reddit" />
</CButton>
<CButton size="lg" className="btn-vimeo btn-brand me-1 mb-1">
<CIcon size="lg" name="cib-vimeo" />
</CButton>
</p>
</CCardBody>
</CCard>
</CCol>
</CRow>
)
}
export default BrandButtons

3
src/views/buttons/index.js
View File

@ -1,6 +1,5 @@
import ButtonDropdowns from './ButtonDropdowns' import ButtonDropdowns from './ButtonDropdowns'
import ButtonGroups from './ButtonGroups' import ButtonGroups from './ButtonGroups'
import Buttons from './Buttons' import Buttons from './Buttons'
import BrandButtons from './BrandButtons'
export { ButtonDropdowns, ButtonGroups, Buttons, BrandButtons } export { ButtonDropdowns, ButtonGroups, Buttons }

355
src/views/charts/Charts.js
View File

@ -1,5 +1,5 @@
import React from 'react' import React from 'react'
import { CCard, CCardBody, CCardGroup, CCardHeader } from '@coreui/react-ts' import { CCard, CCardBody, CCol, CCardHeader, CRow } from '@coreui/react-ts'
import { import {
CChartBar, CChartBar,
CChartLine, CChartLine,
@ -12,171 +12,194 @@ import { DocsLink } from 'src/reusable'
const Charts = () => { const Charts = () => {
return ( return (
<CCardGroup columns className="cols-2"> <CRow>
<CCard className="mb-4"> <CCol xs={6}>
<CCardHeader> <CCard className="mb-4">
Bar Chart <CCardHeader>
<DocsLink href="http://www.chartjs.org" /> Bar Chart
</CCardHeader> <DocsLink href="http://www.chartjs.org" />
<CCardBody> </CCardHeader>
<CChartBar <CCardBody>
datasets={[ <CChartBar
{ datasets={[
label: 'GitHub Commits', {
backgroundColor: '#f87979', label: 'GitHub Commits',
data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11], backgroundColor: '#f87979',
}, data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11],
]} },
labels="months" ]}
options={{ labels="months"
tooltips: { options={{
enabled: true, tooltips: {
}, enabled: true,
}} },
/> }}
</CCardBody> />
</CCard> </CCardBody>
</CCard>
<CCard className="mb-4"> </CCol>
<CCardHeader>Doughnut Chart</CCardHeader> <CCol xs={6}>
<CCardBody> <CCard className="mb-4">
<CChartDoughnut <CCardHeader>Doughnut Chart</CCardHeader>
datasets={[ <CCardBody>
{ <CChartDoughnut
backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'], datasets={[
data: [40, 20, 80, 10], {
}, backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
]} data: [40, 20, 80, 10],
labels={['VueJs', 'EmberJs', 'ReactJs', 'AngularJs']} },
options={{ ]}
tooltips: { labels={['VueJs', 'EmberJs', 'ReactJs', 'AngularJs']}
enabled: true, options={{
}, tooltips: {
}} enabled: true,
/> },
</CCardBody> }}
</CCard> />
</CCardBody>
<CCard className="mb-4"> </CCard>
<CCardHeader>Line Chart</CCardHeader> </CCol>
<CCardBody> <CCol xs={6}>
<CChartLine <CCard className="mb-4">
datasets={[ <CCardHeader>Line Chart</CCardHeader>
{ <CCardBody>
label: 'Data One', <CChartLine
backgroundColor: 'rgb(228,102,81,0.9)', datasets={[
data: [30, 39, 10, 50, 30, 70, 35], {
}, label: 'Data One',
{ backgroundColor: 'rgb(228,102,81,0.9)',
label: 'Data Two', data: [30, 39, 10, 50, 30, 70, 35],
backgroundColor: 'rgb(0,216,255,0.9)', },
data: [39, 80, 40, 35, 40, 20, 45], {
}, label: 'Data Two',
]} backgroundColor: 'rgb(0,216,255,0.9)',
options={{ data: [39, 80, 40, 35, 40, 20, 45],
tooltips: { },
enabled: true, ]}
}, options={{
}} tooltips: {
labels="months" enabled: true,
/> },
</CCardBody> }}
</CCard> labels="months"
/>
<CCard className="mb-4"> </CCardBody>
<CCardHeader>Pie Chart</CCardHeader> </CCard>
<CCardBody> </CCol>
<CChartPie <CCol xs={6}>
datasets={[ <CCard className="mb-4">
{ <CCardHeader>Pie Chart</CCardHeader>
backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'], <CCardBody>
data: [40, 20, 80, 10], <CChartPie
}, datasets={[
]} {
labels={['VueJs', 'EmberJs', 'ReactJs', 'AngularJs']} backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
options={{ data: [40, 20, 80, 10],
tooltips: { },
enabled: true, ]}
}, labels={['VueJs', 'EmberJs', 'ReactJs', 'AngularJs']}
}} options={{
/> tooltips: {
</CCardBody> enabled: true,
</CCard> },
}}
<CCard className="mb-4"> />
<CCardHeader>Polar Area Chart</CCardHeader> </CCardBody>
<CCardBody> </CCard>
<CChartPolarArea </CCol>
datasets={[ <CCol xs={6}>
{ <CCard className="mb-4">
label: 'My First dataset', <CCardHeader>Polar Area Chart</CCardHeader>
backgroundColor: 'rgba(179,181,198,0.2)', <CCardBody>
pointBackgroundColor: 'rgba(179,181,198,1)', <CChartPolarArea
pointBorderColor: '#fff', datasets={[
pointHoverBackgroundColor: 'rgba(179,181,198,1)', {
pointHoverBorderColor: 'rgba(179,181,198,1)', label: 'My First dataset',
data: [65, 59, 90, 81, 56, 55, 40], backgroundColor: 'rgba(179,181,198,0.2)',
}, pointBackgroundColor: 'rgba(179,181,198,1)',
{ pointBorderColor: '#fff',
label: 'My Second dataset', pointHoverBackgroundColor: 'rgba(179,181,198,1)',
backgroundColor: 'rgba(255,99,132,0.2)', pointHoverBorderColor: 'rgba(179,181,198,1)',
pointBackgroundColor: 'rgba(255,99,132,1)', data: [65, 59, 90, 81, 56, 55, 40],
pointBorderColor: '#fff', },
pointHoverBackgroundColor: 'rgba(255,99,132,1)', {
pointHoverBorderColor: 'rgba(255,99,132,1)', label: 'My Second dataset',
data: [28, 48, 40, 19, 96, 27, 100], backgroundColor: 'rgba(255,99,132,0.2)',
}, pointBackgroundColor: 'rgba(255,99,132,1)',
]} pointBorderColor: '#fff',
options={{ pointHoverBackgroundColor: 'rgba(255,99,132,1)',
aspectRatio: 1.5, pointHoverBorderColor: 'rgba(255,99,132,1)',
tooltips: { data: [28, 48, 40, 19, 96, 27, 100],
enabled: true, },
}, ]}
}} options={{
labels={['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running']} aspectRatio: 1.5,
/> tooltips: {
</CCardBody> enabled: true,
</CCard> },
}}
<CCard className="mb-4"> labels={[
<CCardHeader>Radar Chart</CCardHeader> 'Eating',
<CCardBody> 'Drinking',
<CChartRadar 'Sleeping',
datasets={[ 'Designing',
{ 'Coding',
label: '2019', 'Cycling',
backgroundColor: 'rgba(179,181,198,0.2)', 'Running',
borderColor: 'rgba(179,181,198,1)', ]}
pointBackgroundColor: 'rgba(179,181,198,1)', />
pointBorderColor: '#fff', </CCardBody>
pointHoverBackgroundColor: '#fff', </CCard>
pointHoverBorderColor: 'rgba(179,181,198,1)', </CCol>
tooltipLabelColor: 'rgba(179,181,198,1)', <CCol xs={6}>
data: [65, 59, 90, 81, 56, 55, 40], <CCard className="mb-4">
}, <CCardHeader>Radar Chart</CCardHeader>
{ <CCardBody>
label: '2020', <CChartRadar
backgroundColor: 'rgba(255,99,132,0.2)', datasets={[
borderColor: 'rgba(255,99,132,1)', {
pointBackgroundColor: 'rgba(255,99,132,1)', label: '2019',
pointBorderColor: '#fff', backgroundColor: 'rgba(179,181,198,0.2)',
pointHoverBackgroundColor: '#fff', borderColor: 'rgba(179,181,198,1)',
pointHoverBorderColor: 'rgba(255,99,132,1)', pointBackgroundColor: 'rgba(179,181,198,1)',
tooltipLabelColor: 'rgba(255,99,132,1)', pointBorderColor: '#fff',
data: [28, 48, 40, 19, 96, 27, 100], pointHoverBackgroundColor: '#fff',
}, pointHoverBorderColor: 'rgba(179,181,198,1)',
]} tooltipLabelColor: 'rgba(179,181,198,1)',
options={{ data: [65, 59, 90, 81, 56, 55, 40],
aspectRatio: 1.5, },
tooltips: { {
enabled: true, label: '2020',
}, backgroundColor: 'rgba(255,99,132,0.2)',
}} borderColor: 'rgba(255,99,132,1)',
labels={['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running']} pointBackgroundColor: 'rgba(255,99,132,1)',
/> pointBorderColor: '#fff',
</CCardBody> pointHoverBackgroundColor: '#fff',
</CCard> pointHoverBorderColor: 'rgba(255,99,132,1)',
</CCardGroup> tooltipLabelColor: 'rgba(255,99,132,1)',
data: [28, 48, 40, 19, 96, 27, 100],
},
]}
options={{
aspectRatio: 1.5,
tooltips: {
enabled: true,
},
}}
labels={[
'Eating',
'Drinking',
'Sleeping',
'Designing',
'Coding',
'Cycling',
'Running',
]}
/>
</CCardBody>
</CCard>
</CCol>
</CRow>
) )
} }

58
yarn.lock
View File

@ -4742,6 +4742,13 @@ eslint-plugin-jsx-a11y@^6.3.1:
jsx-ast-utils "^3.1.0" jsx-ast-utils "^3.1.0"
language-tags "^1.0.5" language-tags "^1.0.5"
eslint-plugin-prettier@^3.3.1:
version "3.3.1"
resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-3.3.1.tgz#7079cfa2497078905011e6f82e8dd8453d1371b7"
integrity sha512-Rq3jkcFY8RYeQLgk2cCwuc0P7SEFwDravPhsJZOQ5N4YI4DSg50NyqJ/9gdZHzQlHf8MvafSesbNJCcP/FF6pQ==
dependencies:
prettier-linter-helpers "^1.0.0"
eslint-plugin-react-hooks@^4.2.0: eslint-plugin-react-hooks@^4.2.0:
version "4.2.0" version "4.2.0"
resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.2.0.tgz" resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.2.0.tgz"
@ -5096,6 +5103,11 @@ fast-deep-equal@^3.1.1:
resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz" resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz"
integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q== integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
fast-diff@^1.1.2:
version "1.2.0"
resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==
fast-glob@^3.1.1: fast-glob@^3.1.1:
version "3.2.5" version "3.2.5"
resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.5.tgz" resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.5.tgz"
@ -5440,6 +5452,17 @@ functions-have-names@^1.2.1:
resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.2.tgz" resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.2.tgz"
integrity sha512-bLgc3asbWdwPbx2mNk2S49kmJCuQeu0nfmaOgbs8WIyzzkw3r4htszdIi9Q9EMezDPTYuJx2wvjZ/EwgAthpnA== integrity sha512-bLgc3asbWdwPbx2mNk2S49kmJCuQeu0nfmaOgbs8WIyzzkw3r4htszdIi9Q9EMezDPTYuJx2wvjZ/EwgAthpnA==
gatsby-plugin-sitemap@^3.2.0:
version "3.2.0"
resolved "https://registry.yarnpkg.com/gatsby-plugin-sitemap/-/gatsby-plugin-sitemap-3.2.0.tgz#7a17a95ca5b7bc0fe1c9b8661cdbf326e7cd4b17"
integrity sha512-UIeOClN5o7eoARmLQY8+ad0hE85cJTCDFvnNMmbJ1SzuAyldgHep2GVDw+YbTnPCkP7rXIZ0aYPFhugPOa/Zqw==
dependencies:
"@babel/runtime" "^7.12.5"
common-tags "^1.8.0"
minimatch "^3.0.4"
pify "^3.0.0"
sitemap "^1.13.0"
gauge@~2.7.3: gauge@~2.7.3:
version "2.7.4" version "2.7.4"
resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.7.4.tgz" resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.7.4.tgz"
@ -8604,6 +8627,11 @@ pify@^2.0.0:
resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz" resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz"
integrity sha1-7RQaasBDqEnqWISY59yosVMw6Qw= integrity sha1-7RQaasBDqEnqWISY59yosVMw6Qw=
pify@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
integrity sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=
pify@^4.0.1: pify@^4.0.1:
version "4.0.1" version "4.0.1"
resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz" resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz"
@ -9363,6 +9391,18 @@ prepend-http@^1.0.0:
resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz" resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz"
integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw= integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=
prettier-linter-helpers@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz#d23d41fe1375646de2d0104d3454a3008802cf7b"
integrity sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==
dependencies:
fast-diff "^1.1.2"
prettier@2.2.1:
version "2.2.1"
resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.2.1.tgz#795a1a78dd52f073da0cd42b21f9c91381923ff5"
integrity sha512-PqyhM2yCjg/oKkFPtTGUojv7gnZAoG80ttl45O6x2Ug/rMJw4wcc9k6aaf2hibP7BGVCCM33gZoGjyvt9mm16Q==
pretty-bytes@^5.3.0: pretty-bytes@^5.3.0:
version "5.5.0" version "5.5.0"
resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.5.0.tgz" resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.5.0.tgz"
@ -10627,6 +10667,14 @@ sisteransi@^1.0.5:
resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz" resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz"
integrity sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg== integrity sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==
sitemap@^1.13.0:
version "1.13.0"
resolved "https://registry.yarnpkg.com/sitemap/-/sitemap-1.13.0.tgz#569cbe2180202926a62a266cd3de09c9ceb43f83"
integrity sha1-Vpy+IYAgKSamKiZs094Jyc60P4M=
dependencies:
underscore "^1.7.0"
url-join "^1.1.0"
slash@^3.0.0: slash@^3.0.0:
version "3.0.0" version "3.0.0"
resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz" resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz"
@ -11576,6 +11624,11 @@ uglify-js@^3.1.4:
resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.12.5.tgz" resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.12.5.tgz"
integrity sha512-SgpgScL4T7Hj/w/GexjnBHi3Ien9WS1Rpfg5y91WXMj9SY997ZCQU76mH4TpLwwfmMvoOU8wiaRkIf6NaH3mtg== integrity sha512-SgpgScL4T7Hj/w/GexjnBHi3Ien9WS1Rpfg5y91WXMj9SY997ZCQU76mH4TpLwwfmMvoOU8wiaRkIf6NaH3mtg==
underscore@^1.7.0:
version "1.12.1"
resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.12.1.tgz#7bb8cc9b3d397e201cf8553336d262544ead829e"
integrity sha512-hEQt0+ZLDVUMhebKxL4x1BTtDY7bavVofhZ9KZ4aI26X9SRaE+Y3m83XUL1UP2jn8ynjndwCCpEHdUG+9pP1Tw==
unicode-canonical-property-names-ecmascript@^1.0.4: unicode-canonical-property-names-ecmascript@^1.0.4:
version "1.0.4" version "1.0.4"
resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz" resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz"
@ -11685,6 +11738,11 @@ urix@^0.1.0:
resolved "https://registry.yarnpkg.com/urix/-/urix-0.1.0.tgz" resolved "https://registry.yarnpkg.com/urix/-/urix-0.1.0.tgz"
integrity sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI= integrity sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=
url-join@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/url-join/-/url-join-1.1.0.tgz#741c6c2f4596c4830d6718460920d0c92202dc78"
integrity sha1-dBxsL0WWxIMNZxhGCSDQySIC3Hg=
url-loader@4.1.1: url-loader@4.1.1:
version "4.1.1" version "4.1.1"
resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-4.1.1.tgz" resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-4.1.1.tgz"