Add large monitor mode, but no switching yet.

src/components/monitor/default-monitor.jsx

+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './monitor.css';
+
+const DefaultMonitor = ({categoryColor, label, value}) => (
+    <div className={styles.defaultMonitor}>
+        <div className={styles.label}>
+            {label}
+        </div>
+        <div
+            className={styles.value}
+            style={{background: categoryColor}}
+        >
+            {value}
+        </div>
+    </div>
+);
+
+DefaultMonitor.propTypes = {
+    categoryColor: PropTypes.string.isRequired,
+    label: PropTypes.string.isRequired,
+    value: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.number
+    ])
+};
+
+export default DefaultMonitor;

src/components/monitor/large-monitor.jsx

+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './monitor.css';
+
+const LargeMonitor = ({categoryColor, value}) => (
+    <div className={styles.largeMonitor}>
+        <div
+            className={styles.largeValue}
+            style={{background: categoryColor}}
+        >
+            {value}
+        </div>
+    </div>
+);
+
+LargeMonitor.propTypes = {
+    categoryColor: PropTypes.string,
+    value: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.number
+    ])
+};
+
+export default LargeMonitor;

src/components/monitor/monitor.css

 @import "../../css/units.css";
 @import "../../css/colors.css";
 
-.monitor {
+.monitor-container {
     position: absolute;
-    padding: 3px;
     background: $ui-primary;
     z-index: 100;
     border: 1px solid $ui-black-transparent;
     border-radius: calc($space / 2);
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     font-size: 0.75rem;
-    display: flex;
     transition: box-shadow 0.2s;
     pointer-events: all;
+    overflow: hidden;
 }
 
 .monitor:hover {
@@ -24,6 +23,11 @@
     box-shadow: 3px 3px 5px #888888;
 }
 
+.default-monitor {
+    display: flex;
+    padding: 3px;
+}
+
 .label {
     font-weight: bold;
     text-align: center;
@@ -38,3 +42,12 @@
     border-radius: calc($space / 2);
     padding: 0 2px;
 }
+
+.large-value {
+    min-height: 1.5rem;
+    min-width: 3rem;
+    padding: 0.25rem;
+    text-align: center;
+    color: white;
+    font-size: 1rem;
+}

src/components/monitor/monitor.jsx

@@ -2,6 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Draggable from 'react-draggable';
 import Box from '../box/box.jsx';
+import DefaultMonitor from './default-monitor.jsx';
+import LargeMonitor from './large-monitor.jsx';
+
 import styles from './monitor.css';
 
 const categories = {
@@ -13,6 +16,11 @@ const categories = {
     list: '#FC662C'
 };
 
+const types = {
+    default: DefaultMonitor,
+    large: LargeMonitor
+};
+
 const MonitorComponent = props => (
     <Draggable
         bounds="parent"
@@ -20,18 +28,14 @@ const MonitorComponent = props => (
         onStop={props.onDragEnd}
     >
         <Box
-            className={styles.monitor}
+            className={styles.monitorContainer}
             componentRef={props.componentRef}
         >
-            <Box className={styles.label}>
-                {props.label}
-            </Box>
-            <Box
-                className={styles.value}
-                style={{background: categories[props.category]}}
-            >
-                {props.value}
-            </Box>
+            {types[props.type]({
+                categoryColor: categories[props.category],
+                label: props.label,
+                value: props.value
+            })}
         </Box>
     </Draggable>
 );
@@ -43,13 +47,15 @@ MonitorComponent.propTypes = {
     componentRef: PropTypes.func.isRequired,
     label: PropTypes.string.isRequired,
     onDragEnd: PropTypes.func.isRequired,
+    type: PropTypes.oneOf(Object.keys(types)),
     value: PropTypes.oneOfType([
         PropTypes.string,
         PropTypes.number])
 };
 
 MonitorComponent.defaultProps = {
-    category: 'data'
+    category: 'data',
+    type: 'default'
 };
 
 export default MonitorComponent;