| import React from 'react' |
| import { |
| CCard, |
| CCardBody, |
| CCardGroup, |
| CCardHeader, |
| CCol, |
| CLink, |
| CRow, |
| CWidgetStatsB, |
| CWidgetStatsC, |
| CWidgetStatsE, |
| CWidgetStatsF, |
| } from '@coreui/react' |
| import { getStyle } from '@coreui/utils' |
| import CIcon from '@coreui/icons-react' |
| import { |
| cilArrowRight, |
| cilBasket, |
| cilBell, |
| cilChartPie, |
| cilMoon, |
| cilLaptop, |
| cilPeople, |
| cilSettings, |
| cilSpeech, |
| cilSpeedometer, |
| cilUser, |
| cilUserFollow, |
| } from '@coreui/icons' |
| import { CChartBar, CChartLine } from '@coreui/react-chartjs' |
| import { DocsExample } from 'src/components' |
|
|
| import WidgetsBrand from './WidgetsBrand' |
| import WidgetsDropdown from './WidgetsDropdown' |
|
|
| const Widgets = () => { |
| const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min) |
|
|
| return ( |
| <CCard className="mb-4"> |
| <CCardHeader>Widgets</CCardHeader> |
| <CCardBody> |
| <DocsExample href="components/widgets/#cwidgetstatsa"> |
| <WidgetsDropdown /> |
| </DocsExample> |
| <DocsExample href="components/widgets/#cwidgetstatsb"> |
| <CRow xs={{ gutter: 4 }}> |
| <CCol xs={12} sm={6} xl={4} xxl={3}> |
| <CWidgetStatsB |
| 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} xl={4} xxl={3}> |
| <CWidgetStatsB |
| value="12.124" |
| title="Widget title" |
| progress={{ color: 'info', value: 89.9 }} |
| text="Lorem ipsum dolor sit amet enim." |
| /> |
| </CCol> |
| <CCol xs={12} sm={6} xl={4} xxl={3}> |
| <CWidgetStatsB |
| value="$98.111,00" |
| title="Widget title" |
| progress={{ color: 'warning', value: 89.9 }} |
| text="Lorem ipsum dolor sit amet enim." |
| /> |
| </CCol> |
| <CCol xs={12} sm={6} xl={4} xxl={3}> |
| <CWidgetStatsB |
| value="2 TB" |
| title="Widget title" |
| progress={{ color: 'primary', value: 89.9 }} |
| text="Lorem ipsum dolor sit amet enim." |
| /> |
| </CCol> |
| </CRow> |
| </DocsExample> |
| <DocsExample href="components/widgets/#cwidgetstatsb"> |
| <CRow xs={{ gutter: 4 }}> |
| <CCol xs={12} sm={6} xl={4} xxl={3}> |
| <CWidgetStatsB |
| color="success" |
| inverse |
| value="89.9%" |
| title="Widget title" |
| progress={{ value: 89.9 }} |
| text="Lorem ipsum dolor sit amet enim." |
| /> |
| </CCol> |
| <CCol xs={12} sm={6} xl={4} xxl={3}> |
| <CWidgetStatsB |
| color="info" |
| inverse |
| value="12.124" |
| title="Widget title" |
| progress={{ value: 89.9 }} |
| text="Lorem ipsum dolor sit amet enim." |
| /> |
| </CCol> |
| <CCol xs={12} sm={6} xl={4} xxl={3}> |
| <CWidgetStatsB |
| color="warning" |
| inverse |
| value="$98.111,00" |
| title="Widget title" |
| progress={{ value: 89.9 }} |
| text="Lorem ipsum dolor sit amet enim." |
| /> |
| </CCol> |
| <CCol xs={12} sm={6} xl={4} xxl={3}> |
| <CWidgetStatsB |
| color="primary" |
| inverse |
| value="2 TB" |
| title="Widget title" |
| progress={{ value: 89.9 }} |
| text="Lorem ipsum dolor sit amet enim." |
| /> |
| </CCol> |
| </CRow> |
| </DocsExample> |
| <DocsExample href="components/widgets/#cwidgetstatse"> |
| <CRow xs={{ gutter: 4 }}> |
| <CCol sm={4} md={3} xl={2}> |
| <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', |
| ], |
| datasets: [ |
| { |
| backgroundColor: getStyle('--cui-danger'), |
| borderColor: 'transparent', |
| borderWidth: 1, |
| data: [ |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| ], |
| }, |
| ], |
| }} |
| options={{ |
| maintainAspectRatio: false, |
| plugins: { |
| legend: { |
| display: false, |
| }, |
| }, |
| scales: { |
| x: { |
| display: false, |
| }, |
| y: { |
| display: false, |
| }, |
| }, |
| }} |
| /> |
| } |
| title="title" |
| value="1,123" |
| /> |
| </CCol> |
| <CCol sm={4} md={3} xl={2}> |
| <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', |
| ], |
| datasets: [ |
| { |
| backgroundColor: getStyle('--cui-primary'), |
| borderColor: 'transparent', |
| borderWidth: 1, |
| data: [ |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| ], |
| }, |
| ], |
| }} |
| options={{ |
| maintainAspectRatio: false, |
| plugins: { |
| legend: { |
| display: false, |
| }, |
| }, |
| scales: { |
| x: { |
| display: false, |
| }, |
| y: { |
| display: false, |
| }, |
| }, |
| }} |
| /> |
| } |
| title="title" |
| value="1,123" |
| /> |
| </CCol> |
| <CCol sm={4} md={3} xl={2}> |
| <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', |
| ], |
| datasets: [ |
| { |
| backgroundColor: getStyle('--cui-success'), |
| borderColor: 'transparent', |
| borderWidth: 1, |
| data: [ |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| ], |
| }, |
| ], |
| }} |
| options={{ |
| maintainAspectRatio: false, |
| plugins: { |
| legend: { |
| display: false, |
| }, |
| }, |
| scales: { |
| x: { |
| display: false, |
| }, |
| y: { |
| display: false, |
| }, |
| }, |
| }} |
| /> |
| } |
| title="title" |
| value="1,123" |
| /> |
| </CCol> |
| <CCol sm={4} md={3} xl={2}> |
| <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', |
| ], |
| datasets: [ |
| { |
| backgroundColor: 'transparent', |
| borderColor: getStyle('--cui-danger'), |
| borderWidth: 2, |
| data: [ |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| ], |
| }, |
| ], |
| }} |
| options={{ |
| maintainAspectRatio: false, |
| elements: { |
| line: { |
| tension: 0.4, |
| }, |
| point: { |
| radius: 0, |
| }, |
| }, |
| plugins: { |
| legend: { |
| display: false, |
| }, |
| }, |
| scales: { |
| x: { |
| display: false, |
| }, |
| y: { |
| display: false, |
| }, |
| }, |
| }} |
| /> |
| } |
| title="title" |
| value="1,123" |
| /> |
| </CCol> |
| <CCol sm={4} md={3} xl={2}> |
| <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', |
| ], |
| datasets: [ |
| { |
| backgroundColor: 'transparent', |
| borderColor: getStyle('--cui-success'), |
| borderWidth: 2, |
| data: [ |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| ], |
| }, |
| ], |
| }} |
| options={{ |
| maintainAspectRatio: false, |
| elements: { |
| line: { |
| tension: 0.4, |
| }, |
| point: { |
| radius: 0, |
| }, |
| }, |
| plugins: { |
| legend: { |
| display: false, |
| }, |
| }, |
| scales: { |
| x: { |
| display: false, |
| }, |
| y: { |
| display: false, |
| }, |
| }, |
| }} |
| /> |
| } |
| title="title" |
| value="1,123" |
| /> |
| </CCol> |
| <CCol sm={4} md={3} xl={2}> |
| <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', |
| ], |
| datasets: [ |
| { |
| backgroundColor: 'transparent', |
| borderColor: getStyle('--cui-info'), |
| borderWidth: 2, |
| data: [ |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| random(40, 100), |
| ], |
| }, |
| ], |
| }} |
| options={{ |
| maintainAspectRatio: false, |
| elements: { |
| line: { |
| tension: 0.4, |
| }, |
| point: { |
| radius: 0, |
| }, |
| }, |
| plugins: { |
| legend: { |
| display: false, |
| }, |
| }, |
| scales: { |
| x: { |
| display: false, |
| }, |
| y: { |
| display: false, |
| }, |
| }, |
| }} |
| /> |
| } |
| title="title" |
| value="1,123" |
| /> |
| </CCol> |
| </CRow> |
| </DocsExample> |
| <DocsExample href="components/widgets/#cwidgetstatsf"> |
| <CRow xs={{ gutter: 4 }}> |
| <CCol xs={12} sm={6} xl={4} xxl={3}> |
| <CWidgetStatsF |
| icon={<CIcon width={24} icon={cilSettings} size="xl" />} |
| title="income" |
| value="$1.999,50" |
| color="primary" |
| /> |
| </CCol> |
| <CCol xs={12} sm={6} xl={4} xxl={3}> |
| <CWidgetStatsF |
| icon={<CIcon width={24} icon={cilUser} size="xl" />} |
| title="income" |
| value="$1.999,50" |
| color="info" |
| /> |
| </CCol> |
| <CCol xs={12} sm={6} xl={4} xxl={3}> |
| <CWidgetStatsF |
| icon={<CIcon width={24} icon={cilMoon} size="xl" />} |
| title="income" |
| value="$1.999,50" |
| color="warning" |
| /> |
| </CCol> |
| <CCol xs={12} sm={6} xl={4} xxl={3}> |
| <CWidgetStatsF |
| icon={<CIcon width={24} icon={cilBell} size="xl" />} |
| title="income" |
| value="$1.999,50" |
| color="danger" |
| /> |
| </CCol> |
| </CRow> |
| </DocsExample> |
| <DocsExample href="components/widgets/#cwidgetstatsf"> |
| <CRow xs={{ gutter: 4 }}> |
| <CCol xs={12} sm={6} xl={4} xxl={3}> |
| <CWidgetStatsF |
| icon={<CIcon width={24} icon={cilSettings} size="xl" />} |
| title="income" |
| value="$1.999,50" |
| color="primary" |
| footer={ |
| <CLink |
| className="font-weight-bold font-xs text-body-secondary" |
| href="https://coreui.io/" |
| rel="noopener norefferer" |
| target="_blank" |
| > |
| View more |
| <CIcon icon={cilArrowRight} className="float-end" width={16} /> |
| </CLink> |
| } |
| /> |
| </CCol> |
| <CCol xs={12} sm={6} xl={4} xxl={3}> |
| <CWidgetStatsF |
| icon={<CIcon width={24} icon={cilLaptop} size="xl" />} |
| title="income" |
| value="$1.999,50" |
| color="info" |
| footer={ |
| <CLink |
| className="font-weight-bold font-xs text-body-secondary" |
| href="https://coreui.io/" |
| rel="noopener norefferer" |
| target="_blank" |
| > |
| View more |
| <CIcon icon={cilArrowRight} className="float-end" width={16} /> |
| </CLink> |
| } |
| /> |
| </CCol> |
| <CCol xs={12} sm={6} xl={4} xxl={3}> |
| <CWidgetStatsF |
| icon={<CIcon width={24} icon={cilMoon} size="xl" />} |
| title="income" |
| value="$1.999,50" |
| color="warning" |
| footer={ |
| <CLink |
| className="font-weight-bold font-xs text-body-secondary" |
| href="https://coreui.io/" |
| rel="noopener norefferer" |
| target="_blank" |
| > |
| View more |
| <CIcon icon={cilArrowRight} className="float-end" width={16} /> |
| </CLink> |
| } |
| /> |
| </CCol> |
| <CCol xs={12} sm={6} xl={4} xxl={3}> |
| <CWidgetStatsF |
| icon={<CIcon width={24} icon={cilBell} size="xl" />} |
| title="income" |
| value="$1.999,50" |
| color="danger" |
| footer={ |
| <CLink |
| className="font-weight-bold font-xs text-body-secondary" |
| href="https://coreui.io/" |
| rel="noopener norefferer" |
| target="_blank" |
| > |
| View more |
| <CIcon icon={cilArrowRight} className="float-end" width={16} /> |
| </CLink> |
| } |
| /> |
| </CCol> |
| </CRow> |
| </DocsExample> |
| <DocsExample href="components/widgets/#cwidgetstatsf"> |
| <CRow xs={{ gutter: 4 }}> |
| <CCol xs={12} sm={6} xl={4} xxl={3}> |
| <CWidgetStatsF |
| icon={<CIcon width={24} icon={cilSettings} size="xl" />} |
| padding={false} |
| title="income" |
| value="$1.999,50" |
| color="primary" |
| /> |
| </CCol> |
| <CCol xs={12} sm={6} xl={4} xxl={3}> |
| <CWidgetStatsF |
| icon={<CIcon width={24} icon={cilUser} size="xl" />} |
| padding={false} |
| title="income" |
| value="$1.999,50" |
| color="info" |
| /> |
| </CCol> |
| <CCol xs={12} sm={6} xl={4} xxl={3}> |
| <CWidgetStatsF |
| icon={<CIcon width={24} icon={cilMoon} size="xl" />} |
| padding={false} |
| title="income" |
| value="$1.999,50" |
| color="warning" |
| /> |
| </CCol> |
| <CCol xs={12} sm={6} xl={4} xxl={3}> |
| <CWidgetStatsF |
| icon={<CIcon width={24} icon={cilBell} size="xl" />} |
| padding={false} |
| title="income" |
| value="$1.999,50" |
| color="danger" |
| /> |
| </CCol> |
| </CRow> |
| </DocsExample> |
| <DocsExample href="components/widgets/#cwidgetstatsd"> |
| <WidgetsBrand /> |
| </DocsExample> |
| <DocsExample href="components/widgets/#cwidgetstatsd"> |
| <WidgetsBrand withCharts /> |
| </DocsExample> |
| <DocsExample href="components/widgets/#cwidgetstatsc"> |
| <CCardGroup className="mb-4"> |
| <CWidgetStatsC |
| icon={<CIcon icon={cilPeople} height={36} />} |
| value="87.500" |
| title="Visitors" |
| progress={{ color: 'info', value: 75 }} |
| /> |
| <CWidgetStatsC |
| icon={<CIcon icon={cilUserFollow} height={36} />} |
| value="385" |
| title="New Clients" |
| progress={{ color: 'success', value: 75 }} |
| /> |
| <CWidgetStatsC |
| icon={<CIcon icon={cilBasket} height={36} />} |
| value="1238" |
| title="Products sold" |
| progress={{ color: 'warning', value: 75 }} |
| /> |
| <CWidgetStatsC |
| icon={<CIcon icon={cilChartPie} height={36} />} |
| value="28%" |
| title="Returning Visitors" |
| progress={{ color: 'primary', value: 75 }} |
| /> |
| <CWidgetStatsC |
| icon={<CIcon icon={cilSpeedometer} height={36} />} |
| value="5:34:11" |
| title="Avg. Time" |
| progress={{ color: 'danger', value: 75 }} |
| /> |
| </CCardGroup> |
| </DocsExample> |
| <DocsExample href="components/widgets/#cwidgetstatsc"> |
| <CRow xs={{ gutter: 4 }}> |
| <CCol xs={6} lg={4} xxl={2}> |
| <CWidgetStatsC |
| icon={<CIcon icon={cilPeople} height={36} />} |
| value="87.500" |
| title="Visitors" |
| progress={{ color: 'info', value: 75 }} |
| /> |
| </CCol> |
| <CCol xs={6} lg={4} xxl={2}> |
| <CWidgetStatsC |
| icon={<CIcon icon={cilUserFollow} height={36} />} |
| value="385" |
| title="New Clients" |
| progress={{ color: 'success', value: 75 }} |
| /> |
| </CCol> |
| <CCol xs={6} lg={4} xxl={2}> |
| <CWidgetStatsC |
| icon={<CIcon icon={cilBasket} height={36} />} |
| value="1238" |
| title="Products sold" |
| progress={{ color: 'warning', value: 75 }} |
| /> |
| </CCol> |
| <CCol xs={6} lg={4} xxl={2}> |
| <CWidgetStatsC |
| icon={<CIcon icon={cilChartPie} height={36} />} |
| value="28%" |
| title="Returning Visitors" |
| progress={{ color: 'primary', value: 75 }} |
| /> |
| </CCol> |
| <CCol xs={6} lg={4} xxl={2}> |
| <CWidgetStatsC |
| icon={<CIcon icon={cilSpeedometer} height={36} />} |
| value="5:34:11" |
| title="Avg. Time" |
| progress={{ color: 'danger', value: 75 }} |
| /> |
| </CCol> |
| <CCol xs={6} lg={4} xxl={2}> |
| <CWidgetStatsC |
| icon={<CIcon icon={cilSpeech} height={36} />} |
| value="972" |
| title="Comments" |
| progress={{ color: 'info', value: 75 }} |
| /> |
| </CCol> |
| </CRow> |
| </DocsExample> |
| <DocsExample href="components/widgets/#cwidgetstatsc"> |
| <CRow xs={{ gutter: 4 }}> |
| <CCol xs={6} lg={4} xxl={2}> |
| <CWidgetStatsC |
| color="info" |
| icon={<CIcon icon={cilPeople} height={36} />} |
| value="87.500" |
| title="Visitors" |
| inverse |
| progress={{ value: 75 }} |
| /> |
| </CCol> |
| <CCol xs={6} lg={4} xxl={2}> |
| <CWidgetStatsC |
| color="success" |
| icon={<CIcon icon={cilUserFollow} height={36} />} |
| value="385" |
| title="New Clients" |
| inverse |
| progress={{ value: 75 }} |
| /> |
| </CCol> |
| <CCol xs={6} lg={4} xxl={2}> |
| <CWidgetStatsC |
| color="warning" |
| icon={<CIcon icon={cilBasket} height={36} />} |
| value="1238" |
| title="Products sold" |
| inverse |
| progress={{ value: 75 }} |
| /> |
| </CCol> |
| <CCol xs={6} lg={4} xxl={2}> |
| <CWidgetStatsC |
| color="primary" |
| icon={<CIcon icon={cilChartPie} height={36} />} |
| value="28%" |
| title="Returning Visitors" |
| inverse |
| progress={{ value: 75 }} |
| /> |
| </CCol> |
| <CCol xs={6} lg={4} xxl={2}> |
| <CWidgetStatsC |
| color="danger" |
| icon={<CIcon icon={cilSpeedometer} height={36} />} |
| value="5:34:11" |
| title="Avg. Time" |
| inverse |
| progress={{ value: 75 }} |
| /> |
| </CCol> |
| <CCol xs={6} lg={4} xxl={2}> |
| <CWidgetStatsC |
| color="info" |
| icon={<CIcon icon={cilSpeech} height={36} />} |
| value="972" |
| title="Comments" |
| inverse |
| progress={{ value: 75 }} |
| /> |
| </CCol> |
| </CRow> |
| </DocsExample> |
| </CCardBody> |
| </CCard> |
| ) |
| } |
|
|
| export default Widgets |
|
|
