Merge pull request #19 from weaponsforge/dev

v1.0.4

Author: weaponsforge

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

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import {
   Chart as ChartJS,
   CategoryScale,
@@ -21,18 +22,33 @@ ChartJS.register(
 
 function BarChart ({
   options,
-  data
+  data,
+  width,
+  height
 }) {
+  const container = (!width || !height)
+    ? { width: '100vw', height: '100vh' }
+    : {}
+
   return (
-    <FullBox >
+    <FullBox sx={container}>
       <Bar
-        width={300}
-        height={300}
+        width={width ?? 300}
+        height={height ?? 300}
         options={options}
         data={data}
       />
     </FullBox>
   )
 }
 
+BarChart.propTypes = {
+  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
+}
+
 export default BarChart

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

@@ -1,19 +1,32 @@
+import PropTypes from 'prop-types'
 import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js'
 import { Doughnut } from 'react-chartjs-2'
 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={300}
-        height={300}
+        width={props?.width || 300}
+        height={props?.height || 300}
         options={{maintainAspectRatio: false}}
       />
     </FullBox>
   )
 }
 
+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
+}
+
 export default DonutChart

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

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import {
   Chart as ChartJS,
   CategoryScale,
@@ -23,18 +24,33 @@ import FullBox from '@/components/common/layout/fullbox'
 
 function LineGraph ({
   options,
-  data
+  data,
+  width,
+  height
 }) {
+  const container = (!width || !height)
+    ? { width: '100vw', height: '100vh' }
+    : {}
+
   return (
-    <FullBox >
+    <FullBox sx={container}>
       <Line
-        width={300}
-        height={300}
         options={options}
         data={data}
+        width={width ?? 300}
+        height={height ?? 300}
       />
     </FullBox>
   )
 }
 
+LineGraph.propTypes = {
+  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
+}
+
 export default LineGraph

components/profile-centered/index.js

@@ -34,7 +34,11 @@ function ProfileCenteredComponent ({
 
         {/** Greehouse Gas (GHG) Emmissions Section */}
         <Grid item xs={12} sm={5}>
-          <DonutChart {...donutData} />
+          <DonutChart
+            {...donutData}
+            width={300}
+            height={300}
+          />
         </Grid>
 
         <Grid item xs={12} sm={7}>
@@ -58,6 +62,8 @@ function ProfileCenteredComponent ({
         <Grid item xs={12} sm={5}>
           <BarChart
             {...barData}
+            width={300}
+            height={300}
           />
         </Grid>
 
@@ -72,6 +78,8 @@ function ProfileCenteredComponent ({
         <Grid item xs={12} sm={5}>
           <LineGraph
             {...barData}
+            width={300}
+            height={300}
           />
         </Grid>
 

components/profile/index.js

@@ -33,7 +33,11 @@ function ProfileComponent ({
 
         {/** Greehouse Gas (GHG) Emmissions Section */}
         <Grid item xs={12} sm={5}>
-          <DonutChart {...donutData} />
+          <DonutChart
+            {...donutData}
+            width={300}
+            height={300}
+          />
         </Grid>
 
         <Grid item xs={12} sm={7}>
@@ -57,6 +61,8 @@ function ProfileComponent ({
         <Grid item xs={12} sm={5}>
           <BarChart
             {...barData}
+            width={300}
+            height={300}
           />
         </Grid>
 
@@ -71,6 +77,8 @@ function ProfileComponent ({
         <Grid item xs={12} sm={5}>
           <LineGraph
             {...barData}
+            width={300}
+            height={300}
           />
         </Grid>
 

pages/barchartviz/index.js

@@ -0,0 +1,13 @@
+import BarChart from '@/components/common/ui/charts/bar'
+import { options, data } from '@/data/bar_data'
+
+function BarChartViz () {
+  return (
+    <BarChart
+      options={options}
+      data={data}
+    />
+  )
+}
+
+export default BarChartViz

pages/donutchartviz/index.js

@@ -0,0 +1,10 @@
+import DonutChart from '@/components/common/ui/charts/donut'
+import donutChartData from '@/data/donut_data'
+
+function DonutChartViz () {
+  return (
+    <DonutChart {...donutChartData} />
+  )
+}
+
+export default DonutChartViz

pages/linechartviz/index.js

@@ -0,0 +1,13 @@
+import LineGraph from '@/components/common/ui/charts/line'
+import { options, data } from '@/data/bar_data'
+
+function LineChartViz () {
+  return (
+    <LineGraph
+      options={options}
+      data={data}
+    />
+  )
+}
+
+export default LineChartViz