@platformatic/ui-components 0.17.1 → 0.17.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@platformatic/ui-components",
   "description": "Platformatic UI Components",
-  "version": "0.17.1",
+  "version": "0.17.2",
   "type": "module",
   "license": "Apache-2.0",
   "repository": {

package/src/components/MetricInfoBox.jsx

@@ -1,23 +1,14 @@
 import React, { useState } from 'react'
 import styles from './MetricInfoBox.module.css'
-import TrendDownIcon from './icons/TrendDownIcon'
-import TrendUpIcon from './icons/TrendUpIcon'
-import TrendLine from './TrendLine'
 import Tooltip from './Tooltip'
 import { DIRECTION_TOP, POSITION_CENTER, MEDIUM, WHITE } from './constants'
 import PlatformaticIcon from './PlatformaticIcon'
 
 export default function MetricInfoBox ({
   title,
-  value,
-  unit,
-  data = [],
-  helper,
-  tooltip,
-  showGraph = false
+  children,
+  tooltip = null
 }) {
-  // set trend variable up or down, depending on the first and last value of the data array
-  const trend = data[0] > data[data.length - 1] ? 'up' : 'down'
   const [tooltipVisible, setTooltipVisible] = useState(false)
 
   return (
@@ -51,28 +42,7 @@ export default function MetricInfoBox ({
         )}
       </div>
       <div className={styles.content}>
-        <div className={styles.contentText}>
-          <div>
-            <div className={styles.value}>
-              <span className={styles.valueNumber}>{value}</span>
-              <span className={styles.valueUnit}>{unit}</span>
-              <div className={styles.trend}>
-                {trend === 'up' ? <TrendUpIcon color='white' /> : <TrendDownIcon color='white' />}
-              </div>
-            </div>
-
-          </div>
-          <div className={styles.helperBox}>
-            {helper}
-          </div>
-
-        </div>
-
-        {showGraph && (
-          <div className={styles.contentGraph}>
-            <TrendLine yValues={data} />
-          </div>
-        )}
+        {children}
       </div>
 
     </div>

package/src/components/MetricInfoBox.module.css

@@ -18,25 +18,3 @@
   @apply flex items-center justify-center gap-4;
 }
 
-.contentText {
-  @apply flex flex-col gap-2 items-center justify-center;
-}
-.value {
-  @apply flex gap-4 items-center justify-center;
-}
-
-.valueNumber {
-  @apply text-[24px] font-semibold text-white;
-}
-
-.valueUnit {
-  @apply text-[16px] font-normal text-white/70;
-}
-
-.helperBox {
-  @apply text-[14px] font-normal text-white/70;
-} 
-
-.contentGraph {
-  @apply w-[210px] h-[60px];
-}

package/src/components/TrendMetric.jsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import styles from './TrendMetric.module.css'
+import TrendUpIcon from './icons/TrendUpIcon'
+import TrendDownIcon from './icons/TrendDownIcon'
+import TrendLine from './TrendLine'
+
+export default function TrendMetric ({ value, unit, helper, showGraph = false, data }) {
+  // set trend variable up or down, depending on the first and last value of the data array
+  const trend = data[0] > data[data.length - 1] ? 'up' : 'down'
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.contentText}>
+        <div>
+          <div className={styles.value}>
+            <span className={styles.valueNumber}>{value}</span>
+            <span className={styles.valueUnit}>{unit}</span>
+            <div className={styles.trend}>
+              {trend === 'up' ? <TrendUpIcon color='white' /> : <TrendDownIcon color='white' />}
+            </div>
+          </div>
+
+        </div>
+        <div className={styles.helperBox}>
+          {helper}
+        </div>
+
+      </div>
+
+      {showGraph && (
+        <div className={styles.contentGraph}>
+          <TrendLine yValues={data} />
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/TrendMetric.module.css

@@ -0,0 +1,25 @@
+.contentText {
+  @apply flex flex-col gap-2 items-center justify-center;
+}
+.value {
+  @apply flex gap-4 items-center justify-center;
+}
+
+.valueNumber {
+  @apply text-[24px] font-semibold text-white;
+}
+
+.valueUnit {
+  @apply text-[16px] font-normal text-white/70;
+}
+
+.helperBox {
+  @apply text-[14px] font-normal text-white/70;
+} 
+
+.contentGraph {
+  @apply w-[210px] h-[60px];
+}
+.container {
+  @apply flex items-center justify-center gap-4;
+}

package/src/stories/MetricInfoBox.stories.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import MetricInfoBox from '../components/MetricInfoBox'
+import TrendMetric from '../components/TrendMetric'
 
 export default {
   title: 'Platformatic/Metrics/MetricInfoBox',
@@ -9,31 +10,40 @@ export default {
 export const Default = () => (
   <MetricInfoBox
     title='Memory Allocation & Usage'
-    value={50}
-    unit='MB'
-    data={[100, 90, 80, 70, 60, 50, 40, 30, 20, 10]}
-    helper='Average Usage'
-  />
+  >
+    <TrendMetric
+      value={50}
+      unit='MB'
+      data={[100, 90, 80, 70, 60, 50, 40, 30, 20, 10]}
+      helper='Average Usage'
+    />
+  </MetricInfoBox>
 )
 export const WithGraph = () => (
   <MetricInfoBox
     title='Memory Allocation & Usage'
-    value={50}
-    unit='MB'
-    data={[100, 90, 80, 70, 60, 50, 40, 30, 20, 10]}
-    helper='Average Usage'
-    showGraph
-  />
+  >
+    <TrendMetric
+      value={50}
+      unit='MB'
+      data={[100, 90, 80, 70, 60, 50, 40, 30, 20, 10]}
+      helper='Average Usage'
+      showGraph
+    />
+  </MetricInfoBox>
 )
 
 export const WithTooltip = () => (
   <MetricInfoBox
     title='Memory Allocation & Usage'
-    value={50}
-    unit='MB'
-    data={[100, 90, 80, 70, 60, 50, 40, 30, 20, 10]}
-    helper='Average Usage'
-    showGraph
     tooltip='This is a tooltip'
-  />
+  >
+    <TrendMetric
+      value={50}
+      unit='MB'
+      data={[100, 90, 80, 70, 60, 50, 40, 30, 20, 10]}
+      helper='Average Usage'
+      showGraph
+    />
+  </MetricInfoBox>
 )