feat: Enable full viewport size settings on graph

Author: weaponsforge

components/common/ui/charts/bar/index.js

@@ -23,14 +23,18 @@ ChartJS.register(
 function BarChart ({
   options,
   data,
-  width = 300,
-  height = 300
+  width,
+  height
 }) {
+  const container = (!width || !height)
+    ? { width: '100vw', height: '100vh' }
+    : {}
+
   return (
-    <FullBox >
+    <FullBox sx={container}>
       <Bar
-        width={width}
-        height={height}
+        width={width ?? 300}
+        height={height ?? 300}
         options={options}
         data={data}
       />
@@ -39,9 +43,11 @@ function BarChart ({
 }
 
 BarChart.propTypes = {
-  data: PropTypes.array,
+  data: PropTypes.object,
   options: PropTypes.object,
+  /** Graph width in pixels. Will occupy full screen width if ommitted */
   width: PropTypes.number,
+  /** Graph height in pixels. Will occupy full screen height if ommitted */
   height: PropTypes.number
 }
 

components/common/ui/charts/donut/index.js

@@ -5,8 +5,12 @@ import FullBox from '@/components/common/layout/fullbox'
 ChartJS.register(ArcElement, Tooltip, Legend)
 
 function DonutChart (props) {
+  const container = (!props.width || !props.height)
+    ? { width: '100vw', height: '100vh' }
+    : {}
+
   return (
-    <FullBox >
+    <FullBox sx={container}>
       <Doughnut
         data={props}
         width={props?.width || 300}
@@ -19,7 +23,9 @@ function DonutChart (props) {
 
 DonutChart.propTypes = {
   data: PropTypes.array,
+  /** Graph width in pixels. Will occupy full screen width if ommitted */
   width: PropTypes.number,
+  /** Graph height in pixels. Will occupy full screen height if ommitted */
   height: PropTypes.number
 }
 

components/common/ui/charts/line/index.js

@@ -25,25 +25,31 @@ import FullBox from '@/components/common/layout/fullbox'
 function LineGraph ({
   options,
   data,
-  width = 300,
-  height = 300
+  width,
+  height
 }) {
+  const container = (!width || !height)
+    ? { width: '100vw', height: '100vh' }
+    : {}
+
   return (
-    <FullBox >
+    <FullBox sx={container}>
       <Line
-        width={width}
-        height={height}
         options={options}
         data={data}
+        width={width ?? 300}
+        height={height ?? 300}
       />
     </FullBox>
   )
 }
 
 LineGraph.propTypes = {
-  data: PropTypes.array,
+  data: PropTypes.object,
   options: PropTypes.object,
+  /** Graph width in pixels. Will occupy full screen width if ommitted */
   width: PropTypes.number,
+  /** Graph height in pixels. Will occupy full screen height if ommitted */
   height: PropTypes.number
 }