robobyte-front-builder 1.0.19 → 1.0.21

package/src/views/builder/viewer/renderers/FunnelRenderer.jsx

@@ -0,0 +1,93 @@
+import { useMemo } from 'react'
+import { Box, Typography } from '@mui/material'
+import ViewerComponentWrapper from '../ViewerComponentWrapper'
+import { resolveProps, resolveValue } from 'services/builderHelper/resolveProps'
+import { formatNumber } from 'services/builderHelper/numberFormat'
+import { schemaColor, DEFAULT_PALETTE } from 'services/builderHelper/colorSchema'
+
+export default function FunnelRenderer({ node, viewerContext }) {
+  const main = resolveProps(node, 'main', viewerContext)
+  const { data, isEditMode } = viewerContext ?? {}
+  const inBuilder = isEditMode !== false
+
+  const {
+    dataKey,
+    labelField  = 'label',
+    valueField  = 'value',
+    colorField  = 'color',
+    colorSchema,
+    height      = 180,
+    showPercent = true,
+    showValues  = true,
+    showLabels  = true,
+    barRadius   = 4,
+    gap         = 4,
+    format      = 'compact',
+    prefix      = '',
+    suffix      = '',
+  } = main
+
+  const SAMPLE_FUNNEL = [
+    { label: 'Leads',      value: 1200 },
+    { label: 'Qualified',  value: 760 },
+    { label: 'Proposals',  value: 420 },
+    { label: 'Closed',     value: 180 },
+  ]
+
+  const raw = resolveValue(dataKey, data)
+  const noDataBound = inBuilder && (!Array.isArray(raw) || raw.length === 0)
+
+  const items = useMemo(() => {
+    const source = noDataBound ? SAMPLE_FUNNEL : (Array.isArray(raw) ? raw : [])
+    if (!source.length) return []
+    const mapped = source.map(item => ({
+      label:     item[labelField] ?? item['label'] ?? '',
+      value:     Number(item[valueField] ?? item['value'] ?? 0),
+      dataColor: item[colorField] || item['color'] || null,
+    }))
+    const max = mapped[0]?.value || 1
+    return mapped.map((item, i) => ({
+      ...item,
+      pct:     item.value / max,
+      convPct: i === 0 ? 100 : ((item.value / mapped[i - 1].value) * 100),
+    }))
+  }, [raw, noDataBound, labelField, valueField, colorField])
+
+  return (
+    <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+      <Box sx={{ height: Number(height), display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
+        {items.map((item, i) => {
+          const barColor = schemaColor(colorSchema, i, item.dataColor, items.length, DEFAULT_PALETTE)
+            ?? DEFAULT_PALETTE[i % DEFAULT_PALETTE.length]
+          const barW = `${Math.max(item.pct * 100, 10)}%`
+          const barH = `${Math.floor((Number(height) - gap * (items.length - 1)) / items.length)}px`
+          return (
+            <Box key={i} sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+              <Box sx={{ flex: 1, display: 'flex', justifyContent: 'center' }}>
+                <Box sx={{
+                  width: barW, height: barH, bgcolor: barColor,
+                  borderRadius: `${barRadius}px`, transition: 'width .3s',
+                  display: 'flex', alignItems: 'center', justifyContent: 'center',
+                }}>
+                  {showValues && (
+                    <Typography sx={{ fontSize: 11, fontWeight: 700, color: 'white', textShadow: '0 1px 2px rgba(0,0,0,0.4)' }}>
+                      {formatNumber(item.value, { format, prefix, suffix })}
+                    </Typography>
+                  )}
+                </Box>
+              </Box>
+              {showLabels && (
+                <Box sx={{ minWidth: 90, flexShrink: 0 }}>
+                  <Typography sx={{ fontSize: 11, fontWeight: 600, color: 'text.primary' }}>{item.label}</Typography>
+                  {showPercent && i > 0 && (
+                    <Typography sx={{ fontSize: 10, color: 'text.secondary' }}>{item.convPct.toFixed(1)}% of prev</Typography>
+                  )}
+                </Box>
+              )}
+            </Box>
+          )
+        })}
+      </Box>
+    </ViewerComponentWrapper>
+  )
+}

package/src/views/builder/viewer/renderers/GaugeRenderer.jsx

@@ -0,0 +1,159 @@
+import { Box, Typography } from '@mui/material'
+import ViewerComponentWrapper from '../ViewerComponentWrapper'
+import { resolveProps, resolveValue } from 'services/builderHelper/resolveProps'
+import { thresholdColors } from 'services/builderHelper/thresholdEngine'
+import { formatNumber } from 'services/builderHelper/numberFormat'
+
+/**
+ * SVG semicircular gauge — no external library needed.
+ * Arc goes from 210° to 330° (210° sweep).
+ */
+export default function GaugeRenderer({ node, viewerContext }) {
+  const main = resolveProps(node, 'main', viewerContext)
+  const { data, isEditMode } = viewerContext ?? {}
+  const inBuilder = isEditMode !== false
+
+  const {
+    valueKey,
+    min         = 0,
+    max         = 100,
+    label,
+    sublabel,
+    format      = 'number',
+    decimals,
+    prefix      = '',
+    suffix      = '',
+    thresholds  = [],
+    size        = 160,
+    strokeWidth = 14,
+    trackColor  = '#f0f0f0',
+    color       = '#1976d2',
+    showValue   = true,
+    showMinMax  = false,
+    segments,
+    needleMode  = false,
+    // label styling (SVG text inside gauge)
+    labelFontSize,          // default: sz * 0.07 (proportional)
+    labelColor   = '#888',
+    labelFontWeight = 'normal',
+    // sublabel styling (below gauge)
+    sublabelFontSize   = 12,
+    sublabelFontWeight = 400,
+    sublabelColor      = 'text.secondary',
+  } = main
+
+  const rawValue  = resolveValue(valueKey, data)
+  const numValue  = rawValue != null ? Number(rawValue) : (isEditMode ? (Number(max) * 0.65) : 0)
+  const numMin    = Number(min)
+  const numMax    = Number(max)
+  const sz        = Number(size) || 160
+  const sw        = Number(strokeWidth) || 14
+  const cx        = sz / 2
+  const cy        = sz / 2
+  const r         = (sz - sw * 2 - 8) / 2
+
+  // Arc from 210° to 330° (a 300° sweep)
+  const START_ANGLE = 210
+  const SWEEP       = 300
+
+  const pct = Math.min(1, Math.max(0, (numValue - numMin) / (numMax - numMin || 1)))
+
+  const { color: threshColor } = thresholdColors(numValue, thresholds)
+  const arcColor = thresholds.length && threshColor !== 'inherit' ? threshColor : color
+
+  // Polar → Cartesian
+  const polar = (angle, radius) => {
+    const rad = (angle - 90) * Math.PI / 180
+    return { x: cx + radius * Math.cos(rad), y: cy + radius * Math.sin(rad) }
+  }
+
+  const arcPath = (startDeg, sweepDeg, radius) => {
+    const s = polar(startDeg, radius)
+    const e = polar(startDeg + sweepDeg, radius)
+    const large = sweepDeg > 180 ? 1 : 0
+    return `M ${s.x} ${s.y} A ${radius} ${radius} 0 ${large} 1 ${e.x} ${e.y}`
+  }
+
+  const valueSweep = pct * SWEEP
+  const formatted  = rawValue != null
+    ? formatNumber(rawValue, { format, decimals, prefix, suffix })
+    : '—'
+
+  // Height of the visible portion of the SVG.
+  // Base: arc ends at y = cy + sin(60°) × r, add sw/2 for stroke edge.
+  // Min/Max labels sit at radius (r + sw + 14) at the same 60° drop angle,
+  // plus half their own font size so the text isn't clipped either.
+  const minMaxFontSize = sz * 0.065
+  const arcBottom      = cy + Math.sin(Math.PI / 3) * r + sw / 2
+  const labelBottom    = cy + Math.sin(Math.PI / 3) * (r + sw + 14) + minMaxFontSize / 2
+  const gaugeH         = Math.ceil((showMinMax ? Math.max(arcBottom, labelBottom) : arcBottom) + 8)
+
+  // Needle tip position
+  const needleTip = polar(START_ANGLE + valueSweep, r - sw / 2 - 2)
+  const needleBase1 = polar(START_ANGLE + valueSweep - 90, sw * 0.25)
+  const needleBase2 = polar(START_ANGLE + valueSweep + 90, sw * 0.25)
+
+  return (
+    <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+      <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+        <Box sx={{ width: sz, height: gaugeH }}>
+          <svg width={sz} height={gaugeH} viewBox={`0 0 ${sz} ${gaugeH}`}>
+            {/* Track */}
+            <path d={arcPath(START_ANGLE, SWEEP, r)} fill='none' stroke={trackColor} strokeWidth={sw} strokeLinecap='round' />
+
+            {/* Value arc */}
+            {valueSweep > 0 && (
+              <path d={arcPath(START_ANGLE, valueSweep, r)} fill='none'
+                stroke={arcColor} strokeWidth={sw} strokeLinecap='round' />
+            )}
+
+            {/* Needle mode */}
+            {needleMode && valueSweep > 0 && (
+              <>
+                <polygon
+                  points={`${needleTip.x},${needleTip.y} ${needleBase1.x},${needleBase1.y} ${needleBase2.x},${needleBase2.y}`}
+                  fill={arcColor}
+                />
+                <circle cx={cx} cy={cy} r={sw * 0.45} fill={arcColor} />
+              </>
+            )}
+
+            {/* Center content */}
+            {showValue && (
+              <text x={cx} y={cy + r * 0.25} textAnchor='middle' dominantBaseline='middle'
+                fontSize={sz * 0.13} fontWeight='800' fill={arcColor}>
+                {formatted}
+              </text>
+            )}
+            {label && (
+              <text x={cx} y={cy + r * 0.5} textAnchor='middle' dominantBaseline='middle'
+                fontSize={labelFontSize != null ? Number(labelFontSize) : sz * 0.07}
+                fontWeight={labelFontWeight}
+                fill={labelColor}>
+                {label}
+              </text>
+            )}
+
+            {/* Min / Max labels */}
+            {showMinMax && (() => {
+              const minPt = polar(START_ANGLE, r + sw + 14)
+              const maxPt = polar(START_ANGLE + SWEEP, r + sw + 14)
+              return (
+                <>
+                  <text x={minPt.x} y={minPt.y} textAnchor='middle' fontSize={sz * 0.065} fill='#bbb'>{numMin}</text>
+                  <text x={maxPt.x} y={maxPt.y} textAnchor='middle' fontSize={sz * 0.065} fill='#bbb'>{numMax}</text>
+                </>
+              )
+            })()}
+          </svg>
+        </Box>
+
+        {sublabel && (
+          <Typography sx={{ fontSize: Number(sublabelFontSize), fontWeight: sublabelFontWeight, color: sublabelColor, mt: 0.5, lineHeight: 1.3 }}>
+            {sublabel}
+          </Typography>
+        )}
+      </Box>
+    </ViewerComponentWrapper>
+  )
+}

package/src/views/builder/viewer/renderers/HeaderRenderer.jsx

@@ -1,22 +1,44 @@
 import { Typography } from '@mui/material'
 import ViewerComponentWrapper from '../ViewerComponentWrapper'
+import AdornedLabel from '../AdornedLabel'
 import { resolveProps } from 'services/builderHelper/resolveProps'
 
 export default function HeaderRenderer({ node, viewerContext }) {
-  const { data, form } = viewerContext
-  const main = resolveProps(node, 'main', { form, data })
+  const main = resolveProps(node, 'main', viewerContext)
+  const {
+    text, label, variant, component, color, align, gutterBottom, noWrap,
+    prefix, suffix,
+    prefixColor, prefixSize,
+    suffixColor, suffixSize,
+    iconColor, iconSize, iconGap,
+  } = main
+
+  const content = text || label || 'Header'
+
+  const prefixSx = (prefixColor || prefixSize) ? { color: prefixColor, fontSize: prefixSize } : undefined
+  const suffixSx = (suffixColor || suffixSize) ? { color: suffixColor, fontSize: suffixSize } : undefined
 
   return (
     <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
       <Typography
-        variant={main.variant || 'h1'}
-        component={main.component}
-        color={main.color}
-        align={main.align}
-        gutterBottom={main.gutterBottom}
-        noWrap={main.noWrap}
+        variant={variant || 'h1'}
+        component={component}
+        color={color}
+        align={align}
+        gutterBottom={gutterBottom}
+        noWrap={noWrap}
       >
-        {main.text || main.label || 'Header'}
+        <AdornedLabel
+          prefix={prefix}
+          suffix={suffix}
+          iconSize={iconSize || 'inherit'}
+          iconColor={iconColor}
+          prefixSx={prefixSx}
+          suffixSx={suffixSx}
+          gap={iconGap ?? 0.5}
+        >
+          {content}
+        </AdornedLabel>
       </Typography>
     </ViewerComponentWrapper>
   )