refactor: update widgets
This commit is contained in:
Łukasz Holeczek
parent
a36f5d49e2
commit
edbda35a96
@ -62,7 +62,6 @@ const Widgets = () => {
|
||||
text="Lorem ipsum dolor sit amet enim."
|
||||
/>
|
||||
</CCol>
|
||||
|
||||
<CCol xs={12} sm={6} lg={3}>
|
||||
<CWidgetProgress
|
||||
className="mb-4"
|
||||
@ -112,7 +111,338 @@ const Widgets = () => {
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
<CRow>
|
||||
<CCol sm={4} lg={2}>
|
||||
<CWidgetSimple title="title" value="1,123" className="mb-4">
|
||||
<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,
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</CWidgetSimple>
|
||||
</CCol>
|
||||
<CCol sm={4} lg={2}>
|
||||
<CWidgetSimple title="title" value="1,123" className="mb-4">
|
||||
<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,
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</CWidgetSimple>
|
||||
</CCol>
|
||||
<CCol sm={4} lg={2}>
|
||||
<CWidgetSimple title="title" value="1,123" className="mb-4">
|
||||
<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,
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</CWidgetSimple>
|
||||
</CCol>
|
||||
<CCol sm={4} lg={2}>
|
||||
<CWidgetSimple title="title" value="1,123" className="mb-4">
|
||||
<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,
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</CWidgetSimple>
|
||||
</CCol>
|
||||
<CCol sm={4} lg={2}>
|
||||
<CWidgetSimple title="title" value="1,123" className="mb-4">
|
||||
<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,
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</CWidgetSimple>
|
||||
</CCol>
|
||||
<CCol sm={4} lg={2}>
|
||||
<CWidgetSimple title="title" value="1,123" className="mb-4">
|
||||
<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,
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</CWidgetSimple>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol xs={12} sm={6} lg={3}>
|
||||
<CWidgetIcon
|
||||
@ -451,332 +781,6 @@ const Widgets = () => {
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol sm={4} lg={2}>
|
||||
<CWidgetSimple title="title" value="1,123" className="mb-4">
|
||||
<CChartBar
|
||||
style={{ height: '40px' }}
|
||||
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,
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</CWidgetSimple>
|
||||
</CCol>
|
||||
<CCol sm={4} lg={2}>
|
||||
<CWidgetSimple title="title" value="1,123" className="mb-4">
|
||||
<CChartBar
|
||||
style={{ height: '40px' }}
|
||||
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,
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</CWidgetSimple>
|
||||
</CCol>
|
||||
<CCol sm={4} lg={2}>
|
||||
<CWidgetSimple title="title" value="1,123" className="mb-4">
|
||||
<CChartBar
|
||||
style={{ height: '40px' }}
|
||||
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,
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</CWidgetSimple>
|
||||
</CCol>
|
||||
<CCol sm={4} lg={2}>
|
||||
<CWidgetSimple title="title" value="1,123" className="mb-4">
|
||||
<CChartLine
|
||||
style={{ height: '40px' }}
|
||||
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,
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</CWidgetSimple>
|
||||
</CCol>
|
||||
<CCol sm={4} lg={2}>
|
||||
<CWidgetSimple title="title" value="1,123" className="mb-4">
|
||||
<CChartLine
|
||||
style={{ height: '40px' }}
|
||||
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,
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</CWidgetSimple>
|
||||
</CCol>
|
||||
<CCol sm={4} lg={2}>
|
||||
<CWidgetSimple title="title" value="1,123" className="mb-4">
|
||||
<CChartLine
|
||||
style={{ height: '40px' }}
|
||||
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,
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</CWidgetSimple>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user