refactor: update to @coreui/react@v4.0.0-rc.0
This commit is contained in:
Łukasz Holeczek
parent
e34547654e
commit
c41bb25b4e
10
package.json
10
package.json
@ -30,13 +30,13 @@
|
||||
"@coreui/coreui": "4.0.1",
|
||||
"@coreui/icons": "^2.0.1",
|
||||
"@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/utils": "^1.3.1",
|
||||
"@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
|
||||
"chart.js": "^3.5.0",
|
||||
"chart.js": "^3.5.1",
|
||||
"classnames": "^2.3.1",
|
||||
"core-js": "^3.16.1",
|
||||
"core-js": "^3.16.2",
|
||||
"enzyme": "^3.11.0",
|
||||
"prop-types": "^15.7.2",
|
||||
"react": "^17.0.2",
|
||||
@ -51,10 +51,10 @@
|
||||
"auto-changelog": "~2.3.0",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-config-prettier": "^8.3.0",
|
||||
"eslint-plugin-prettier": "^3.4.0",
|
||||
"eslint-plugin-prettier": "^3.4.1",
|
||||
"prettier": "2.3.2",
|
||||
"react-scripts": "^4.0.3",
|
||||
"sass": "^1.37.5"
|
||||
"sass": "^1.38.0"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
|
||||
@ -4,10 +4,10 @@ import {
|
||||
CCol,
|
||||
CLink,
|
||||
CRow,
|
||||
CWidgetIcon,
|
||||
CWidgetProgress,
|
||||
CWidgetProgressIcon,
|
||||
CWidgetSimple,
|
||||
CWidgetStatsB,
|
||||
CWidgetStatsC,
|
||||
CWidgetStatsE,
|
||||
CWidgetStatsF,
|
||||
} from '@coreui/react'
|
||||
import { getStyle } from '@coreui/utils'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
@ -38,101 +38,114 @@ const Widgets = () => {
|
||||
<WidgetsDropdown />
|
||||
<CRow>
|
||||
<CCol xs={12} sm={6} lg={3}>
|
||||
<CWidgetProgress
|
||||
<CWidgetStatsB
|
||||
className="mb-4"
|
||||
value="89.9%"
|
||||
title="Widget title"
|
||||
progressColor="success"
|
||||
progressValue={89.9}
|
||||
progress={{ color: 'success', value: 89.9 }}
|
||||
text="Lorem ipsum dolor sit amet enim."
|
||||
title="Widget title"
|
||||
value="89.9%"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol xs={12} sm={6} lg={3}>
|
||||
<CWidgetProgress
|
||||
<CWidgetStatsB
|
||||
className="mb-4"
|
||||
value="12.124"
|
||||
title="Widget title"
|
||||
progressColor="info"
|
||||
progressValue={89.9}
|
||||
progress={{ color: 'info', value: 89.9 }}
|
||||
text="Lorem ipsum dolor sit amet enim."
|
||||
/>
|
||||
</CCol>
|
||||
<CCol xs={12} sm={6} lg={3}>
|
||||
<CWidgetProgress
|
||||
<CWidgetStatsB
|
||||
className="mb-4"
|
||||
value="$98.111,00"
|
||||
title="Widget title"
|
||||
progressColor="warning"
|
||||
progressValue={89.9}
|
||||
progress={{ color: 'warning', value: 89.9 }}
|
||||
text="Lorem ipsum dolor sit amet enim."
|
||||
/>
|
||||
</CCol>
|
||||
<CCol xs={12} sm={6} lg={3}>
|
||||
<CWidgetProgress
|
||||
<CWidgetStatsB
|
||||
className="mb-4"
|
||||
value="2 TB"
|
||||
title="Widget title"
|
||||
progressValue={89.9}
|
||||
progress={{ color: 'primary', value: 89.9 }}
|
||||
text="Lorem ipsum dolor sit amet enim."
|
||||
/>
|
||||
</CCol>
|
||||
<CCol xs={12} sm={6} lg={3}>
|
||||
<CWidgetProgress
|
||||
<CWidgetStatsB
|
||||
className="mb-4"
|
||||
color="success"
|
||||
textColor="white"
|
||||
inverse
|
||||
value="89.9%"
|
||||
title="Widget title"
|
||||
progressWhite
|
||||
progressValue={89.9}
|
||||
progress={{ value: 89.9 }}
|
||||
text="Lorem ipsum dolor sit amet enim."
|
||||
/>
|
||||
</CCol>
|
||||
<CCol xs={12} sm={6} lg={3}>
|
||||
<CWidgetProgress
|
||||
<CWidgetStatsB
|
||||
className="mb-4"
|
||||
color="info"
|
||||
inverse
|
||||
textColor="white"
|
||||
value="12.124"
|
||||
title="Widget title"
|
||||
progressWhite
|
||||
progressValue={89.9}
|
||||
progress={{ value: 89.9 }}
|
||||
text="Lorem ipsum dolor sit amet enim."
|
||||
/>
|
||||
</CCol>
|
||||
<CCol xs={12} sm={6} lg={3}>
|
||||
<CWidgetProgress
|
||||
<CWidgetStatsB
|
||||
className="mb-4"
|
||||
color="warning"
|
||||
inverse
|
||||
textColor="white"
|
||||
value="$98.111,00"
|
||||
title="Widget title"
|
||||
progressWhite
|
||||
progressValue={89.9}
|
||||
progress={{ value: 89.9 }}
|
||||
text="Lorem ipsum dolor sit amet enim."
|
||||
/>
|
||||
</CCol>
|
||||
<CCol xs={12} sm={6} lg={3}>
|
||||
<CWidgetProgress
|
||||
<CWidgetStatsB
|
||||
className="mb-4"
|
||||
color="primary"
|
||||
inverse
|
||||
textColor="white"
|
||||
value="2 TB"
|
||||
title="Widget title"
|
||||
progressWhite
|
||||
progressValue={89.9}
|
||||
progress={{ value: 89.9 }}
|
||||
text="Lorem ipsum dolor sit amet enim."
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol sm={4} lg={2}>
|
||||
<CWidgetSimple title="title" value="1,123" className="mb-4">
|
||||
<CWidgetStatsE
|
||||
chart={
|
||||
<CChartBar
|
||||
className="mx-auto"
|
||||
style={{ height: '40px', width: '80px' }}
|
||||
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: [
|
||||
{
|
||||
backgroundColor: getStyle('--cui-danger'),
|
||||
@ -175,15 +188,36 @@ const Widgets = () => {
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</CWidgetSimple>
|
||||
}
|
||||
className="mb-4"
|
||||
title="title"
|
||||
value="1,123"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol sm={4} lg={2}>
|
||||
<CWidgetSimple title="title" value="1,123" className="mb-4">
|
||||
<CWidgetStatsE
|
||||
chart={
|
||||
<CChartBar
|
||||
className="mx-auto"
|
||||
style={{ height: '40px', width: '80px' }}
|
||||
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: [
|
||||
{
|
||||
backgroundColor: getStyle('--cui-primary'),
|
||||
@ -226,15 +260,36 @@ const Widgets = () => {
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</CWidgetSimple>
|
||||
}
|
||||
className="mb-4"
|
||||
title="title"
|
||||
value="1,123"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol sm={4} lg={2}>
|
||||
<CWidgetSimple title="title" value="1,123" className="mb-4">
|
||||
<CWidgetStatsE
|
||||
chart={
|
||||
<CChartBar
|
||||
className="mx-auto"
|
||||
style={{ height: '40px', width: '80px' }}
|
||||
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: [
|
||||
{
|
||||
backgroundColor: getStyle('--cui-success'),
|
||||
@ -277,15 +332,36 @@ const Widgets = () => {
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</CWidgetSimple>
|
||||
}
|
||||
className="mb-4"
|
||||
title="title"
|
||||
value="1,123"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol sm={4} lg={2}>
|
||||
<CWidgetSimple title="title" value="1,123" className="mb-4">
|
||||
<CWidgetStatsE
|
||||
chart={
|
||||
<CChartLine
|
||||
className="mx-auto"
|
||||
style={{ height: '40px', width: '80px' }}
|
||||
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: [
|
||||
{
|
||||
backgroundColor: 'transparent',
|
||||
@ -336,15 +412,36 @@ const Widgets = () => {
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</CWidgetSimple>
|
||||
}
|
||||
className="mb-4"
|
||||
title="title"
|
||||
value="1,123"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol sm={4} lg={2}>
|
||||
<CWidgetSimple title="title" value="1,123" className="mb-4">
|
||||
<CWidgetStatsE
|
||||
chart={
|
||||
<CChartLine
|
||||
className="mx-auto"
|
||||
style={{ height: '40px', width: '80px' }}
|
||||
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: [
|
||||
{
|
||||
backgroundColor: 'transparent',
|
||||
@ -395,15 +492,36 @@ const Widgets = () => {
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</CWidgetSimple>
|
||||
}
|
||||
className="mb-4"
|
||||
title="title"
|
||||
value="1,123"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol sm={4} lg={2}>
|
||||
<CWidgetSimple title="title" value="1,123" className="mb-4">
|
||||
<CWidgetStatsE
|
||||
chart={
|
||||
<CChartLine
|
||||
className="mx-auto"
|
||||
style={{ height: '40px', width: '80px' }}
|
||||
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: [
|
||||
{
|
||||
backgroundColor: 'transparent',
|
||||
@ -454,55 +572,54 @@ const Widgets = () => {
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</CWidgetSimple>
|
||||
}
|
||||
className="mb-4"
|
||||
title="title"
|
||||
value="1,123"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol xs={12} sm={6} lg={3}>
|
||||
<CWidgetIcon
|
||||
<CWidgetStatsF
|
||||
className="mb-3"
|
||||
icon={<CIcon width={24} icon={cilSettings} size="xl" />}
|
||||
iconPadding={3}
|
||||
title="income"
|
||||
value="$1.999,50"
|
||||
color="primary"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol xs={12} sm={6} lg={3}>
|
||||
<CWidgetIcon
|
||||
<CWidgetStatsF
|
||||
className="mb-3"
|
||||
icon={<CIcon width={24} icon={cilUser} size="xl" />}
|
||||
iconPadding={3}
|
||||
title="income"
|
||||
value="$1.999,50"
|
||||
color="info"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol xs={12} sm={6} lg={3}>
|
||||
<CWidgetIcon
|
||||
<CWidgetStatsF
|
||||
className="mb-3"
|
||||
icon={<CIcon width={24} icon={cilMoon} size="xl" />}
|
||||
iconPadding={3}
|
||||
title="income"
|
||||
value="$1.999,50"
|
||||
color="warning"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol xs={12} sm={6} lg={3}>
|
||||
<CWidgetIcon
|
||||
<CWidgetStatsF
|
||||
className="mb-3"
|
||||
icon={<CIcon width={24} icon={cilBell} size="xl" />}
|
||||
iconPadding={3}
|
||||
title="income"
|
||||
value="$1.999,50"
|
||||
color="danger"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol xs={12} sm={6} lg={3}>
|
||||
<CWidgetIcon
|
||||
<CWidgetStatsF
|
||||
className="mb-3"
|
||||
icon={<CIcon width={24} icon={cilSettings} size="xl" />}
|
||||
iconPadding={3}
|
||||
title="income"
|
||||
value="$1.999,50"
|
||||
color="primary"
|
||||
@ -520,10 +637,9 @@ const Widgets = () => {
|
||||
/>
|
||||
</CCol>
|
||||
<CCol xs={12} sm={6} lg={3}>
|
||||
<CWidgetIcon
|
||||
<CWidgetStatsF
|
||||
className="mb-3"
|
||||
icon={<CIcon width={24} icon={cilLaptop} size="xl" />}
|
||||
iconPadding={3}
|
||||
title="income"
|
||||
value="$1.999,50"
|
||||
color="info"
|
||||
@ -541,10 +657,9 @@ const Widgets = () => {
|
||||
/>
|
||||
</CCol>
|
||||
<CCol xs={12} sm={6} lg={3}>
|
||||
<CWidgetIcon
|
||||
<CWidgetStatsF
|
||||
className="mb-3"
|
||||
icon={<CIcon width={24} icon={cilMoon} size="xl" />}
|
||||
iconPadding={3}
|
||||
title="income"
|
||||
value="$1.999,50"
|
||||
color="warning"
|
||||
@ -562,10 +677,9 @@ const Widgets = () => {
|
||||
/>
|
||||
</CCol>
|
||||
<CCol xs={12} sm={6} lg={3}>
|
||||
<CWidgetIcon
|
||||
<CWidgetStatsF
|
||||
className="mb-3"
|
||||
icon={<CIcon width={24} icon={cilBell} size="xl" />}
|
||||
iconPadding={3}
|
||||
title="income"
|
||||
value="$1.999,50"
|
||||
color="danger"
|
||||
@ -583,44 +697,40 @@ const Widgets = () => {
|
||||
/>
|
||||
</CCol>
|
||||
<CCol xs={12} sm={6} lg={3}>
|
||||
<CWidgetIcon
|
||||
<CWidgetStatsF
|
||||
className="mb-3"
|
||||
padding={0}
|
||||
icon={<CIcon width={24} icon={cilSettings} size="xl" />}
|
||||
iconPadding={4}
|
||||
padding={false}
|
||||
title="income"
|
||||
value="$1.999,50"
|
||||
color="primary"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol xs={12} sm={6} lg={3}>
|
||||
<CWidgetIcon
|
||||
<CWidgetStatsF
|
||||
className="mb-3"
|
||||
padding={0}
|
||||
icon={<CIcon width={24} icon={cilUser} size="xl" />}
|
||||
iconPadding={4}
|
||||
padding={false}
|
||||
title="income"
|
||||
value="$1.999,50"
|
||||
color="info"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol xs={12} sm={6} lg={3}>
|
||||
<CWidgetIcon
|
||||
<CWidgetStatsF
|
||||
className="mb-3"
|
||||
padding={0}
|
||||
icon={<CIcon width={24} icon={cilMoon} size="xl" />}
|
||||
iconPadding={4}
|
||||
padding={false}
|
||||
title="income"
|
||||
value="$1.999,50"
|
||||
color="warning"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol xs={12} sm={6} lg={3}>
|
||||
<CWidgetIcon
|
||||
<CWidgetStatsF
|
||||
className="mb-3"
|
||||
padding={0}
|
||||
icon={<CIcon width={24} icon={cilBell} size="xl" />}
|
||||
iconPadding={4}
|
||||
padding={false}
|
||||
title="income"
|
||||
value="$1.999,50"
|
||||
color="danger"
|
||||
@ -630,167 +740,157 @@ const Widgets = () => {
|
||||
<WidgetsBrand />
|
||||
<WidgetsBrand withCharts />
|
||||
<CCardGroup className="mb-4">
|
||||
<CWidgetProgressIcon
|
||||
<CWidgetStatsC
|
||||
icon={<CIcon icon={cilPeople} height={36} />}
|
||||
value="87.500"
|
||||
title="Visitors"
|
||||
progressColor="info"
|
||||
progressValue={75}
|
||||
progress={{ color: 'info', value: 75 }}
|
||||
/>
|
||||
<CWidgetProgressIcon
|
||||
<CWidgetStatsC
|
||||
icon={<CIcon icon={cilUserFollow} height={36} />}
|
||||
value="385"
|
||||
title="New Clients"
|
||||
progressColor="success"
|
||||
progressValue={75}
|
||||
progress={{ color: 'success', value: 75 }}
|
||||
/>
|
||||
<CWidgetProgressIcon
|
||||
<CWidgetStatsC
|
||||
icon={<CIcon icon={cilBasket} height={36} />}
|
||||
value="1238"
|
||||
title="Products sold"
|
||||
progressColor="warning"
|
||||
progressValue={75}
|
||||
progress={{ color: 'warning', value: 75 }}
|
||||
/>
|
||||
<CWidgetProgressIcon
|
||||
<CWidgetStatsC
|
||||
icon={<CIcon icon={cilChartPie} height={36} />}
|
||||
value="28%"
|
||||
title="Returning Visitors"
|
||||
progressValue={75}
|
||||
progress={{ color: 'primary', value: 75 }}
|
||||
/>
|
||||
<CWidgetProgressIcon
|
||||
<CWidgetStatsC
|
||||
icon={<CIcon icon={cilSpeedometer} height={36} />}
|
||||
value="5:34:11"
|
||||
title="Avg. Time"
|
||||
progressColor="danger"
|
||||
progressValue={75}
|
||||
progress={{ color: 'danger', value: 75 }}
|
||||
/>
|
||||
</CCardGroup>
|
||||
<CRow>
|
||||
<CCol sm={6} md={2}>
|
||||
<CWidgetProgressIcon
|
||||
<CWidgetStatsC
|
||||
icon={<CIcon icon={cilPeople} height={36} />}
|
||||
value="87.500"
|
||||
title="Visitors"
|
||||
progressColor="info"
|
||||
progressValue={75}
|
||||
progress={{ color: 'info', value: 75 }}
|
||||
className="mb-4"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol sm={6} md={2}>
|
||||
<CWidgetProgressIcon
|
||||
<CWidgetStatsC
|
||||
icon={<CIcon icon={cilUserFollow} height={36} />}
|
||||
value="385"
|
||||
title="New Clients"
|
||||
progressColor="success"
|
||||
progressValue={75}
|
||||
progress={{ color: 'success', value: 75 }}
|
||||
className="mb-4"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol sm={6} md={2}>
|
||||
<CWidgetProgressIcon
|
||||
<CWidgetStatsC
|
||||
icon={<CIcon icon={cilBasket} height={36} />}
|
||||
value="1238"
|
||||
title="Products sold"
|
||||
progressColor="warning"
|
||||
progressValue={75}
|
||||
progress={{ color: 'warning', value: 75 }}
|
||||
className="mb-4"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol sm={6} md={2}>
|
||||
<CWidgetProgressIcon
|
||||
<CWidgetStatsC
|
||||
icon={<CIcon icon={cilChartPie} height={36} />}
|
||||
value="28%"
|
||||
title="Returning Visitors"
|
||||
progressColor="primary"
|
||||
progressValue={75}
|
||||
progress={{ color: 'primary', value: 75 }}
|
||||
className="mb-4"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol sm={6} md={2}>
|
||||
<CWidgetProgressIcon
|
||||
<CWidgetStatsC
|
||||
icon={<CIcon icon={cilSpeedometer} height={36} />}
|
||||
value="5:34:11"
|
||||
title="Avg. Time"
|
||||
progressColor="danger"
|
||||
progressValue={75}
|
||||
progress={{ color: 'danger', value: 75 }}
|
||||
className="mb-4"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol sm={6} md={2}>
|
||||
<CWidgetProgressIcon
|
||||
<CWidgetStatsC
|
||||
icon={<CIcon icon={cilSpeech} height={36} />}
|
||||
value="972"
|
||||
title="comments"
|
||||
progressColor="info"
|
||||
progressValue={75}
|
||||
progress={{ color: 'info', value: 75 }}
|
||||
className="mb-4"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol sm={6} md={2}>
|
||||
<CWidgetProgressIcon
|
||||
<CWidgetStatsC
|
||||
color="info"
|
||||
icon={<CIcon icon={cilPeople} height={36} />}
|
||||
value="87.500"
|
||||
title="Visitors"
|
||||
progressValue={75}
|
||||
progressWhite
|
||||
inverse
|
||||
progress={{ value: 75 }}
|
||||
className="mb-4"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol sm={6} md={2}>
|
||||
<CWidgetProgressIcon
|
||||
<CWidgetStatsC
|
||||
color="success"
|
||||
icon={<CIcon icon={cilUserFollow} height={36} />}
|
||||
value="385"
|
||||
title="New Clients"
|
||||
progressValue={75}
|
||||
progressWhite
|
||||
inverse
|
||||
progress={{ value: 75 }}
|
||||
className="mb-4"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol sm={6} md={2}>
|
||||
<CWidgetProgressIcon
|
||||
<CWidgetStatsC
|
||||
color="warning"
|
||||
icon={<CIcon icon={cilBasket} height={36} />}
|
||||
value="1238"
|
||||
title="Products sold"
|
||||
progressValue={75}
|
||||
progressWhite
|
||||
inverse
|
||||
progress={{ value: 75 }}
|
||||
className="mb-4"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol sm={6} md={2}>
|
||||
<CWidgetProgressIcon
|
||||
<CWidgetStatsC
|
||||
color="primary"
|
||||
icon={<CIcon icon={cilChartPie} height={36} />}
|
||||
value="28%"
|
||||
title="Returning Visitors"
|
||||
progressValue={75}
|
||||
progressWhite
|
||||
inverse
|
||||
progress={{ value: 75 }}
|
||||
className="mb-4"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol sm={6} md={2}>
|
||||
<CWidgetProgressIcon
|
||||
<CWidgetStatsC
|
||||
color="danger"
|
||||
icon={<CIcon icon={cilSpeedometer} height={36} />}
|
||||
value="5:34:11"
|
||||
title="Avg. Time"
|
||||
progressValue={75}
|
||||
progressWhite
|
||||
inverse
|
||||
progress={{ value: 75 }}
|
||||
className="mb-4"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol sm={6} md={2}>
|
||||
<CWidgetProgressIcon
|
||||
<CWidgetStatsC
|
||||
color="info"
|
||||
icon={<CIcon icon={cilSpeech} height={36} />}
|
||||
value="972"
|
||||
title="comments"
|
||||
progressValue={75}
|
||||
progressWhite
|
||||
inverse
|
||||
progress={{ value: 75 }}
|
||||
className="mb-4"
|
||||
/>
|
||||
</CCol>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react'
|
||||
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 { cibFacebook, cibLinkedin, cibTwitter, cilCalendar } from '@coreui/icons'
|
||||
import { CChart } from '@coreui/react-chartjs'
|
||||
@ -37,12 +37,10 @@ const WidgetsBrand = ({ withCharts }) => {
|
||||
return (
|
||||
<CRow>
|
||||
<CCol sm={6} lg={3}>
|
||||
<CWidgetBrand
|
||||
<CWidgetStatsD
|
||||
className="mb-4"
|
||||
headerChildren={
|
||||
<>
|
||||
<CIcon icon={cibFacebook} height={52} className="my-4 text-white" />
|
||||
{withCharts && (
|
||||
{...(withCharts && {
|
||||
chart: (
|
||||
<CChart
|
||||
className="position-absolute w-100 h-100"
|
||||
type="line"
|
||||
@ -61,12 +59,12 @@ const WidgetsBrand = ({ withCharts }) => {
|
||||
}}
|
||||
options={chartOptions}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
}
|
||||
),
|
||||
})}
|
||||
icon={<CIcon icon={cibFacebook} height={52} className="my-4 text-white" />}
|
||||
values={[
|
||||
['89k', 'friends'],
|
||||
['459', 'feeds'],
|
||||
{ title: 'friends', value: '89K' },
|
||||
{ title: 'feeds', value: '459' },
|
||||
]}
|
||||
style={{
|
||||
'--cui-card-cap-bg': '#3b5998',
|
||||
@ -75,12 +73,10 @@ const WidgetsBrand = ({ withCharts }) => {
|
||||
</CCol>
|
||||
|
||||
<CCol sm={6} lg={3}>
|
||||
<CWidgetBrand
|
||||
<CWidgetStatsD
|
||||
className="mb-4"
|
||||
headerChildren={
|
||||
<>
|
||||
<CIcon icon={cibTwitter} height={52} className="my-4 text-white" />
|
||||
{withCharts && (
|
||||
{...(withCharts && {
|
||||
chart: (
|
||||
<CChart
|
||||
className="position-absolute w-100 h-100"
|
||||
type="line"
|
||||
@ -99,12 +95,12 @@ const WidgetsBrand = ({ withCharts }) => {
|
||||
}}
|
||||
options={chartOptions}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
}
|
||||
),
|
||||
})}
|
||||
icon={<CIcon icon={cibTwitter} height={52} className="my-4 text-white" />}
|
||||
values={[
|
||||
['973k', 'followers'],
|
||||
['1.792', 'tweets'],
|
||||
{ title: 'followers', value: '973k' },
|
||||
{ title: 'tweets', value: '1.792' },
|
||||
]}
|
||||
style={{
|
||||
'--cui-card-cap-bg': '#00aced',
|
||||
@ -113,12 +109,10 @@ const WidgetsBrand = ({ withCharts }) => {
|
||||
</CCol>
|
||||
|
||||
<CCol sm={6} lg={3}>
|
||||
<CWidgetBrand
|
||||
<CWidgetStatsD
|
||||
className="mb-4"
|
||||
headerChildren={
|
||||
<>
|
||||
<CIcon icon={cibLinkedin} height={52} className="my-4 text-white" />
|
||||
{withCharts && (
|
||||
{...(withCharts && {
|
||||
chart: (
|
||||
<CChart
|
||||
className="position-absolute w-100 h-100"
|
||||
type="line"
|
||||
@ -137,12 +131,12 @@ const WidgetsBrand = ({ withCharts }) => {
|
||||
}}
|
||||
options={chartOptions}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
}
|
||||
),
|
||||
})}
|
||||
icon={<CIcon icon={cibLinkedin} height={52} className="my-4 text-white" />}
|
||||
values={[
|
||||
['500+', 'contacts'],
|
||||
['292', 'feeds'],
|
||||
{ title: 'contacts', value: '500' },
|
||||
{ title: 'feeds', value: '1.292' },
|
||||
]}
|
||||
style={{
|
||||
'--cui-card-cap-bg': '#4875b4',
|
||||
@ -151,13 +145,11 @@ const WidgetsBrand = ({ withCharts }) => {
|
||||
</CCol>
|
||||
|
||||
<CCol sm={6} lg={3}>
|
||||
<CWidgetBrand
|
||||
<CWidgetStatsD
|
||||
className="mb-4"
|
||||
color="warning"
|
||||
headerChildren={
|
||||
<>
|
||||
<CIcon icon={cilCalendar} height={52} className="my-4 text-white" />
|
||||
{withCharts && (
|
||||
{...(withCharts && {
|
||||
chart: (
|
||||
<CChart
|
||||
className="position-absolute w-100 h-100"
|
||||
type="line"
|
||||
@ -176,12 +168,12 @@ const WidgetsBrand = ({ withCharts }) => {
|
||||
}}
|
||||
options={chartOptions}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
}
|
||||
),
|
||||
})}
|
||||
icon={<CIcon icon={cilCalendar} height={52} className="my-4 text-white" />}
|
||||
values={[
|
||||
['12+', 'events'],
|
||||
['4', 'meetings'],
|
||||
{ title: 'events', value: '12+' },
|
||||
{ title: 'meetings', value: '4' },
|
||||
]}
|
||||
/>
|
||||
</CCol>
|
||||
|
||||
@ -6,7 +6,7 @@ import {
|
||||
CDropdownMenu,
|
||||
CDropdownItem,
|
||||
CDropdownToggle,
|
||||
CWidgetDropdown,
|
||||
CWidgetStatsA,
|
||||
} from '@coreui/react'
|
||||
import { getStyle } from '@coreui/utils'
|
||||
import { CChartBar, CChartLine } from '@coreui/react-chartjs'
|
||||
@ -17,13 +17,15 @@ const WidgetsDropdown = () => {
|
||||
return (
|
||||
<CRow>
|
||||
<CCol sm={6} lg={3}>
|
||||
<CWidgetDropdown
|
||||
<CWidgetStatsA
|
||||
className="mb-4"
|
||||
color="primary"
|
||||
value="26K"
|
||||
change={
|
||||
value={
|
||||
<>
|
||||
26K{' '}
|
||||
<span className="fs-6 fw-normal">
|
||||
(-12.4% <CIcon icon={cilArrowBottom} />)
|
||||
</span>
|
||||
</>
|
||||
}
|
||||
title="Users"
|
||||
@ -102,13 +104,15 @@ const WidgetsDropdown = () => {
|
||||
/>
|
||||
</CCol>
|
||||
<CCol sm={6} lg={3}>
|
||||
<CWidgetDropdown
|
||||
<CWidgetStatsA
|
||||
className="mb-4"
|
||||
color="info"
|
||||
value="$6.200"
|
||||
change={
|
||||
value={
|
||||
<>
|
||||
$6.200{' '}
|
||||
<span className="fs-6 fw-normal">
|
||||
(40.9% <CIcon icon={cilArrowTop} />)
|
||||
</span>
|
||||
</>
|
||||
}
|
||||
title="Income"
|
||||
@ -186,13 +190,15 @@ const WidgetsDropdown = () => {
|
||||
/>
|
||||
</CCol>
|
||||
<CCol sm={6} lg={3}>
|
||||
<CWidgetDropdown
|
||||
<CWidgetStatsA
|
||||
className="mb-4"
|
||||
color="warning"
|
||||
value="2.49%"
|
||||
change={
|
||||
value={
|
||||
<>
|
||||
2.49{' '}
|
||||
<span className="fs-6 fw-normal">
|
||||
(84.7% <CIcon icon={cilArrowTop} />)
|
||||
</span>
|
||||
</>
|
||||
}
|
||||
title="Conversion Rate"
|
||||
@ -257,13 +263,15 @@ const WidgetsDropdown = () => {
|
||||
/>
|
||||
</CCol>
|
||||
<CCol sm={6} lg={3}>
|
||||
<CWidgetDropdown
|
||||
<CWidgetStatsA
|
||||
className="mb-4"
|
||||
color="danger"
|
||||
value="44K"
|
||||
change={
|
||||
value={
|
||||
<>
|
||||
44K{' '}
|
||||
<span className="fs-6 fw-normal">
|
||||
(-23.6% <CIcon icon={cilArrowBottom} />)
|
||||
</span>
|
||||
</>
|
||||
}
|
||||
title="Sessions"
|
||||
|
||||
41
yarn.lock
41
yarn.lock
@ -1222,7 +1222,7 @@
|
||||
resolved "https://registry.yarnpkg.com/@coreui/coreui/-/coreui-4.0.0.tgz#52ebe0197411a829ba48057ade61923e05859eec"
|
||||
integrity sha512-8vH6fJrmvCR/Oy5v0E+/1AL3Ygb4jhQ7NXK2fMYWJyK13BePDm9muB3y6S0IdqkpBwjY3hHVwHyt2lJqJdesmQ==
|
||||
|
||||
"@coreui/coreui@4.0.1", "@coreui/coreui@^4.0.1":
|
||||
"@coreui/coreui@4.0.1":
|
||||
version "4.0.1"
|
||||
resolved "https://registry.yarnpkg.com/@coreui/coreui/-/coreui-4.0.1.tgz#e5faf540aeea31b0cc8d428d73080a364e4bc6fd"
|
||||
integrity sha512-1mrWnbqoWb7+8ZAMUdlWt0AqVzDEkJglk7F3OaFsQtxienezFvlMNsd1YPPNo+taRzF7HZ8xSDIAItCvlOaMVg==
|
||||
@ -1252,12 +1252,10 @@
|
||||
"@coreui/chartjs" "^3.0.0"
|
||||
chart.js "^3.4.1"
|
||||
|
||||
"@coreui/react@4.0.0-beta.4":
|
||||
version "4.0.0-beta.4"
|
||||
resolved "https://registry.yarnpkg.com/@coreui/react/-/react-4.0.0-beta.4.tgz#b41b5270707784a200bf39b0008d4a324cc98dec"
|
||||
integrity sha512-yjbAk5u3G2w/gJn+tfE/6mQagQoFp94EghHaes4E7GJlGcHwdfTp5AB5nRZp9DvYFy4vm3WsqWGD4yfQ34oilA==
|
||||
dependencies:
|
||||
"@coreui/coreui" "^4.0.1"
|
||||
"@coreui/react@4.0.0-rc.0":
|
||||
version "4.0.0-rc.0"
|
||||
resolved "https://registry.yarnpkg.com/@coreui/react/-/react-4.0.0-rc.0.tgz#a5bcc13f13e1acec273ffb32f085452d2a7da116"
|
||||
integrity sha512-vJ8MqBChFfxtYqmvFzcxwNU+98LniLlGmaIrY7Xa7Ckr29ZRh1d4aBJhM1gGtE2kefsra4B8hzw/6rzEXYdLlQ==
|
||||
|
||||
"@coreui/utils@^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"
|
||||
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"
|
||||
resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-3.5.0.tgz#6eb075332d4ebbbb20a94e5a07a234052ed6c4fb"
|
||||
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:
|
||||
version "11.1.2"
|
||||
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"
|
||||
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"
|
||||
resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.16.1.tgz#f4485ce5c9f3c6a7cb18fa80488e08d362097249"
|
||||
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:
|
||||
version "1.0.2"
|
||||
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:
|
||||
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:
|
||||
version "4.2.0"
|
||||
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"
|
||||
semver "^7.3.2"
|
||||
|
||||
sass@^1.37.5:
|
||||
version "1.37.5"
|
||||
resolved "https://registry.yarnpkg.com/sass/-/sass-1.37.5.tgz#f6838351f7cc814c4fcfe1d9a20e0cabbd1e7b3c"
|
||||
integrity sha512-Cx3ewxz9QB/ErnVIiWg2cH0kiYZ0FPvheDTVC6BsiEGBTZKKZJ1Gq5Kq6jy3PKtL6+EJ8NIoaBW/RSd2R6cZOA==
|
||||
sass@^1.38.0:
|
||||
version "1.38.0"
|
||||
resolved "https://registry.yarnpkg.com/sass/-/sass-1.38.0.tgz#2f3e60a1efdcdc910586fa79dc89d3399a145b4f"
|
||||
integrity sha512-WBccZeMigAGKoI+NgD7Adh0ab1HUq+6BmyBUEaGxtErbUtWUevEbdgo5EZiJQofLUGcKtlNaO2IdN73AHEua5g==
|
||||
dependencies:
|
||||
chokidar ">=3.0.0 <4.0.0"
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user