@platformatic/ui-components 0.17.0 → 0.17.2

package/src/components/TrendLine.jsx

@@ -0,0 +1,146 @@
+import React, { useRef, useEffect, useState } from 'react'
+import * as d3 from 'd3'
+
+/**
+ * TrendLine component
+ * @param {Object} props
+ * @param {number[]} props.yValues - Array of y-values (equally spaced on x-axis)
+ * @param {number} [props.width=400] - Width of the SVG
+ * @param {number} [props.height=120] - Height of the SVG
+ */
+function TrendLine ({ yValues }) {
+  const ref = useRef(null)
+  const containerRef = useRef(null)
+  /** @type {React.RefObject<HTMLDivElement>} */
+  // @ts-ignore
+  const typedContainerRef = containerRef
+  const [dimensions, setDimensions] = useState({ width: 400, height: 120 })
+
+  useEffect(() => {
+    if (!typedContainerRef.current) return
+    // Initial set
+    const bounding = typedContainerRef.current.getBoundingClientRect()
+    if (bounding) {
+      setDimensions({ width: bounding.width, height: bounding.height })
+    }
+    // Resize observer
+    const resizeObserver = new window.ResizeObserver(entries => {
+      for (const entry of entries) {
+        if (entry.target === typedContainerRef.current) {
+          const { width, height } = entry.contentRect
+          setDimensions({ width, height })
+        }
+      }
+    })
+    resizeObserver.observe(typedContainerRef.current)
+    return () => resizeObserver.disconnect()
+  }, [])
+
+  useEffect(() => {
+    const { width, height } = dimensions
+    if (!yValues || yValues.length === 0) return
+    // Limit to max 5 points by downsampling if needed
+    let limitedYValues = yValues
+    if (yValues.length > 5) {
+      const step = (yValues.length - 1) / 4
+      limitedYValues = Array.from({ length: 5 }, (_, i) => yValues[Math.round(i * step)])
+    }
+    const svg = d3.select(ref.current)
+    svg.selectAll('*').remove() // Clear previous
+
+    // Margins for padding
+    // const margin = { top: 10, right: 10, bottom: 10, left: 10 }
+    const margin = { top: 0, right: 0, bottom: 0, left: 0 }
+    const w = width - margin.left - margin.right
+    const h = height - margin.top - margin.bottom
+
+    // Ensure yValues is a number[] and filter out undefined/null
+    const cleanYValues = limitedYValues.filter(v => typeof v === 'number' && !isNaN(v))
+    if (cleanYValues.length === 0) return
+
+    // Helper to ensure [number, number][]
+    function toXYPairs (arr) {
+      const out = []
+      for (let i = 0; i < arr.length; i++) {
+        const x = i
+        const y = arr[i]
+        if (typeof x === 'number' && typeof y === 'number' && Number.isFinite(x) && Number.isFinite(y)) {
+          out.push([x, y])
+        }
+      }
+      return out
+    }
+    const points = toXYPairs(cleanYValues)
+    if (points.length < 2) return
+
+    // X and Y scales
+    const x = d3.scaleLinear()
+      .domain([0, points.length - 1])
+      .range([0, w])
+    const y = d3.scaleLinear()
+      .domain([
+        Number(d3.max(cleanYValues) ?? 1),
+        Number(d3.min(cleanYValues) ?? 0)
+      ]) // Invert so higher values are up
+      .range([margin.top, h + margin.top])
+
+    // Line generator for [x, y] pairs
+    const line = d3.line()
+      .x(d => x(d[0]) + margin.left)
+      .y(d => y(d[1]))
+      .curve(d3.curveCatmullRom.alpha(0.5))
+
+    // Area generator for [x, y] pairs
+    const area = d3.area()
+      .x(d => x(d[0]) + margin.left)
+      .y0(h + margin.top)
+      .y1(d => y(d[1]))
+      .curve(d3.curveCatmullRom.alpha(0.5))
+
+    // Draw area (shadow/fill)
+    svg.append('path')
+      // @ts-ignore
+      .attr('d', area(points))
+      .attr('fill', 'url(#trend-gradient)')
+      .attr('opacity', 1)
+
+    // Draw line
+    svg.append('path')
+      // @ts-ignore
+      .attr('d', line(points))
+      .attr('fill', 'none')
+      .attr('stroke', '#BFC3C7')
+      .attr('stroke-width', 2)
+      .attr('stroke-linecap', 'round')
+
+    // Gradient for area
+    const defs = svg.append('defs')
+    const gradient = defs.append('linearGradient')
+      .attr('id', 'trend-gradient')
+      .attr('x1', '0%')
+      .attr('y1', '0%')
+      .attr('x2', '0%')
+      .attr('y2', '100%')
+    gradient.append('stop')
+      .attr('offset', '0%')
+      .attr('stop-color', '#BFC3C7')
+      .attr('stop-opacity', 0.12)
+    gradient.append('stop')
+      .attr('offset', '100%')
+      .attr('stop-color', '#BFC3C7')
+      .attr('stop-opacity', 0)
+  }, [yValues, dimensions])
+
+  return (
+    <div className='w-full h-full' ref={typedContainerRef} style={{ position: 'relative' }}>
+      <svg
+        ref={ref}
+        width='100%'
+        height='100%'
+        style={{ display: 'block', background: '#0B1016', borderRadius: 6 }}
+      />
+    </div>
+  )
+}
+
+export default TrendLine

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/components/icons/TrendDownIcon.jsx

@@ -0,0 +1,41 @@
+import * as React from 'react'
+import styles from './Icons.module.css'
+import { SMALL, MAIN_DARK_BLUE } from '../constants'
+
+const TrendDownIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = SMALL,
+  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='M2.66602 2.25L5.83487 8.1916C6.20065 8.87744 7.1748 8.90203 7.57471 8.2355L8.77521 6.23467C9.1712 5.5747 10.1331 5.59072 10.5069 6.26352L14.666 13.75M14.666 13.75L11.166 12.75M14.666 13.75V9.75' stroke='white' strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    default:
+      break
+  }
+  return icon
+}
+
+export default TrendDownIcon

package/src/components/icons/TrendUpIcon.jsx

@@ -0,0 +1,43 @@
+import * as React from 'react'
+import styles from './Icons.module.css'
+import { SMALL, MAIN_DARK_BLUE } from '../constants'
+
+const TrendUpIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = SMALL,
+  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='M0.833984 12.25L4.00284 6.3084C4.36862 5.62256 5.34277 5.59797 5.74268 6.2645L6.94318 8.26533C7.33917 8.9253 8.30105 8.90928 8.67483 8.23648L12.834 0.75M12.834 0.75L9.33398 1.75M12.834 0.75V4.75' stroke='white' strokeLinecap='round' strokeLinejoin='round' />
+
+        </svg>
+      )
+      break
+    default:
+      break
+  }
+  return icon
+}
+
+export default TrendUpIcon

package/src/components/icons/index.js

@@ -209,6 +209,8 @@ import TaxonomyIcon from './TaxonomyIcon'
 import TeamsIcon from './TeamsIcon'
 import TerminalIcon from './TerminalIcon'
 import TrashIcon from './TrashIcon'
+import TrendDownIcon from './TrendDownIcon'
+import TrendUpIcon from './TrendUpIcon'
 import TwoUsersIcon from './TwoUsersIcon'
 import UpgradeIcon from './UpgradeIcon'
 import UploadFileIcon from './UploadFileIcon'
@@ -438,6 +440,8 @@ export default {
   TeamsIcon,
   TerminalIcon,
   TrashIcon,
+  TrendDownIcon,
+  TrendUpIcon,
   TwoUsersIcon,
   UpgradeIcon,
   UploadFileIcon,

package/src/stories/ArcMetric.stories.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import ArcMetric from '../components/ArcMetric'
+
+export default {
+  title: 'Platformatic/Metrics/ArcMetric',
+  component: ArcMetric
+}
+
+export const Default = () => (
+  <ArcMetric
+    value={50}
+    max={100}
+    unit='MB'
+    title='Memory Allocation & Usage'
+    helper={<><span>100 MB</span><br /><span>Allocated</span></>}
+  />
+)

package/src/stories/MetricInfoBox.stories.jsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import MetricInfoBox from '../components/MetricInfoBox'
+import TrendMetric from '../components/TrendMetric'
+
+export default {
+  title: 'Platformatic/Metrics/MetricInfoBox',
+  component: MetricInfoBox
+}
+
+export const Default = () => (
+  <MetricInfoBox
+    title='Memory Allocation & 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'
+  >
+    <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'
+    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>
+)

package/src/stories/TrendLine.stories.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import TrendLine from '../components/TrendLine'
+
+export default {
+  title: 'Components/TrendLine',
+  component: TrendLine
+}
+
+const Template = (args) => (
+  <div style={{ background: '#0B1016', padding: 24, minHeight: 180 }}>
+    <TrendLine {...args} />
+  </div>
+)
+
+export const Default = Template.bind({})
+Default.args = {
+  yValues: [20, 40, 30, 50, 35, 60, 55, 70, 65, 80, 60, 75, 70, 90, 85],
+  width: 400,
+  height: 120
+}