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

refactor: update to @coreui/react@v4.0.0-rc.0

Browse Source
This commit is contained in:
Łukasz Holeczek 2021-08-23 16:28:36 +02:00
parent e34547654e
commit c41bb25b4e
5 changed files with 674 additions and 559 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
package.json
View File

@ -30,13 +30,13 @@
"@coreui/coreui": "4.0.1", "@coreui/coreui": "4.0.1",
"@coreui/icons": "^2.0.1", "@coreui/icons": "^2.0.1",
"@coreui/icons-react": "^2.0.0-rc.5", "@coreui/icons-react": "^2.0.0-rc.5",
"@coreui/react": "4.0.0-beta.4", "@coreui/react": "4.0.0-rc.0",
"@coreui/react-chartjs": "2.0.0-rc.0", "@coreui/react-chartjs": "2.0.0-rc.0",
"@coreui/utils": "^1.3.1", "@coreui/utils": "^1.3.1",
"@wojtekmaj/enzyme-adapter-react-17": "^0.6.3", "@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
"chart.js": "^3.5.0", "chart.js": "^3.5.1",
"classnames": "^2.3.1", "classnames": "^2.3.1",
"core-js": "^3.16.1", "core-js": "^3.16.2",
"enzyme": "^3.11.0", "enzyme": "^3.11.0",
"prop-types": "^15.7.2", "prop-types": "^15.7.2",
"react": "^17.0.2", "react": "^17.0.2",
@ -51,10 +51,10 @@
"auto-changelog": "~2.3.0", "auto-changelog": "~2.3.0",
"eslint": "^7.32.0", "eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0", "eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^3.4.0", "eslint-plugin-prettier": "^3.4.1",
"prettier": "2.3.2", "prettier": "2.3.2",
"react-scripts": "^4.0.3", "react-scripts": "^4.0.3",
"sass": "^1.37.5" "sass": "^1.38.0"
}, },
"scripts": { "scripts": {
"start": "react-scripts start", "start": "react-scripts start",

352
src/views/components/widgets/Widgets.js
View File

@ -4,10 +4,10 @@ import {
CCol, CCol,
CLink, CLink,
CRow, CRow,
CWidgetIcon, CWidgetStatsB,
CWidgetProgress, CWidgetStatsC,
CWidgetProgressIcon, CWidgetStatsE,
CWidgetSimple, CWidgetStatsF,
} from '@coreui/react' } from '@coreui/react'
import { getStyle } from '@coreui/utils' import { getStyle } from '@coreui/utils'
import CIcon from '@coreui/icons-react' import CIcon from '@coreui/icons-react'
@ -38,101 +38,114 @@ const Widgets = () => {
<WidgetsDropdown /> <WidgetsDropdown />
<CRow> <CRow>
<CCol xs={12} sm={6} lg={3}> <CCol xs={12} sm={6} lg={3}>
<CWidgetProgress <CWidgetStatsB
className="mb-4" className="mb-4"
value="89.9%" progress={{ color: 'success', value: 89.9 }}
title="Widget title"
progressColor="success"
progressValue={89.9}
text="Lorem ipsum dolor sit amet enim." text="Lorem ipsum dolor sit amet enim."
title="Widget title"
value="89.9%"
/> />
</CCol> </CCol>
<CCol xs={12} sm={6} lg={3}> <CCol xs={12} sm={6} lg={3}>
<CWidgetProgress <CWidgetStatsB
className="mb-4" className="mb-4"
value="12.124" value="12.124"
title="Widget title" title="Widget title"
progressColor="info" progress={{ color: 'info', value: 89.9 }}
progressValue={89.9}
text="Lorem ipsum dolor sit amet enim." text="Lorem ipsum dolor sit amet enim."
/> />
</CCol> </CCol>
<CCol xs={12} sm={6} lg={3}> <CCol xs={12} sm={6} lg={3}>
<CWidgetProgress <CWidgetStatsB
className="mb-4" className="mb-4"
value="$98.111,00" value="$98.111,00"
title="Widget title" title="Widget title"
progressColor="warning" progress={{ color: 'warning', value: 89.9 }}
progressValue={89.9}
text="Lorem ipsum dolor sit amet enim." text="Lorem ipsum dolor sit amet enim."
/> />
</CCol> </CCol>
<CCol xs={12} sm={6} lg={3}> <CCol xs={12} sm={6} lg={3}>
<CWidgetProgress <CWidgetStatsB
className="mb-4" className="mb-4"
value="2 TB" value="2 TB"
title="Widget title" title="Widget title"
progressValue={89.9} progress={{ color: 'primary', value: 89.9 }}
text="Lorem ipsum dolor sit amet enim." text="Lorem ipsum dolor sit amet enim."
/> />
</CCol> </CCol>
<CCol xs={12} sm={6} lg={3}> <CCol xs={12} sm={6} lg={3}>
<CWidgetProgress <CWidgetStatsB
className="mb-4" className="mb-4"
color="success" color="success"
textColor="white" inverse
value="89.9%" value="89.9%"
title="Widget title" title="Widget title"
progressWhite progress={{ value: 89.9 }}
progressValue={89.9}
text="Lorem ipsum dolor sit amet enim." text="Lorem ipsum dolor sit amet enim."
/> />
</CCol> </CCol>
<CCol xs={12} sm={6} lg={3}> <CCol xs={12} sm={6} lg={3}>
<CWidgetProgress <CWidgetStatsB
className="mb-4" className="mb-4"
color="info" color="info"
inverse
textColor="white" textColor="white"
value="12.124" value="12.124"
title="Widget title" title="Widget title"
progressWhite progress={{ value: 89.9 }}
progressValue={89.9}
text="Lorem ipsum dolor sit amet enim." text="Lorem ipsum dolor sit amet enim."
/> />
</CCol> </CCol>
<CCol xs={12} sm={6} lg={3}> <CCol xs={12} sm={6} lg={3}>
<CWidgetProgress <CWidgetStatsB
className="mb-4" className="mb-4"
color="warning" color="warning"
inverse
textColor="white" textColor="white"
value="$98.111,00" value="$98.111,00"
title="Widget title" title="Widget title"
progressWhite progress={{ value: 89.9 }}
progressValue={89.9}
text="Lorem ipsum dolor sit amet enim." text="Lorem ipsum dolor sit amet enim."
/> />
</CCol> </CCol>
<CCol xs={12} sm={6} lg={3}> <CCol xs={12} sm={6} lg={3}>
<CWidgetProgress <CWidgetStatsB
className="mb-4" className="mb-4"
color="primary" color="primary"
inverse
textColor="white" textColor="white"
value="2 TB" value="2 TB"
title="Widget title" title="Widget title"
progressWhite progress={{ value: 89.9 }}
progressValue={89.9}
text="Lorem ipsum dolor sit amet enim." text="Lorem ipsum dolor sit amet enim."
/> />
</CCol> </CCol>
</CRow> </CRow>
<CRow> <CRow>
<CCol sm={4} lg={2}> <CCol sm={4} lg={2}>
<CWidgetSimple title="title" value="1,123" className="mb-4"> <CWidgetStatsE
chart={
<CChartBar <CChartBar
className="mx-auto" className="mx-auto"
style={{ height: '40px', width: '80px' }} style={{ height: '40px', width: '80px' }}
data={{ data={{
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'], labels: [
'M',
'T',
'W',
'T',
'F',
'S',
'S',
'M',
'T',
'W',
'T',
'F',
'S',
'S',
'M',
],
datasets: [ datasets: [
{ {
backgroundColor: getStyle('--cui-danger'), backgroundColor: getStyle('--cui-danger'),
@ -175,15 +188,36 @@ const Widgets = () => {
}, },
}} }}
/> />
</CWidgetSimple> }
className="mb-4"
title="title"
value="1,123"
/>
</CCol> </CCol>
<CCol sm={4} lg={2}> <CCol sm={4} lg={2}>
<CWidgetSimple title="title" value="1,123" className="mb-4"> <CWidgetStatsE
chart={
<CChartBar <CChartBar
className="mx-auto" className="mx-auto"
style={{ height: '40px', width: '80px' }} style={{ height: '40px', width: '80px' }}
data={{ data={{
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'], labels: [
'M',
'T',
'W',
'T',
'F',
'S',
'S',
'M',
'T',
'W',
'T',
'F',
'S',
'S',
'M',
],
datasets: [ datasets: [
{ {
backgroundColor: getStyle('--cui-primary'), backgroundColor: getStyle('--cui-primary'),
@ -226,15 +260,36 @@ const Widgets = () => {
}, },
}} }}
/> />
</CWidgetSimple> }
className="mb-4"
title="title"
value="1,123"
/>
</CCol> </CCol>
<CCol sm={4} lg={2}> <CCol sm={4} lg={2}>
<CWidgetSimple title="title" value="1,123" className="mb-4"> <CWidgetStatsE
chart={
<CChartBar <CChartBar
className="mx-auto" className="mx-auto"
style={{ height: '40px', width: '80px' }} style={{ height: '40px', width: '80px' }}
data={{ data={{
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'], labels: [
'M',
'T',
'W',
'T',
'F',
'S',
'S',
'M',
'T',
'W',
'T',
'F',
'S',
'S',
'M',
],
datasets: [ datasets: [
{ {
backgroundColor: getStyle('--cui-success'), backgroundColor: getStyle('--cui-success'),
@ -277,15 +332,36 @@ const Widgets = () => {
}, },
}} }}
/> />
</CWidgetSimple> }
className="mb-4"
title="title"
value="1,123"
/>
</CCol> </CCol>
<CCol sm={4} lg={2}> <CCol sm={4} lg={2}>
<CWidgetSimple title="title" value="1,123" className="mb-4"> <CWidgetStatsE
chart={
<CChartLine <CChartLine
className="mx-auto" className="mx-auto"
style={{ height: '40px', width: '80px' }} style={{ height: '40px', width: '80px' }}
data={{ data={{
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'], labels: [
'M',
'T',
'W',
'T',
'F',
'S',
'S',
'M',
'T',
'W',
'T',
'F',
'S',
'S',
'M',
],
datasets: [ datasets: [
{ {
backgroundColor: 'transparent', backgroundColor: 'transparent',
@ -336,15 +412,36 @@ const Widgets = () => {
}, },
}} }}
/> />
</CWidgetSimple> }
className="mb-4"
title="title"
value="1,123"
/>
</CCol> </CCol>
<CCol sm={4} lg={2}> <CCol sm={4} lg={2}>
<CWidgetSimple title="title" value="1,123" className="mb-4"> <CWidgetStatsE
chart={
<CChartLine <CChartLine
className="mx-auto" className="mx-auto"
style={{ height: '40px', width: '80px' }} style={{ height: '40px', width: '80px' }}
data={{ data={{
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'], labels: [
'M',
'T',
'W',
'T',
'F',
'S',
'S',
'M',
'T',
'W',
'T',
'F',
'S',
'S',
'M',
],
datasets: [ datasets: [
{ {
backgroundColor: 'transparent', backgroundColor: 'transparent',
@ -395,15 +492,36 @@ const Widgets = () => {
}, },
}} }}
/> />
</CWidgetSimple> }
className="mb-4"
title="title"
value="1,123"
/>
</CCol> </CCol>
<CCol sm={4} lg={2}> <CCol sm={4} lg={2}>
<CWidgetSimple title="title" value="1,123" className="mb-4"> <CWidgetStatsE
chart={
<CChartLine <CChartLine
className="mx-auto" className="mx-auto"
style={{ height: '40px', width: '80px' }} style={{ height: '40px', width: '80px' }}
data={{ data={{
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'], labels: [
'M',
'T',
'W',
'T',
'F',
'S',
'S',
'M',
'T',
'W',
'T',
'F',
'S',
'S',
'M',
],
datasets: [ datasets: [
{ {
backgroundColor: 'transparent', backgroundColor: 'transparent',
@ -454,55 +572,54 @@ const Widgets = () => {
}, },
}} }}
/> />
</CWidgetSimple> }
className="mb-4"
title="title"
value="1,123"
/>
</CCol> </CCol>
</CRow> </CRow>
<CRow> <CRow>
<CCol xs={12} sm={6} lg={3}> <CCol xs={12} sm={6} lg={3}>
<CWidgetIcon <CWidgetStatsF
className="mb-3" className="mb-3"
icon={<CIcon width={24} icon={cilSettings} size="xl" />} icon={<CIcon width={24} icon={cilSettings} size="xl" />}
iconPadding={3}
title="income" title="income"
value="$1.999,50" value="$1.999,50"
color="primary" color="primary"
/> />
</CCol> </CCol>
<CCol xs={12} sm={6} lg={3}> <CCol xs={12} sm={6} lg={3}>
<CWidgetIcon <CWidgetStatsF
className="mb-3" className="mb-3"
icon={<CIcon width={24} icon={cilUser} size="xl" />} icon={<CIcon width={24} icon={cilUser} size="xl" />}
iconPadding={3}
title="income" title="income"
value="$1.999,50" value="$1.999,50"
color="info" color="info"
/> />
</CCol> </CCol>
<CCol xs={12} sm={6} lg={3}> <CCol xs={12} sm={6} lg={3}>
<CWidgetIcon <CWidgetStatsF
className="mb-3" className="mb-3"
icon={<CIcon width={24} icon={cilMoon} size="xl" />} icon={<CIcon width={24} icon={cilMoon} size="xl" />}
iconPadding={3}
title="income" title="income"
value="$1.999,50" value="$1.999,50"
color="warning" color="warning"
/> />
</CCol> </CCol>
<CCol xs={12} sm={6} lg={3}> <CCol xs={12} sm={6} lg={3}>
<CWidgetIcon <CWidgetStatsF
className="mb-3" className="mb-3"
icon={<CIcon width={24} icon={cilBell} size="xl" />} icon={<CIcon width={24} icon={cilBell} size="xl" />}
iconPadding={3}
title="income" title="income"
value="$1.999,50" value="$1.999,50"
color="danger" color="danger"
/> />
</CCol> </CCol>
<CCol xs={12} sm={6} lg={3}> <CCol xs={12} sm={6} lg={3}>
<CWidgetIcon <CWidgetStatsF
className="mb-3" className="mb-3"
icon={<CIcon width={24} icon={cilSettings} size="xl" />} icon={<CIcon width={24} icon={cilSettings} size="xl" />}
iconPadding={3}
title="income" title="income"
value="$1.999,50" value="$1.999,50"
color="primary" color="primary"
@ -520,10 +637,9 @@ const Widgets = () => {
/> />
</CCol> </CCol>
<CCol xs={12} sm={6} lg={3}> <CCol xs={12} sm={6} lg={3}>
<CWidgetIcon <CWidgetStatsF
className="mb-3" className="mb-3"
icon={<CIcon width={24} icon={cilLaptop} size="xl" />} icon={<CIcon width={24} icon={cilLaptop} size="xl" />}
iconPadding={3}
title="income" title="income"
value="$1.999,50" value="$1.999,50"
color="info" color="info"
@ -541,10 +657,9 @@ const Widgets = () => {
/> />
</CCol> </CCol>
<CCol xs={12} sm={6} lg={3}> <CCol xs={12} sm={6} lg={3}>
<CWidgetIcon <CWidgetStatsF
className="mb-3" className="mb-3"
icon={<CIcon width={24} icon={cilMoon} size="xl" />} icon={<CIcon width={24} icon={cilMoon} size="xl" />}
iconPadding={3}
title="income" title="income"
value="$1.999,50" value="$1.999,50"
color="warning" color="warning"
@ -562,10 +677,9 @@ const Widgets = () => {
/> />
</CCol> </CCol>
<CCol xs={12} sm={6} lg={3}> <CCol xs={12} sm={6} lg={3}>
<CWidgetIcon <CWidgetStatsF
className="mb-3" className="mb-3"
icon={<CIcon width={24} icon={cilBell} size="xl" />} icon={<CIcon width={24} icon={cilBell} size="xl" />}
iconPadding={3}
title="income" title="income"
value="$1.999,50" value="$1.999,50"
color="danger" color="danger"
@ -583,44 +697,40 @@ const Widgets = () => {
/> />
</CCol> </CCol>
<CCol xs={12} sm={6} lg={3}> <CCol xs={12} sm={6} lg={3}>
<CWidgetIcon <CWidgetStatsF
className="mb-3" className="mb-3"
padding={0}
icon={<CIcon width={24} icon={cilSettings} size="xl" />} icon={<CIcon width={24} icon={cilSettings} size="xl" />}
iconPadding={4} padding={false}
title="income" title="income"
value="$1.999,50" value="$1.999,50"
color="primary" color="primary"
/> />
</CCol> </CCol>
<CCol xs={12} sm={6} lg={3}> <CCol xs={12} sm={6} lg={3}>
<CWidgetIcon <CWidgetStatsF
className="mb-3" className="mb-3"
padding={0}
icon={<CIcon width={24} icon={cilUser} size="xl" />} icon={<CIcon width={24} icon={cilUser} size="xl" />}
iconPadding={4} padding={false}
title="income" title="income"
value="$1.999,50" value="$1.999,50"
color="info" color="info"
/> />
</CCol> </CCol>
<CCol xs={12} sm={6} lg={3}> <CCol xs={12} sm={6} lg={3}>
<CWidgetIcon <CWidgetStatsF
className="mb-3" className="mb-3"
padding={0}
icon={<CIcon width={24} icon={cilMoon} size="xl" />} icon={<CIcon width={24} icon={cilMoon} size="xl" />}
iconPadding={4} padding={false}
title="income" title="income"
value="$1.999,50" value="$1.999,50"
color="warning" color="warning"
/> />
</CCol> </CCol>
<CCol xs={12} sm={6} lg={3}> <CCol xs={12} sm={6} lg={3}>
<CWidgetIcon <CWidgetStatsF
className="mb-3" className="mb-3"
padding={0}
icon={<CIcon width={24} icon={cilBell} size="xl" />} icon={<CIcon width={24} icon={cilBell} size="xl" />}
iconPadding={4} padding={false}
title="income" title="income"
value="$1.999,50" value="$1.999,50"
color="danger" color="danger"
@ -630,167 +740,157 @@ const Widgets = () => {
<WidgetsBrand /> <WidgetsBrand />
<WidgetsBrand withCharts /> <WidgetsBrand withCharts />
<CCardGroup className="mb-4"> <CCardGroup className="mb-4">
<CWidgetProgressIcon <CWidgetStatsC
icon={<CIcon icon={cilPeople} height={36} />} icon={<CIcon icon={cilPeople} height={36} />}
value="87.500" value="87.500"
title="Visitors" title="Visitors"
progressColor="info" progress={{ color: 'info', value: 75 }}
progressValue={75}
/> />
<CWidgetProgressIcon <CWidgetStatsC
icon={<CIcon icon={cilUserFollow} height={36} />} icon={<CIcon icon={cilUserFollow} height={36} />}
value="385" value="385"
title="New Clients" title="New Clients"
progressColor="success" progress={{ color: 'success', value: 75 }}
progressValue={75}
/> />
<CWidgetProgressIcon <CWidgetStatsC
icon={<CIcon icon={cilBasket} height={36} />} icon={<CIcon icon={cilBasket} height={36} />}
value="1238" value="1238"
title="Products sold" title="Products sold"
progressColor="warning" progress={{ color: 'warning', value: 75 }}
progressValue={75}
/> />
<CWidgetProgressIcon <CWidgetStatsC
icon={<CIcon icon={cilChartPie} height={36} />} icon={<CIcon icon={cilChartPie} height={36} />}
value="28%" value="28%"
title="Returning Visitors" title="Returning Visitors"
progressValue={75} progress={{ color: 'primary', value: 75 }}
/> />
<CWidgetProgressIcon <CWidgetStatsC
icon={<CIcon icon={cilSpeedometer} height={36} />} icon={<CIcon icon={cilSpeedometer} height={36} />}
value="5:34:11" value="5:34:11"
title="Avg. Time" title="Avg. Time"
progressColor="danger" progress={{ color: 'danger', value: 75 }}
progressValue={75}
/> />
</CCardGroup> </CCardGroup>
<CRow> <CRow>
<CCol sm={6} md={2}> <CCol sm={6} md={2}>
<CWidgetProgressIcon <CWidgetStatsC
icon={<CIcon icon={cilPeople} height={36} />} icon={<CIcon icon={cilPeople} height={36} />}
value="87.500" value="87.500"
title="Visitors" title="Visitors"
progressColor="info" progress={{ color: 'info', value: 75 }}
progressValue={75}
className="mb-4" className="mb-4"
/> />
</CCol> </CCol>
<CCol sm={6} md={2}> <CCol sm={6} md={2}>
<CWidgetProgressIcon <CWidgetStatsC
icon={<CIcon icon={cilUserFollow} height={36} />} icon={<CIcon icon={cilUserFollow} height={36} />}
value="385" value="385"
title="New Clients" title="New Clients"
progressColor="success" progress={{ color: 'success', value: 75 }}
progressValue={75}
className="mb-4" className="mb-4"
/> />
</CCol> </CCol>
<CCol sm={6} md={2}> <CCol sm={6} md={2}>
<CWidgetProgressIcon <CWidgetStatsC
icon={<CIcon icon={cilBasket} height={36} />} icon={<CIcon icon={cilBasket} height={36} />}
value="1238" value="1238"
title="Products sold" title="Products sold"
progressColor="warning" progress={{ color: 'warning', value: 75 }}
progressValue={75}
className="mb-4" className="mb-4"
/> />
</CCol> </CCol>
<CCol sm={6} md={2}> <CCol sm={6} md={2}>
<CWidgetProgressIcon <CWidgetStatsC
icon={<CIcon icon={cilChartPie} height={36} />} icon={<CIcon icon={cilChartPie} height={36} />}
value="28%" value="28%"
title="Returning Visitors" title="Returning Visitors"
progressColor="primary" progress={{ color: 'primary', value: 75 }}
progressValue={75}
className="mb-4" className="mb-4"
/> />
</CCol> </CCol>
<CCol sm={6} md={2}> <CCol sm={6} md={2}>
<CWidgetProgressIcon <CWidgetStatsC
icon={<CIcon icon={cilSpeedometer} height={36} />} icon={<CIcon icon={cilSpeedometer} height={36} />}
value="5:34:11" value="5:34:11"
title="Avg. Time" title="Avg. Time"
progressColor="danger" progress={{ color: 'danger', value: 75 }}
progressValue={75}
className="mb-4" className="mb-4"
/> />
</CCol> </CCol>
<CCol sm={6} md={2}> <CCol sm={6} md={2}>
<CWidgetProgressIcon <CWidgetStatsC
icon={<CIcon icon={cilSpeech} height={36} />} icon={<CIcon icon={cilSpeech} height={36} />}
value="972" value="972"
title="comments" title="comments"
progressColor="info" progress={{ color: 'info', value: 75 }}
progressValue={75}
className="mb-4" className="mb-4"
/> />
</CCol> </CCol>
</CRow> </CRow>
<CRow> <CRow>
<CCol sm={6} md={2}> <CCol sm={6} md={2}>
<CWidgetProgressIcon <CWidgetStatsC
color="info" color="info"
icon={<CIcon icon={cilPeople} height={36} />} icon={<CIcon icon={cilPeople} height={36} />}
value="87.500" value="87.500"
title="Visitors" title="Visitors"
progressValue={75} inverse
progressWhite progress={{ value: 75 }}
className="mb-4" className="mb-4"
/> />
</CCol> </CCol>
<CCol sm={6} md={2}> <CCol sm={6} md={2}>
<CWidgetProgressIcon <CWidgetStatsC
color="success" color="success"
icon={<CIcon icon={cilUserFollow} height={36} />} icon={<CIcon icon={cilUserFollow} height={36} />}
value="385" value="385"
title="New Clients" title="New Clients"
progressValue={75} inverse
progressWhite progress={{ value: 75 }}
className="mb-4" className="mb-4"
/> />
</CCol> </CCol>
<CCol sm={6} md={2}> <CCol sm={6} md={2}>
<CWidgetProgressIcon <CWidgetStatsC
color="warning" color="warning"
icon={<CIcon icon={cilBasket} height={36} />} icon={<CIcon icon={cilBasket} height={36} />}
value="1238" value="1238"
title="Products sold" title="Products sold"
progressValue={75} inverse
progressWhite progress={{ value: 75 }}
className="mb-4" className="mb-4"
/> />
</CCol> </CCol>
<CCol sm={6} md={2}> <CCol sm={6} md={2}>
<CWidgetProgressIcon <CWidgetStatsC
color="primary" color="primary"
icon={<CIcon icon={cilChartPie} height={36} />} icon={<CIcon icon={cilChartPie} height={36} />}
value="28%" value="28%"
title="Returning Visitors" title="Returning Visitors"
progressValue={75} inverse
progressWhite progress={{ value: 75 }}
className="mb-4" className="mb-4"
/> />
</CCol> </CCol>
<CCol sm={6} md={2}> <CCol sm={6} md={2}>
<CWidgetProgressIcon <CWidgetStatsC
color="danger" color="danger"
icon={<CIcon icon={cilSpeedometer} height={36} />} icon={<CIcon icon={cilSpeedometer} height={36} />}
value="5:34:11" value="5:34:11"
title="Avg. Time" title="Avg. Time"
progressValue={75} inverse
progressWhite progress={{ value: 75 }}
className="mb-4" className="mb-4"
/> />
</CCol> </CCol>
<CCol sm={6} md={2}> <CCol sm={6} md={2}>
<CWidgetProgressIcon <CWidgetStatsC
color="info" color="info"
icon={<CIcon icon={cilSpeech} height={36} />} icon={<CIcon icon={cilSpeech} height={36} />}
value="972" value="972"
title="comments" title="comments"
progressValue={75} inverse
progressWhite progress={{ value: 75 }}
className="mb-4" className="mb-4"
/> />
</CCol> </CCol>

74
src/views/components/widgets/WidgetsBrand.js
View File

@ -1,6 +1,6 @@
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 { CWidgetStatsD, CRow, CCol } from '@coreui/react'
import CIcon from '@coreui/icons-react' import CIcon from '@coreui/icons-react'
import { cibFacebook, cibLinkedin, cibTwitter, cilCalendar } from '@coreui/icons' import { cibFacebook, cibLinkedin, cibTwitter, cilCalendar } from '@coreui/icons'
import { CChart } from '@coreui/react-chartjs' import { CChart } from '@coreui/react-chartjs'
@ -37,12 +37,10 @@ const WidgetsBrand = ({ withCharts }) => {
return ( return (
<CRow> <CRow>
<CCol sm={6} lg={3}> <CCol sm={6} lg={3}>
<CWidgetBrand <CWidgetStatsD
className="mb-4" className="mb-4"
headerChildren={ {...(withCharts && {
<> chart: (
<CIcon icon={cibFacebook} height={52} className="my-4 text-white" />
{withCharts && (
<CChart <CChart
className="position-absolute w-100 h-100" className="position-absolute w-100 h-100"
type="line" type="line"
@ -61,12 +59,12 @@ const WidgetsBrand = ({ withCharts }) => {
}} }}
options={chartOptions} options={chartOptions}
/> />
)} ),
</> })}
} icon={<CIcon icon={cibFacebook} height={52} className="my-4 text-white" />}
values={[ values={[
['89k', 'friends'], { title: 'friends', value: '89K' },
['459', 'feeds'], { title: 'feeds', value: '459' },
]} ]}
style={{ style={{
'--cui-card-cap-bg': '#3b5998', '--cui-card-cap-bg': '#3b5998',
@ -75,12 +73,10 @@ const WidgetsBrand = ({ withCharts }) => {
</CCol> </CCol>
<CCol sm={6} lg={3}> <CCol sm={6} lg={3}>
<CWidgetBrand <CWidgetStatsD
className="mb-4" className="mb-4"
headerChildren={ {...(withCharts && {
<> chart: (
<CIcon icon={cibTwitter} height={52} className="my-4 text-white" />
{withCharts && (
<CChart <CChart
className="position-absolute w-100 h-100" className="position-absolute w-100 h-100"
type="line" type="line"
@ -99,12 +95,12 @@ const WidgetsBrand = ({ withCharts }) => {
}} }}
options={chartOptions} options={chartOptions}
/> />
)} ),
</> })}
} icon={<CIcon icon={cibTwitter} height={52} className="my-4 text-white" />}
values={[ values={[
['973k', 'followers'], { title: 'followers', value: '973k' },
['1.792', 'tweets'], { title: 'tweets', value: '1.792' },
]} ]}
style={{ style={{
'--cui-card-cap-bg': '#00aced', '--cui-card-cap-bg': '#00aced',
@ -113,12 +109,10 @@ const WidgetsBrand = ({ withCharts }) => {
</CCol> </CCol>
<CCol sm={6} lg={3}> <CCol sm={6} lg={3}>
<CWidgetBrand <CWidgetStatsD
className="mb-4" className="mb-4"
headerChildren={ {...(withCharts && {
<> chart: (
<CIcon icon={cibLinkedin} height={52} className="my-4 text-white" />
{withCharts && (
<CChart <CChart
className="position-absolute w-100 h-100" className="position-absolute w-100 h-100"
type="line" type="line"
@ -137,12 +131,12 @@ const WidgetsBrand = ({ withCharts }) => {
}} }}
options={chartOptions} options={chartOptions}
/> />
)} ),
</> })}
} icon={<CIcon icon={cibLinkedin} height={52} className="my-4 text-white" />}
values={[ values={[
['500+', 'contacts'], { title: 'contacts', value: '500' },
['292', 'feeds'], { title: 'feeds', value: '1.292' },
]} ]}
style={{ style={{
'--cui-card-cap-bg': '#4875b4', '--cui-card-cap-bg': '#4875b4',
@ -151,13 +145,11 @@ const WidgetsBrand = ({ withCharts }) => {
</CCol> </CCol>
<CCol sm={6} lg={3}> <CCol sm={6} lg={3}>
<CWidgetBrand <CWidgetStatsD
className="mb-4" className="mb-4"
color="warning" color="warning"
headerChildren={ {...(withCharts && {
<> chart: (
<CIcon icon={cilCalendar} height={52} className="my-4 text-white" />
{withCharts && (
<CChart <CChart
className="position-absolute w-100 h-100" className="position-absolute w-100 h-100"
type="line" type="line"
@ -176,12 +168,12 @@ const WidgetsBrand = ({ withCharts }) => {
}} }}
options={chartOptions} options={chartOptions}
/> />
)} ),
</> })}
} icon={<CIcon icon={cilCalendar} height={52} className="my-4 text-white" />}
values={[ values={[
['12+', 'events'], { title: 'events', value: '12+' },
['4', 'meetings'], { title: 'meetings', value: '4' },
]} ]}
/> />
</CCol> </CCol>

34
src/views/components/widgets/WidgetsDropdown.js
View File

@ -6,7 +6,7 @@ import {
CDropdownMenu, CDropdownMenu,
CDropdownItem, CDropdownItem,
CDropdownToggle, CDropdownToggle,
CWidgetDropdown, CWidgetStatsA,
} from '@coreui/react' } from '@coreui/react'
import { getStyle } from '@coreui/utils' import { getStyle } from '@coreui/utils'
import { CChartBar, CChartLine } from '@coreui/react-chartjs' import { CChartBar, CChartLine } from '@coreui/react-chartjs'
@ -17,13 +17,15 @@ const WidgetsDropdown = () => {
return ( return (
<CRow> <CRow>
<CCol sm={6} lg={3}> <CCol sm={6} lg={3}>
<CWidgetDropdown <CWidgetStatsA
className="mb-4" className="mb-4"
color="primary" color="primary"
value="26K" value={
change={
<> <>
26K{' '}
<span className="fs-6 fw-normal">
(-12.4% <CIcon icon={cilArrowBottom} />) (-12.4% <CIcon icon={cilArrowBottom} />)
</span>
</> </>
} }
title="Users" title="Users"
@ -102,13 +104,15 @@ const WidgetsDropdown = () => {
/> />
</CCol> </CCol>
<CCol sm={6} lg={3}> <CCol sm={6} lg={3}>
<CWidgetDropdown <CWidgetStatsA
className="mb-4" className="mb-4"
color="info" color="info"
value="$6.200" value={
change={
<> <>
$6.200{' '}
<span className="fs-6 fw-normal">
(40.9% <CIcon icon={cilArrowTop} />) (40.9% <CIcon icon={cilArrowTop} />)
</span>
</> </>
} }
title="Income" title="Income"
@ -186,13 +190,15 @@ const WidgetsDropdown = () => {
/> />
</CCol> </CCol>
<CCol sm={6} lg={3}> <CCol sm={6} lg={3}>
<CWidgetDropdown <CWidgetStatsA
className="mb-4" className="mb-4"
color="warning" color="warning"
value="2.49%" value={
change={
<> <>
2.49{' '}
<span className="fs-6 fw-normal">
(84.7% <CIcon icon={cilArrowTop} />) (84.7% <CIcon icon={cilArrowTop} />)
</span>
</> </>
} }
title="Conversion Rate" title="Conversion Rate"
@ -257,13 +263,15 @@ const WidgetsDropdown = () => {
/> />
</CCol> </CCol>
<CCol sm={6} lg={3}> <CCol sm={6} lg={3}>
<CWidgetDropdown <CWidgetStatsA
className="mb-4" className="mb-4"
color="danger" color="danger"
value="44K" value={
change={
<> <>
44K{' '}
<span className="fs-6 fw-normal">
(-23.6% <CIcon icon={cilArrowBottom} />) (-23.6% <CIcon icon={cilArrowBottom} />)
</span>
</> </>
} }
title="Sessions" title="Sessions"

41
yarn.lock
View File

@ -1222,7 +1222,7 @@
resolved "https://registry.yarnpkg.com/@coreui/coreui/-/coreui-4.0.0.tgz#52ebe0197411a829ba48057ade61923e05859eec" resolved "https://registry.yarnpkg.com/@coreui/coreui/-/coreui-4.0.0.tgz#52ebe0197411a829ba48057ade61923e05859eec"
integrity sha512-8vH6fJrmvCR/Oy5v0E+/1AL3Ygb4jhQ7NXK2fMYWJyK13BePDm9muB3y6S0IdqkpBwjY3hHVwHyt2lJqJdesmQ== integrity sha512-8vH6fJrmvCR/Oy5v0E+/1AL3Ygb4jhQ7NXK2fMYWJyK13BePDm9muB3y6S0IdqkpBwjY3hHVwHyt2lJqJdesmQ==
"@coreui/coreui@4.0.1", "@coreui/coreui@^4.0.1": "@coreui/coreui@4.0.1":
version "4.0.1" version "4.0.1"
resolved "https://registry.yarnpkg.com/@coreui/coreui/-/coreui-4.0.1.tgz#e5faf540aeea31b0cc8d428d73080a364e4bc6fd" resolved "https://registry.yarnpkg.com/@coreui/coreui/-/coreui-4.0.1.tgz#e5faf540aeea31b0cc8d428d73080a364e4bc6fd"
integrity sha512-1mrWnbqoWb7+8ZAMUdlWt0AqVzDEkJglk7F3OaFsQtxienezFvlMNsd1YPPNo+taRzF7HZ8xSDIAItCvlOaMVg== integrity sha512-1mrWnbqoWb7+8ZAMUdlWt0AqVzDEkJglk7F3OaFsQtxienezFvlMNsd1YPPNo+taRzF7HZ8xSDIAItCvlOaMVg==
@ -1252,12 +1252,10 @@
"@coreui/chartjs" "^3.0.0" "@coreui/chartjs" "^3.0.0"
chart.js "^3.4.1" chart.js "^3.4.1"
"@coreui/react@4.0.0-beta.4": "@coreui/react@4.0.0-rc.0":
version "4.0.0-beta.4" version "4.0.0-rc.0"
resolved "https://registry.yarnpkg.com/@coreui/react/-/react-4.0.0-beta.4.tgz#b41b5270707784a200bf39b0008d4a324cc98dec" resolved "https://registry.yarnpkg.com/@coreui/react/-/react-4.0.0-rc.0.tgz#a5bcc13f13e1acec273ffb32f085452d2a7da116"
integrity sha512-yjbAk5u3G2w/gJn+tfE/6mQagQoFp94EghHaes4E7GJlGcHwdfTp5AB5nRZp9DvYFy4vm3WsqWGD4yfQ34oilA== integrity sha512-vJ8MqBChFfxtYqmvFzcxwNU+98LniLlGmaIrY7Xa7Ckr29ZRh1d4aBJhM1gGtE2kefsra4B8hzw/6rzEXYdLlQ==
dependencies:
"@coreui/coreui" "^4.0.1"
"@coreui/utils@^1.3.1": "@coreui/utils@^1.3.1":
version "1.3.1" version "1.3.1"
@ -3276,11 +3274,16 @@ char-regex@^1.0.2:
resolved "https://registry.yarnpkg.com/char-regex/-/char-regex-1.0.2.tgz#d744358226217f981ed58f479b1d6bcc29545dcf" resolved "https://registry.yarnpkg.com/char-regex/-/char-regex-1.0.2.tgz#d744358226217f981ed58f479b1d6bcc29545dcf"
integrity sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw== integrity sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==
chart.js@^3.4.0, chart.js@^3.4.1, chart.js@^3.5.0: chart.js@^3.4.0, chart.js@^3.4.1:
version "3.5.0" version "3.5.0"
resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-3.5.0.tgz#6eb075332d4ebbbb20a94e5a07a234052ed6c4fb" resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-3.5.0.tgz#6eb075332d4ebbbb20a94e5a07a234052ed6c4fb"
integrity sha512-J1a4EAb1Gi/KbhwDRmoovHTRuqT8qdF0kZ4XgwxpGethJHUdDrkqyPYwke0a+BuvSeUxPf8Cos6AX2AB8H8GLA== integrity sha512-J1a4EAb1Gi/KbhwDRmoovHTRuqT8qdF0kZ4XgwxpGethJHUdDrkqyPYwke0a+BuvSeUxPf8Cos6AX2AB8H8GLA==
chart.js@^3.5.1:
version "3.5.1"
resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-3.5.1.tgz#73e24d23a4134a70ccdb5e79a917f156b6f3644a"
integrity sha512-m5kzt72I1WQ9LILwQC4syla/LD/N413RYv2Dx2nnTkRS9iv/ey1xLTt0DnPc/eWV4zI+BgEgDYBIzbQhZHc/PQ==
check-types@^11.1.1: check-types@^11.1.1:
version "11.1.2" version "11.1.2"
resolved "https://registry.yarnpkg.com/check-types/-/check-types-11.1.2.tgz#86a7c12bf5539f6324eb0e70ca8896c0e38f3e2f" resolved "https://registry.yarnpkg.com/check-types/-/check-types-11.1.2.tgz#86a7c12bf5539f6324eb0e70ca8896c0e38f3e2f"
@ -3674,11 +3677,16 @@ core-js@^2.4.0:
resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec" resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ== integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
core-js@^3.0.1, core-js@^3.16.1, core-js@^3.6.5: core-js@^3.0.1, core-js@^3.6.5:
version "3.16.1" version "3.16.1"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.16.1.tgz#f4485ce5c9f3c6a7cb18fa80488e08d362097249" resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.16.1.tgz#f4485ce5c9f3c6a7cb18fa80488e08d362097249"
integrity sha512-AAkP8i35EbefU+JddyWi12AWE9f2N/qr/pwnDtWz4nyUIBGMJPX99ANFFRSw6FefM374lDujdtLDyhN2A/btHw== integrity sha512-AAkP8i35EbefU+JddyWi12AWE9f2N/qr/pwnDtWz4nyUIBGMJPX99ANFFRSw6FefM374lDujdtLDyhN2A/btHw==
core-js@^3.16.2:
version "3.16.2"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.16.2.tgz#3f485822889c7fc48ef463e35be5cc2a4a01a1f4"
integrity sha512-P0KPukO6OjMpjBtHSceAZEWlDD1M2Cpzpg6dBbrjFqFhBHe/BwhxaP820xKOjRn/lZRQirrCusIpLS/n2sgXLQ==
core-util-is@~1.0.0: core-util-is@~1.0.0:
version "1.0.2" version "1.0.2"
resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7" resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@ -4718,6 +4726,13 @@ eslint-plugin-prettier@^3.4.0:
dependencies: dependencies:
prettier-linter-helpers "^1.0.0" prettier-linter-helpers "^1.0.0"
eslint-plugin-prettier@^3.4.1:
version "3.4.1"
resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-3.4.1.tgz#e9ddb200efb6f3d05ffe83b1665a716af4a387e5"
integrity sha512-htg25EUYUeIhKHXjOinK4BgCcDwtLHjqaxCDsMy5nbnUMkKFvIhMVCp+5GFUXQ4Nr8lBsPqtGAqBenbpFqAA2g==
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#8c229c268d468956334c943bb45fc860280f5556" resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.2.0.tgz#8c229c268d468956334c943bb45fc860280f5556"
@ -9973,10 +9988,10 @@ sass-loader@^10.0.5:
schema-utils "^3.0.0" schema-utils "^3.0.0"
semver "^7.3.2" semver "^7.3.2"
sass@^1.37.5: sass@^1.38.0:
version "1.37.5" version "1.38.0"
resolved "https://registry.yarnpkg.com/sass/-/sass-1.37.5.tgz#f6838351f7cc814c4fcfe1d9a20e0cabbd1e7b3c" resolved "https://registry.yarnpkg.com/sass/-/sass-1.38.0.tgz#2f3e60a1efdcdc910586fa79dc89d3399a145b4f"
integrity sha512-Cx3ewxz9QB/ErnVIiWg2cH0kiYZ0FPvheDTVC6BsiEGBTZKKZJ1Gq5Kq6jy3PKtL6+EJ8NIoaBW/RSd2R6cZOA== integrity sha512-WBccZeMigAGKoI+NgD7Adh0ab1HUq+6BmyBUEaGxtErbUtWUevEbdgo5EZiJQofLUGcKtlNaO2IdN73AHEua5g==
dependencies: dependencies:
chokidar ">=3.0.0 <4.0.0" chokidar ">=3.0.0 <4.0.0"