add missing icon and update classes in css modules

Signed-off-by: Leonardo Rossi <[email protected]>

Author: leorossi

src/components/ArcMetric.jsx

@@ -112,9 +112,9 @@ export function SemiCircleProgress ({
         />
       </svg>
       {showPercentValue && (
-        <div className='flex items-center justify-center gap-2 absolute bottom-0 left-0 right-0 text-white text-[2.3rem] font-bold'>
+        <div className={styles.percentContainer}>
           <span>{value}</span>
-          <span className='text-white/70 text-[1.2rem] font-normal'>{unit}</span>
+          <span className={styles.percentUnit}>{unit}</span>
         </div>
 
       )}

src/components/ArcMetric.module.css

@@ -28,4 +28,12 @@
   font-weight: 400;
   min-width: 120px;
   text-align: left;
-} 
+} 
+
+.percentContainer {
+  @apply flex items-center justify-center gap-2 absolute bottom-0 left-0 right-0 text-white text-[2.3rem] font-bold;
+}
+
+.percentUnit {
+  @apply text-white/70 text-[1.2rem] font-normal;
+}

src/components/TrendLine.jsx

@@ -1,5 +1,6 @@
 import React, { useRef, useEffect, useState } from 'react'
 import * as d3 from 'd3'
+import styles from './TrendLine.module.css'
 
 /**
  * TrendLine component
@@ -132,7 +133,7 @@ function TrendLine ({ yValues }) {
   }, [yValues, dimensions])
 
   return (
-    <div className='w-full h-full' ref={typedContainerRef} style={{ position: 'relative' }}>
+    <div className={styles.line} ref={typedContainerRef} style={{ position: 'relative' }}>
       <svg
         ref={ref}
         width='100%'

src/components/TrendLine.module.css

@@ -0,0 +1,3 @@
+.line {
+  @apply w-full h-full;
+}

src/components/TrendMetric.module.css

@@ -18,7 +18,7 @@
 } 
 
 .contentGraph {
-  @apply w-[210px] h-[60px];
+  @apply w-[210px] h-[25px];
 }
 .container {
   @apply flex items-center justify-center gap-4;

src/components/icons/PodSignalsIcon.jsx

@@ -0,0 +1,76 @@
+import * as React from 'react'
+import styles from './Icons.module.css'
+import { SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
+
+const PodSignalsIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
+  let className = `${styles.svgClassName} ` + styles[`${color}`]
+  if (disabled) {
+    className += ` ${styles.iconDisabled}`
+  }
+  if (inactive) {
+    className += ` ${styles.iconInactive}`
+  }
+  let icon = <></>
+
+  switch (size) {
+    case SMALL:
+      icon = (
+        <svg
+          width={16}
+          height={16}
+          viewBox='0 0 16 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M8.01795 6.35413L6.2859 7.35413V9.35413L8.01795 10.3541L9.75 9.35413V7.35413L8.01795 6.35413Z' stroke='none' strokeLinejoin='round' />
+          <path d='M12.1169 4.11709C13.2763 5.11966 14 6.54093 14 8.11709C14 9.69326 13.2763 11.1145 12.1169 12.1171M3.88308 12.1171C2.72365 11.1145 2 9.69326 2 8.11709C2 6.47853 2.78208 5.00736 4.02282 4' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M10.3519 5.15155C11.3508 5.81802 12 6.89802 12 8.11699C12 9.33596 11.3508 10.416 10.3519 11.0824M5.6481 11.0824C4.64924 10.416 4 9.33596 4 8.11699C4 6.86433 4.68563 5.75841 5.73174 5.09723' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    case MEDIUM:
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M12.0269 9.35413L9.42885 10.8541V13.8541L12.0269 15.3541L14.625 13.8541V10.8541L12.0269 9.35413Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
+          <path d='M18.1754 6.17564C19.9145 7.67949 21 9.8114 21 12.1756C21 14.5399 19.9145 16.6718 18.1754 18.1756M5.82463 18.1756C4.08548 16.6718 3 14.5399 3 12.1756C3 9.71779 4.17313 7.51105 6.03424 6' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M15.5278 7.72735C17.0261 8.72706 18 10.3471 18 12.1755C18 14.004 17.0261 15.624 15.5278 16.6237M8.47216 16.6237C6.97385 15.624 6 14.004 6 12.1755C6 10.2965 7.02844 8.63765 8.59761 7.64587' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    case LARGE:
+      icon = (
+        <svg
+          width={40}
+          height={40}
+          viewBox='0 0 40 40'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M20.0449 15.3541L15.7147 17.8541V22.8541L20.0449 25.3541L24.375 22.8541V17.8541L20.0449 15.3541Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
+          <path d='M30.2923 10.2927C33.1909 12.7992 35 16.3523 35 20.2927C35 24.2331 33.1909 27.7863 30.2923 30.2927M9.70771 30.2927C6.80913 27.7863 5 24.2331 5 20.2927C5 16.1963 6.95521 12.5184 10.0571 10' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M25.8797 12.8788C28.3769 14.545 30 17.245 30 20.2925C30 23.3399 28.3769 26.0399 25.8797 27.7061M14.1203 27.7061C11.6231 26.0399 10 23.3399 10 20.2925C10 17.1608 11.7141 14.396 14.3293 12.743' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+export default PodSignalsIcon

src/components/icons/index.js

@@ -162,6 +162,7 @@ import PodMetricsIcon from './PodMetricsIcon'
 import PodPerformanceIcon from './PodPerformanceIcon'
 import PodSettingsIcon from './PodSettingsIcon'
 import PodServicesIcon from './PodServicesIcon'
+import PodSignalsIcon from './PodSignalsIcon'
 import PreviewPRIcon from './PreviewPRIcon'
 import PullRequestIcon from './PullRequestIcon'
 import PullRequestLoadingIcon from './PullRequestLoadingIcon'
@@ -398,6 +399,7 @@ export default {
   PodPerformanceIcon,
   PodSettingsIcon,
   PodServicesIcon,
+  PodSignalsIcon,
   PreviewPRIcon,
   PullRequestIcon,
   PullRequestLoadingIcon,

src/stories/TrendLine.stories.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import TrendLine from '../components/TrendLine'
 
 export default {
-  title: 'Components/TrendLine',
+  title: 'Platformatic/Metrics/TrendLine',
   component: TrendLine
 }