From edbda35a96ff9ece54b5fd17066e8285ba9bd391 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= <lukasz@holeczek.pl>
Date: Wed, 11 Aug 2021 18:52:49 +0200
Subject: [PATCH] refactor: update widgets

---
 src/views/components/widgets/Widgets.js | 660 ++++++++++++------------
 1 file changed, 332 insertions(+), 328 deletions(-)

diff --git a/src/views/components/widgets/Widgets.js b/src/views/components/widgets/Widgets.js
index 355fe94..acc0977 100644
--- a/src/views/components/widgets/Widgets.js
+++ b/src/views/components/widgets/Widgets.js
@@ -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>
     </>
   )
 }