refacotor: template updates
This commit is contained in:
parent
1777a092f6
commit
1df8c15030
29
package-lock.json
generated
29
package-lock.json
generated
@ -1204,21 +1204,21 @@
|
|||||||
"integrity": "sha512-DAlvdHRC+HHecdy52vskbNzNKEpu6wHDvSlsHGrwOqNxQl1YLhGEtqAW4sKpyVE3GgysNCywUWZGFlLp8I3LgA=="
|
"integrity": "sha512-DAlvdHRC+HHecdy52vskbNzNKEpu6wHDvSlsHGrwOqNxQl1YLhGEtqAW4sKpyVE3GgysNCywUWZGFlLp8I3LgA=="
|
||||||
},
|
},
|
||||||
"@coreui/icons-react": {
|
"@coreui/icons-react": {
|
||||||
"version": "1.0.0-beta.1",
|
"version": "1.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/@coreui/icons-react/-/icons-react-1.0.0-beta.1.tgz",
|
"resolved": "https://registry.npmjs.org/@coreui/icons-react/-/icons-react-1.0.0.tgz",
|
||||||
"integrity": "sha512-lYhZb5rsA4BE+EgQI5fVTafTbwi55LhKwGPXhSxrN6wgJNQaXfOZMORbx0aRCMbWkX9jNOBJ40qYpO+BWd6U0Q==",
|
"integrity": "sha512-rcd/Ezld2Eb8aBdzZ/mv+0lNZ5V0h5bp5ccxuF2jKsw/V77BXH6HP+8uxFwTDNODBovyD5vKNcSjPDk2xyhtqQ==",
|
||||||
"requires": {
|
"requires": {
|
||||||
"classnames": "^2.2.6",
|
"classnames": "^2.2.6",
|
||||||
"prop-types": "^15.7.2"
|
"prop-types": "^15.7.2"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@coreui/react": {
|
"@coreui/react": {
|
||||||
"version": "3.0.0-beta.6",
|
"version": "3.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/@coreui/react/-/react-3.0.0-beta.6.tgz",
|
"resolved": "https://registry.npmjs.org/@coreui/react/-/react-3.0.0.tgz",
|
||||||
"integrity": "sha512-TsPtiKMUuiVdK9pXZk/5pGOgz0xAIlA8LkeowObnF6sfgdlpumzJT9RxSI/ttBYeg9g+U0O+zL2+anUeVbu2Dw==",
|
"integrity": "sha512-5VwE8qL+6Jn86HFj+FpnPfD5RcjAEgkK7nXl91hwZhvlWV5zkKRPvaoKYM/nXxSDG6tqU6NSjkFLM87vrQqOXw==",
|
||||||
"requires": {
|
"requires": {
|
||||||
"@coreui/icons": "^1.0.1",
|
"@coreui/icons": "2.0.0-beta.3",
|
||||||
"@coreui/icons-react": "^1.0.0-beta.1",
|
"@coreui/icons-react": "^1.0.0",
|
||||||
"@coreui/utils": "~1.3.1",
|
"@coreui/utils": "~1.3.1",
|
||||||
"@popperjs/core": "~2.4.0",
|
"@popperjs/core": "~2.4.0",
|
||||||
"classnames": "~2.2.6",
|
"classnames": "~2.2.6",
|
||||||
@ -1227,12 +1227,19 @@
|
|||||||
"prop-types": "~15.7.2",
|
"prop-types": "~15.7.2",
|
||||||
"react-transition-group": "~4.4.1",
|
"react-transition-group": "~4.4.1",
|
||||||
"tippy.js": "~6.2.3"
|
"tippy.js": "~6.2.3"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@coreui/icons": {
|
||||||
|
"version": "2.0.0-beta.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/@coreui/icons/-/icons-2.0.0-beta.3.tgz",
|
||||||
|
"integrity": "sha512-ZUP4Z8Nh8PfU/g5DMMkU0BPN8vJLSzuOUHKJzOkQvdPv7Zm+ftK5OA491LYn9ybG5QBAZGkpXF/i3cry3PmtUw=="
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@coreui/react-chartjs": {
|
"@coreui/react-chartjs": {
|
||||||
"version": "1.0.0-alpha.3",
|
"version": "1.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/@coreui/react-chartjs/-/react-chartjs-1.0.0-alpha.3.tgz",
|
"resolved": "https://registry.npmjs.org/@coreui/react-chartjs/-/react-chartjs-1.0.0.tgz",
|
||||||
"integrity": "sha512-BBPegbPaXREwpx+Mp3phUKfq6Tsmrb7EzlCoU41s9wBXqCifeCKNl942k411bmeFN5Cx7zdi79pzfp1fManDEw==",
|
"integrity": "sha512-Td+VpOHpzXiGGkimt0G5fCqmgrrPerAF7iNodVmhY4DyrX5s/Le77TJbkQQbRW2eHsZsQrPyRqGWxOQu7XF7jA==",
|
||||||
"requires": {
|
"requires": {
|
||||||
"@coreui/chartjs": "^2.0.0",
|
"@coreui/chartjs": "^2.0.0",
|
||||||
"chart.js": "^2.9.3",
|
"chart.js": "^2.9.3",
|
||||||
|
@ -26,9 +26,9 @@
|
|||||||
"@coreui/chartjs": "^2.0.0",
|
"@coreui/chartjs": "^2.0.0",
|
||||||
"@coreui/coreui": "^3.2.0",
|
"@coreui/coreui": "^3.2.0",
|
||||||
"@coreui/icons": "^1.0.1",
|
"@coreui/icons": "^1.0.1",
|
||||||
"@coreui/icons-react": "^1.0.0-beta.1",
|
"@coreui/icons-react": "^1.0.0",
|
||||||
"@coreui/react": "^3.0.0-beta.6",
|
"@coreui/react": "^3.0.0",
|
||||||
"@coreui/react-chartjs": "^1.0.0-alpha.1",
|
"@coreui/react-chartjs": "^1.0.0",
|
||||||
"@coreui/utils": "^1.3.1",
|
"@coreui/utils": "^1.3.1",
|
||||||
"classnames": "^2.2.6",
|
"classnames": "^2.2.6",
|
||||||
"core-js": "^3.6.5",
|
"core-js": "^3.6.5",
|
||||||
|
@ -42,6 +42,8 @@ import {
|
|||||||
cilAlignRight,
|
cilAlignRight,
|
||||||
cilApplicationsSettings,
|
cilApplicationsSettings,
|
||||||
cilArrowRight,
|
cilArrowRight,
|
||||||
|
cilArrowTop,
|
||||||
|
cilAsterisk,
|
||||||
cilBan,
|
cilBan,
|
||||||
cilBasket,
|
cilBasket,
|
||||||
cilBell,
|
cilBell,
|
||||||
@ -104,6 +106,7 @@ import {
|
|||||||
cilPrint,
|
cilPrint,
|
||||||
cilPuzzle,
|
cilPuzzle,
|
||||||
cilSave,
|
cilSave,
|
||||||
|
cilScrubber,
|
||||||
cilSettings,
|
cilSettings,
|
||||||
cilShare,
|
cilShare,
|
||||||
cilShareAll,
|
cilShareAll,
|
||||||
@ -122,6 +125,7 @@ import {
|
|||||||
cilUserFemale,
|
cilUserFemale,
|
||||||
cilUserFollow,
|
cilUserFollow,
|
||||||
cilUserUnfollow,
|
cilUserUnfollow,
|
||||||
|
cilX,
|
||||||
cilXCircle,
|
cilXCircle,
|
||||||
cilWarning
|
cilWarning
|
||||||
} from '@coreui/icons'
|
} from '@coreui/icons'
|
||||||
@ -136,6 +140,8 @@ export const icons = Object.assign({}, {
|
|||||||
cilAlignRight,
|
cilAlignRight,
|
||||||
cilApplicationsSettings,
|
cilApplicationsSettings,
|
||||||
cilArrowRight,
|
cilArrowRight,
|
||||||
|
cilArrowTop,
|
||||||
|
cilAsterisk,
|
||||||
cilBan,
|
cilBan,
|
||||||
cilBasket,
|
cilBasket,
|
||||||
cilBell,
|
cilBell,
|
||||||
@ -163,12 +169,12 @@ export const icons = Object.assign({}, {
|
|||||||
cilEnvelopeLetter,
|
cilEnvelopeLetter,
|
||||||
cilEnvelopeOpen,
|
cilEnvelopeOpen,
|
||||||
cilEuro,
|
cilEuro,
|
||||||
cilGraph,
|
|
||||||
cilGlobeAlt,
|
cilGlobeAlt,
|
||||||
cilGrid,
|
cilGrid,
|
||||||
cilFile,
|
cilFile,
|
||||||
cilFullscreen,
|
cilFullscreen,
|
||||||
cilFullscreenExit,
|
cilFullscreenExit,
|
||||||
|
cilGraph,
|
||||||
cilHome,
|
cilHome,
|
||||||
cilInbox,
|
cilInbox,
|
||||||
cilIndentDecrease,
|
cilIndentDecrease,
|
||||||
@ -198,6 +204,7 @@ export const icons = Object.assign({}, {
|
|||||||
cilPrint,
|
cilPrint,
|
||||||
cilPuzzle,
|
cilPuzzle,
|
||||||
cilSave,
|
cilSave,
|
||||||
|
cilScrubber,
|
||||||
cilSettings,
|
cilSettings,
|
||||||
cilShare,
|
cilShare,
|
||||||
cilShareAll,
|
cilShareAll,
|
||||||
@ -216,6 +223,7 @@ export const icons = Object.assign({}, {
|
|||||||
cilUserFemale,
|
cilUserFemale,
|
||||||
cilUserFollow,
|
cilUserFollow,
|
||||||
cilUserUnfollow,
|
cilUserUnfollow,
|
||||||
|
cilX,
|
||||||
cilXCircle,
|
cilXCircle,
|
||||||
cilWarning
|
cilWarning
|
||||||
}, {
|
}, {
|
||||||
|
@ -11,7 +11,7 @@ import {
|
|||||||
CBreadcrumbRouter,
|
CBreadcrumbRouter,
|
||||||
CLink
|
CLink
|
||||||
} from '@coreui/react'
|
} from '@coreui/react'
|
||||||
import { CIcon } from '@coreui/icons-react'
|
import CIcon from '@coreui/icons-react'
|
||||||
|
|
||||||
// routes config
|
// routes config
|
||||||
import routes from '../routes'
|
import routes from '../routes'
|
||||||
|
@ -7,7 +7,7 @@ import {
|
|||||||
CDropdownToggle,
|
CDropdownToggle,
|
||||||
CImg
|
CImg
|
||||||
} from '@coreui/react'
|
} from '@coreui/react'
|
||||||
import { CIcon } from '@coreui/icons-react'
|
import CIcon from '@coreui/icons-react'
|
||||||
|
|
||||||
const TheHeaderDropdown = () => {
|
const TheHeaderDropdown = () => {
|
||||||
return (
|
return (
|
||||||
|
@ -7,7 +7,7 @@ import {
|
|||||||
CDropdownToggle,
|
CDropdownToggle,
|
||||||
CImg
|
CImg
|
||||||
} from '@coreui/react'
|
} from '@coreui/react'
|
||||||
import { CIcon } from '@coreui/icons-react'
|
import CIcon from '@coreui/icons-react'
|
||||||
|
|
||||||
const TheHeaderDropdownMssg = () => {
|
const TheHeaderDropdownMssg = () => {
|
||||||
const itemsCount = 4
|
const itemsCount = 4
|
||||||
|
@ -7,7 +7,7 @@ import {
|
|||||||
CDropdownToggle,
|
CDropdownToggle,
|
||||||
CProgress
|
CProgress
|
||||||
} from '@coreui/react'
|
} from '@coreui/react'
|
||||||
import { CIcon } from '@coreui/icons-react'
|
import CIcon from '@coreui/icons-react'
|
||||||
|
|
||||||
const TheHeaderDropdownNotif = () => {
|
const TheHeaderDropdownNotif = () => {
|
||||||
const itemsCount = 5
|
const itemsCount = 5
|
||||||
@ -31,7 +31,7 @@ const TheHeaderDropdownNotif = () => {
|
|||||||
</CDropdownItem>
|
</CDropdownItem>
|
||||||
<CDropdownItem><CIcon name="cil-user-follow" className="mr-2 text-success" /> New user registered</CDropdownItem>
|
<CDropdownItem><CIcon name="cil-user-follow" className="mr-2 text-success" /> New user registered</CDropdownItem>
|
||||||
<CDropdownItem><CIcon name="cil-user-unfollow" className="mr-2 text-danger" /> User deleted</CDropdownItem>
|
<CDropdownItem><CIcon name="cil-user-unfollow" className="mr-2 text-danger" /> User deleted</CDropdownItem>
|
||||||
<CDropdownItem><CIcon name="cil-chart" className="mr-2 text-info" /> Sales report is ready</CDropdownItem>
|
<CDropdownItem><CIcon name="cil-chart-pie" className="mr-2 text-info" /> Sales report is ready</CDropdownItem>
|
||||||
<CDropdownItem><CIcon name="cil-basket" className="mr-2 text-primary" /> New client</CDropdownItem>
|
<CDropdownItem><CIcon name="cil-basket" className="mr-2 text-primary" /> New client</CDropdownItem>
|
||||||
<CDropdownItem><CIcon name="cil-speedometer" className="mr-2 text-warning" /> Server overloaded</CDropdownItem>
|
<CDropdownItem><CIcon name="cil-speedometer" className="mr-2 text-warning" /> Server overloaded</CDropdownItem>
|
||||||
<CDropdownItem
|
<CDropdownItem
|
||||||
|
@ -7,7 +7,7 @@ import {
|
|||||||
CDropdownToggle,
|
CDropdownToggle,
|
||||||
CProgress
|
CProgress
|
||||||
} from '@coreui/react'
|
} from '@coreui/react'
|
||||||
import { CIcon } from '@coreui/icons-react'
|
import CIcon from '@coreui/icons-react'
|
||||||
|
|
||||||
const TheHeaderDropdownTasks = () => {
|
const TheHeaderDropdownTasks = () => {
|
||||||
const itemsCount = 5
|
const itemsCount = 5
|
||||||
|
@ -12,7 +12,7 @@ import {
|
|||||||
CSidebarNavItem,
|
CSidebarNavItem,
|
||||||
} from '@coreui/react'
|
} from '@coreui/react'
|
||||||
|
|
||||||
import { CIcon } from '@coreui/icons-react'
|
import CIcon from '@coreui/icons-react'
|
||||||
|
|
||||||
// sidebar nav config
|
// sidebar nav config
|
||||||
import navigation from './_nav'
|
import navigation from './_nav'
|
||||||
|
@ -12,7 +12,7 @@ import {
|
|||||||
CSwitch,
|
CSwitch,
|
||||||
CLink
|
CLink
|
||||||
} from '@coreui/react'
|
} from '@coreui/react'
|
||||||
import { CIcon } from '@coreui/icons-react'
|
import CIcon from '@coreui/icons-react'
|
||||||
|
|
||||||
const Cards = () => {
|
const Cards = () => {
|
||||||
const [collapsed, setCollapsed] = React.useState(true)
|
const [collapsed, setCollapsed] = React.useState(true)
|
||||||
|
@ -30,7 +30,7 @@ import {
|
|||||||
CSelect,
|
CSelect,
|
||||||
CRow
|
CRow
|
||||||
} from '@coreui/react'
|
} from '@coreui/react'
|
||||||
import { CIcon } from '@coreui/icons-react'
|
import CIcon from '@coreui/icons-react'
|
||||||
|
|
||||||
const BasicForms = () => {
|
const BasicForms = () => {
|
||||||
const [collapsed, setCollapsed] = React.useState(true)
|
const [collapsed, setCollapsed] = React.useState(true)
|
||||||
|
@ -7,8 +7,6 @@ import {
|
|||||||
CCol,
|
CCol,
|
||||||
CListGroup,
|
CListGroup,
|
||||||
CListGroupItem,
|
CListGroupItem,
|
||||||
CListGroupItemHeading,
|
|
||||||
CListGroupItemText,
|
|
||||||
CRow,
|
CRow,
|
||||||
CTabContent,
|
CTabContent,
|
||||||
CTabPane
|
CTabPane
|
||||||
@ -189,27 +187,27 @@ const ListGroups = () => {
|
|||||||
|
|
||||||
<CListGroup>
|
<CListGroup>
|
||||||
<CListGroupItem action active>
|
<CListGroupItem action active>
|
||||||
<CListGroupItemHeading className="d-flex w-100 justify-content-between">
|
<h5 className="d-flex w-100 justify-content-between">
|
||||||
List group item heading
|
List group item heading
|
||||||
<small>3 days ago</small>
|
<small>3 days ago</small>
|
||||||
</CListGroupItemHeading>
|
</h5>
|
||||||
<CListGroupItemText className="mb-1">
|
<div className="mb-1">
|
||||||
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
|
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
|
||||||
<small>Donec id elit non mi porta.</small>
|
<small>Donec id elit non mi porta.</small>
|
||||||
</CListGroupItemText>
|
</div>
|
||||||
</CListGroupItem>
|
</CListGroupItem>
|
||||||
<CListGroupItem action>
|
<CListGroupItem action>
|
||||||
<CListGroupItemHeading>List group item heading</CListGroupItemHeading>
|
<h5>List group item heading</h5>
|
||||||
<CListGroupItemText>
|
<div>
|
||||||
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
|
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
|
||||||
</CListGroupItemText>
|
</div>
|
||||||
<small>Small.</small>
|
<small>Small.</small>
|
||||||
</CListGroupItem>
|
</CListGroupItem>
|
||||||
<CListGroupItem action>
|
<CListGroupItem action>
|
||||||
<CListGroupItemHeading>List group item heading</CListGroupItemHeading>
|
<h5>List group item heading</h5>
|
||||||
<CListGroupItemText>
|
<div>
|
||||||
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
|
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
|
||||||
</CListGroupItemText>
|
</div>
|
||||||
<small>Small.</small>
|
<small>Small.</small>
|
||||||
</CListGroupItem>
|
</CListGroupItem>
|
||||||
</CListGroup>
|
</CListGroup>
|
||||||
|
@ -19,7 +19,7 @@ import {
|
|||||||
CButton,
|
CButton,
|
||||||
CImg
|
CImg
|
||||||
} from '@coreui/react'
|
} from '@coreui/react'
|
||||||
// import { CIcon } from '@coreui/icons-react'
|
// import CIcon from '@coreui/icons-react'
|
||||||
|
|
||||||
const CNavbars = () => {
|
const CNavbars = () => {
|
||||||
const [isOpen, setIsOpen] = useState(false)
|
const [isOpen, setIsOpen] = useState(false)
|
||||||
|
@ -12,9 +12,7 @@ import {
|
|||||||
CTabs,
|
CTabs,
|
||||||
CCardHeader
|
CCardHeader
|
||||||
} from '@coreui/react'
|
} from '@coreui/react'
|
||||||
import {
|
import CIcon from '@coreui/icons-react'
|
||||||
CIcon
|
|
||||||
} from '@coreui/icons-react'
|
|
||||||
|
|
||||||
const Tabs = () => {
|
const Tabs = () => {
|
||||||
const [active, setActive] = useState(1)
|
const [active, setActive] = useState(1)
|
||||||
|
@ -7,7 +7,7 @@ import {
|
|||||||
CCol,
|
CCol,
|
||||||
CRow
|
CRow
|
||||||
} from '@coreui/react'
|
} from '@coreui/react'
|
||||||
import { CIcon } from '@coreui/icons-react'
|
import CIcon from '@coreui/icons-react'
|
||||||
|
|
||||||
const BrandButtons = () => {
|
const BrandButtons = () => {
|
||||||
return (
|
return (
|
||||||
|
@ -7,7 +7,7 @@ import {
|
|||||||
CCol,
|
CCol,
|
||||||
CRow
|
CRow
|
||||||
} from '@coreui/react'
|
} from '@coreui/react'
|
||||||
import { CIcon } from '@coreui/icons-react'
|
import CIcon from '@coreui/icons-react'
|
||||||
|
|
||||||
const Buttons = () => {
|
const Buttons = () => {
|
||||||
return (
|
return (
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
import React from 'react'
|
import React from 'react'
|
||||||
import PropTypes from 'prop-types'
|
import PropTypes from 'prop-types'
|
||||||
import { getColor } from '@coreui/utils/src'
|
import { getColor } from '@coreui/utils/src'
|
||||||
import { CCharts } from '@coreui/react-chartjs'
|
import { CChartBar } from '@coreui/react-chartjs'
|
||||||
|
|
||||||
const ChartBarSimple = props => {
|
const ChartBarSimple = props => {
|
||||||
|
|
||||||
@ -46,7 +46,7 @@ const ChartBarSimple = props => {
|
|||||||
|
|
||||||
// render
|
// render
|
||||||
return (
|
return (
|
||||||
<CCharts
|
<CChartBar
|
||||||
{...attributes}
|
{...attributes}
|
||||||
type="bar"
|
type="bar"
|
||||||
datasets={defaultDatasets}
|
datasets={defaultDatasets}
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
import React from 'react'
|
import React from 'react'
|
||||||
import PropTypes from 'prop-types'
|
import PropTypes from 'prop-types'
|
||||||
import { getColor, deepObjectsMerge } from '@coreui/utils/src'
|
import { getColor, deepObjectsMerge } from '@coreui/utils/src'
|
||||||
import { CCharts } from '@coreui/react-chartjs'
|
import { CChartLine } from '@coreui/react-chartjs'
|
||||||
|
|
||||||
const ChartLineSimple = props => {
|
const ChartLineSimple = props => {
|
||||||
|
|
||||||
@ -121,7 +121,7 @@ const ChartLineSimple = props => {
|
|||||||
// render
|
// render
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<CCharts
|
<CChartLine
|
||||||
{...attributes}
|
{...attributes}
|
||||||
type="line"
|
type="line"
|
||||||
datasets={computedDatasets}
|
datasets={computedDatasets}
|
||||||
|
@ -5,7 +5,14 @@ import {
|
|||||||
CCardGroup,
|
CCardGroup,
|
||||||
CCardHeader
|
CCardHeader
|
||||||
} from '@coreui/react'
|
} from '@coreui/react'
|
||||||
import { CCharts } from '@coreui/react-chartjs'
|
import {
|
||||||
|
CChartBar,
|
||||||
|
CChartLine,
|
||||||
|
CChartDoughnut,
|
||||||
|
CChartRadar,
|
||||||
|
CChartPie,
|
||||||
|
CChartPolarArea
|
||||||
|
} from '@coreui/react-chartjs'
|
||||||
|
|
||||||
const Charts = () => {
|
const Charts = () => {
|
||||||
|
|
||||||
@ -21,7 +28,7 @@ const Charts = () => {
|
|||||||
</div>
|
</div>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CCharts
|
<CChartBar
|
||||||
type="bar"
|
type="bar"
|
||||||
datasets={[
|
datasets={[
|
||||||
{
|
{
|
||||||
@ -45,7 +52,7 @@ const Charts = () => {
|
|||||||
Doughnut Chart
|
Doughnut Chart
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CCharts
|
<CChartDoughnut
|
||||||
type="doughnut"
|
type="doughnut"
|
||||||
datasets={[
|
datasets={[
|
||||||
{
|
{
|
||||||
@ -73,7 +80,7 @@ const Charts = () => {
|
|||||||
Line Chart
|
Line Chart
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CCharts
|
<CChartLine
|
||||||
type="line"
|
type="line"
|
||||||
datasets={[
|
datasets={[
|
||||||
{
|
{
|
||||||
@ -102,7 +109,7 @@ const Charts = () => {
|
|||||||
Pie Chart
|
Pie Chart
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CCharts
|
<CChartPie
|
||||||
type="pie"
|
type="pie"
|
||||||
datasets={[
|
datasets={[
|
||||||
{
|
{
|
||||||
@ -130,7 +137,7 @@ const Charts = () => {
|
|||||||
Polar Area Chart
|
Polar Area Chart
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CCharts
|
<CChartPolarArea
|
||||||
type="polarArea"
|
type="polarArea"
|
||||||
datasets={[
|
datasets={[
|
||||||
{
|
{
|
||||||
@ -171,7 +178,7 @@ const Charts = () => {
|
|||||||
Radar Chart
|
Radar Chart
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CCharts
|
<CChartRadar
|
||||||
type="radar"
|
type="radar"
|
||||||
datasets={[
|
datasets={[
|
||||||
{
|
{
|
||||||
|
@ -1,28 +1,17 @@
|
|||||||
import React from 'react'
|
import React from 'react'
|
||||||
import PropTypes from 'prop-types'
|
import { CChartLine } from '@coreui/react-chartjs'
|
||||||
import { CCharts } from '@coreui/react-chartjs'
|
import { getStyle, hexToRgba } from '@coreui/utils/src'
|
||||||
import { getColor, hexToRgba } from '@coreui/utils/src'
|
|
||||||
|
|
||||||
const MainChartExample = props => {
|
const brandSuccess = getStyle('success') || '#4dbd74'
|
||||||
|
const brandInfo = getStyle('info') || '#20a8d8'
|
||||||
const {
|
const brandDanger = getStyle('danger') || '#f86c6b'
|
||||||
borderColor,
|
|
||||||
backgroundColor,
|
|
||||||
pointHoverBackgroundColor,
|
|
||||||
dataPoints,
|
|
||||||
label,
|
|
||||||
pointed,
|
|
||||||
...attributes
|
|
||||||
} = props
|
|
||||||
|
|
||||||
|
const MainChartExample = attributes => {
|
||||||
const random = (min, max)=>{
|
const random = (min, max)=>{
|
||||||
return Math.floor(Math.random() * (max - min + 1) + min)
|
return Math.floor(Math.random() * (max - min + 1) + min)
|
||||||
}
|
}
|
||||||
|
|
||||||
const defaultDatasets = (()=>{
|
const defaultDatasets = (()=>{
|
||||||
const brandSuccess = getColor('success') || '#4dbd74'
|
|
||||||
const brandInfo = getColor('info') || '#20a8d8'
|
|
||||||
const brandDanger = getColor('danger') || '#f86c6b'
|
|
||||||
let elements = 27
|
let elements = 27
|
||||||
const data1 = []
|
const data1 = []
|
||||||
const data2 = []
|
const data2 = []
|
||||||
@ -99,34 +88,14 @@ const MainChartExample = props => {
|
|||||||
|
|
||||||
// render
|
// render
|
||||||
return (
|
return (
|
||||||
<CCharts
|
<CChartLine
|
||||||
{...attributes}
|
{...attributes}
|
||||||
type="line"
|
|
||||||
datasets={defaultDatasets}
|
datasets={defaultDatasets}
|
||||||
options={defaultOptions}
|
options={defaultOptions}
|
||||||
labels={['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']}
|
labels={['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
MainChartExample.propTypes = {
|
|
||||||
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
|
|
||||||
className: PropTypes.string,
|
|
||||||
//
|
|
||||||
borderColor: PropTypes.string,
|
|
||||||
backgroundColor: PropTypes.string,
|
|
||||||
pointHoverBackgroundColor: PropTypes.string,
|
|
||||||
dataPoints: PropTypes.array,
|
|
||||||
label: PropTypes.string,
|
|
||||||
pointed: PropTypes.bool
|
|
||||||
};
|
|
||||||
|
|
||||||
MainChartExample.defaultProps = {
|
|
||||||
borderColor: 'rgba(255,255,255,.55)',
|
|
||||||
backgroundColor: 'transparent',
|
|
||||||
dataPoints: [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12],
|
|
||||||
label: 'Sales'
|
|
||||||
};
|
|
||||||
|
|
||||||
export default MainChartExample
|
export default MainChartExample
|
||||||
|
@ -12,7 +12,7 @@ import {
|
|||||||
CRow,
|
CRow,
|
||||||
CCallout
|
CCallout
|
||||||
} from '@coreui/react'
|
} from '@coreui/react'
|
||||||
import { CIcon } from '@coreui/icons-react'
|
import CIcon from '@coreui/icons-react'
|
||||||
|
|
||||||
import MainChartExample from '../charts/MainChartExample.js'
|
import MainChartExample from '../charts/MainChartExample.js'
|
||||||
|
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import React from 'react'
|
import React from 'react'
|
||||||
import { CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react'
|
import { CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react'
|
||||||
import { CIconRaw } from '@coreui/icons-react'
|
import CIcon from '@coreui/icons-react'
|
||||||
import { brandSet } from '@coreui/icons'
|
import { brandSet } from '@coreui/icons'
|
||||||
|
|
||||||
const toKebabCase = (str) => {
|
const toKebabCase = (str) => {
|
||||||
@ -10,7 +10,7 @@ const toKebabCase = (str) => {
|
|||||||
export const getIconsView = iconset => {
|
export const getIconsView = iconset => {
|
||||||
return Object.entries(iconset).map(([name, value]) => (
|
return Object.entries(iconset).map(([name, value]) => (
|
||||||
<CCol className="mb-5" xs="6" sm="4" md="3" xl="2" key={name}>
|
<CCol className="mb-5" xs="6" sm="4" md="3" xl="2" key={name}>
|
||||||
<CIconRaw content={value} size="2xl"/>
|
<CIcon content={value} size="2xl"/>
|
||||||
<div>{toKebabCase(name)}</div>
|
<div>{toKebabCase(name)}</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
))
|
))
|
||||||
@ -20,7 +20,7 @@ const CoreUIIcons = () => {
|
|||||||
return (
|
return (
|
||||||
<CCard>
|
<CCard>
|
||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
Brand Icons / as CIconRaw{' '}
|
Brand Icons / as CIcon{' '}
|
||||||
<div className="card-header-actions">
|
<div className="card-header-actions">
|
||||||
<a href="https://github.com/coreui/coreui-icons" rel="noreferrer noopener" target="_blank" className="card-header-action">
|
<a href="https://github.com/coreui/coreui-icons" rel="noreferrer noopener" target="_blank" className="card-header-action">
|
||||||
<small className="text-muted">Github</small>
|
<small className="text-muted">Github</small>
|
||||||
|
@ -7,7 +7,7 @@ const CoreUIIcons = () => {
|
|||||||
return (
|
return (
|
||||||
<CCard>
|
<CCard>
|
||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
Flag Icons / as CIconRaw{' '}
|
Flag Icons / as CIcon{' '}
|
||||||
<div className="card-header-actions">
|
<div className="card-header-actions">
|
||||||
<a href="https://github.com/coreui/coreui-icons" rel="noreferrer noopener" target="_blank" className="card-header-action">
|
<a href="https://github.com/coreui/coreui-icons" rel="noreferrer noopener" target="_blank" className="card-header-action">
|
||||||
<small className="text-muted">Github</small>
|
<small className="text-muted">Github</small>
|
||||||
|
@ -36,6 +36,12 @@ const Modals = () => {
|
|||||||
onClick={() => setModal(!modal)}
|
onClick={() => setModal(!modal)}
|
||||||
className="mr-1"
|
className="mr-1"
|
||||||
>Launch demo modal</CButton>
|
>Launch demo modal</CButton>
|
||||||
|
<CButton onClick={() => setLarge(!large)} className="mr-1">
|
||||||
|
Launch large modal
|
||||||
|
</CButton>
|
||||||
|
<CButton onClick={() => setSmall(!large)} className="mr-1">
|
||||||
|
Launch small modal
|
||||||
|
</CButton>
|
||||||
<CModal
|
<CModal
|
||||||
show={modal}
|
show={modal}
|
||||||
onClose={setModal}
|
onClose={setModal}
|
||||||
@ -59,9 +65,7 @@ const Modals = () => {
|
|||||||
</CModalFooter>
|
</CModalFooter>
|
||||||
</CModal>
|
</CModal>
|
||||||
|
|
||||||
<CButton onClick={() => setLarge(!large)} className="mr-1">
|
|
||||||
Launch large modal
|
|
||||||
</CButton>
|
|
||||||
<CModal
|
<CModal
|
||||||
show={large}
|
show={large}
|
||||||
onClose={() => setLarge(!large)}
|
onClose={() => setLarge(!large)}
|
||||||
@ -83,9 +87,6 @@ const Modals = () => {
|
|||||||
</CModalFooter>
|
</CModalFooter>
|
||||||
</CModal>
|
</CModal>
|
||||||
|
|
||||||
<CButton onClick={() => setLarge(!large)} className="mr-1">
|
|
||||||
Launch small modal
|
|
||||||
</CButton>
|
|
||||||
<CModal
|
<CModal
|
||||||
show={small}
|
show={small}
|
||||||
onClose={() => setSmall(!small)}
|
onClose={() => setSmall(!small)}
|
||||||
@ -112,6 +113,11 @@ const Modals = () => {
|
|||||||
<CButton color="primary" onClick={() => setPrimary(!primary)} className="mr-1">
|
<CButton color="primary" onClick={() => setPrimary(!primary)} className="mr-1">
|
||||||
Primary modal
|
Primary modal
|
||||||
</CButton>
|
</CButton>
|
||||||
|
<CButton color="success" onClick={() => setSuccess(!success)} className="mr-1">Success modal</CButton>
|
||||||
|
<CButton color="warning" onClick={() => setWarning(!warning)} className="mr-1">Warning modal</CButton>
|
||||||
|
<CButton color="danger" onClick={() => setDanger(!danger)} className="mr-1">Danger modal</CButton>
|
||||||
|
<CButton color="info" onClick={() => setInfo(!info)} className="mr-1">Info modal</CButton>
|
||||||
|
|
||||||
<CModal
|
<CModal
|
||||||
show={primary}
|
show={primary}
|
||||||
onClose={() => setPrimary(!primary)}
|
onClose={() => setPrimary(!primary)}
|
||||||
@ -137,7 +143,6 @@ const Modals = () => {
|
|||||||
</CModalFooter>
|
</CModalFooter>
|
||||||
</CModal>
|
</CModal>
|
||||||
|
|
||||||
<CButton color="success" onClick={() => setSuccess(!success)} className="mr-1">Success modal</CButton>
|
|
||||||
<CModal
|
<CModal
|
||||||
show={success}
|
show={success}
|
||||||
onClose={() => setSuccess(!success)}
|
onClose={() => setSuccess(!success)}
|
||||||
@ -159,7 +164,6 @@ const Modals = () => {
|
|||||||
</CModalFooter>
|
</CModalFooter>
|
||||||
</CModal>
|
</CModal>
|
||||||
|
|
||||||
<CButton color="warning" onClick={() => setWarning(!warning)} className="mr-1">Warning modal</CButton>
|
|
||||||
<CModal
|
<CModal
|
||||||
show={warning}
|
show={warning}
|
||||||
onClose={() => setWarning(!warning)}
|
onClose={() => setWarning(!warning)}
|
||||||
@ -181,7 +185,6 @@ const Modals = () => {
|
|||||||
</CModalFooter>
|
</CModalFooter>
|
||||||
</CModal>
|
</CModal>
|
||||||
|
|
||||||
<CButton color="danger" onClick={() => setDanger(!danger)} className="mr-1">Danger modal</CButton>
|
|
||||||
<CModal
|
<CModal
|
||||||
show={danger}
|
show={danger}
|
||||||
onClose={() => setDanger(!danger)}
|
onClose={() => setDanger(!danger)}
|
||||||
@ -203,7 +206,6 @@ const Modals = () => {
|
|||||||
</CModalFooter>
|
</CModalFooter>
|
||||||
</CModal>
|
</CModal>
|
||||||
|
|
||||||
<CButton color="info" onClick={() => setInfo(!info)} className="mr-1">Info modal</CButton>
|
|
||||||
<CModal
|
<CModal
|
||||||
show={info}
|
show={info}
|
||||||
onClose={() => setInfo(!info)}
|
onClose={() => setInfo(!info)}
|
||||||
|
@ -14,7 +14,7 @@ import {
|
|||||||
CInputGroupText,
|
CInputGroupText,
|
||||||
CRow
|
CRow
|
||||||
} from '@coreui/react'
|
} from '@coreui/react'
|
||||||
import { CIcon } from '@coreui/icons-react'
|
import CIcon from '@coreui/icons-react'
|
||||||
|
|
||||||
const Login = () => {
|
const Login = () => {
|
||||||
return (
|
return (
|
||||||
|
@ -10,7 +10,7 @@ import {
|
|||||||
CInputGroupText,
|
CInputGroupText,
|
||||||
CRow
|
CRow
|
||||||
} from '@coreui/react'
|
} from '@coreui/react'
|
||||||
import { CIcon } from '@coreui/icons-react'
|
import CIcon from '@coreui/icons-react'
|
||||||
|
|
||||||
const Page404 = () => {
|
const Page404 = () => {
|
||||||
return (
|
return (
|
||||||
|
@ -10,7 +10,7 @@ import {
|
|||||||
CInputGroupText,
|
CInputGroupText,
|
||||||
CRow
|
CRow
|
||||||
} from '@coreui/react'
|
} from '@coreui/react'
|
||||||
import { CIcon } from '@coreui/icons-react'
|
import CIcon from '@coreui/icons-react'
|
||||||
|
|
||||||
const Page500 = () => {
|
const Page500 = () => {
|
||||||
return (
|
return (
|
||||||
|
@ -13,7 +13,7 @@ import {
|
|||||||
CInputGroupText,
|
CInputGroupText,
|
||||||
CRow
|
CRow
|
||||||
} from '@coreui/react'
|
} from '@coreui/react'
|
||||||
import { CIcon } from '@coreui/icons-react'
|
import CIcon from '@coreui/icons-react'
|
||||||
|
|
||||||
const Register = () => {
|
const Register = () => {
|
||||||
return (
|
return (
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import React from 'react'
|
import React from 'react'
|
||||||
import { CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react'
|
import { CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react'
|
||||||
import { CIcon } from '@coreui/icons-react'
|
import CIcon from '@coreui/icons-react'
|
||||||
|
|
||||||
import usersData from './UsersData'
|
import usersData from './UsersData'
|
||||||
|
|
||||||
|
@ -17,7 +17,7 @@ import WidgetsDropdown from './WidgetsDropdown'
|
|||||||
import ChartLineSimple from '../charts/ChartLineSimple'
|
import ChartLineSimple from '../charts/ChartLineSimple'
|
||||||
import ChartBarSimple from '../charts/ChartBarSimple'
|
import ChartBarSimple from '../charts/ChartBarSimple'
|
||||||
|
|
||||||
import { CIcon } from '@coreui/icons-react'
|
import CIcon from '@coreui/icons-react'
|
||||||
|
|
||||||
const Widgets = () => {
|
const Widgets = () => {
|
||||||
return (
|
return (
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import { CWidgetBrand, CRow, CCol } from '@coreui/react';
|
import { CWidgetBrand, CRow, CCol } from '@coreui/react';
|
||||||
import { CIcon } from '@coreui/icons-react';
|
import CIcon from '@coreui/icons-react';
|
||||||
import ChartLineSimple from '../charts/ChartLineSimple';
|
import ChartLineSimple from '../charts/ChartLineSimple';
|
||||||
|
|
||||||
const WidgetsBrand = ({withCharts})=>{
|
const WidgetsBrand = ({withCharts})=>{
|
||||||
|
@ -8,7 +8,7 @@ import {
|
|||||||
CDropdownItem,
|
CDropdownItem,
|
||||||
CDropdownToggle
|
CDropdownToggle
|
||||||
} from '@coreui/react'
|
} from '@coreui/react'
|
||||||
import { CIcon } from '@coreui/icons-react'
|
import CIcon from '@coreui/icons-react'
|
||||||
import ChartLineSimple from '../charts/ChartLineSimple'
|
import ChartLineSimple from '../charts/ChartLineSimple'
|
||||||
import ChartBarSimple from '../charts/ChartBarSimple'
|
import ChartBarSimple from '../charts/ChartBarSimple'
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user