robobyte-front-builder 1.0.19 → 1.0.23

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

@@ -0,0 +1,300 @@
+import { Box, Typography, Tooltip } from '@mui/material'
+import ViewerComponentWrapper from '../ViewerComponentWrapper'
+import { resolveProps, resolveValue } from 'services/builderHelper/resolveProps'
+import { evaluateThreshold, resolveMuiColor } from 'services/builderHelper/thresholdEngine'
+import { formatNumber } from 'services/builderHelper/numberFormat'
+import { resolveColorSchema, DEFAULT_PALETTE } from 'services/builderHelper/colorSchema'
+import { getJSCalculationFunction, getUrlParams } from 'services/builderHelper/jsExecutor'
+
+// ── Resolve a single field object (value or expression) ───────────────────────
+// Handles { valueType: 'value', value } and { valueType: 'expression', expression }
+// as well as plain strings (backward compat).
+
+function resolveField(field, viewerContext) {
+  if (field == null) return undefined
+  // Plain string (legacy / direct binding)
+  if (typeof field === 'string') return field
+
+  const { form = {}, data = {}, setData = () => {}, dataRef, reportRefs,
+          openDialog = () => {}, closeDialog = () => {}, page } = viewerContext ?? {}
+
+  const rawDataRef    = dataRef
+  const dataRefVal    = rawDataRef?.current !== undefined ? rawDataRef.current : (rawDataRef ?? {})
+  const rawReportRefs = reportRefs
+  const reportRefsVal = rawReportRefs?.current !== undefined ? rawReportRefs.current : (rawReportRefs ?? {})
+
+  const execContext = {
+    form, data, setData,
+    dataRef: dataRefVal, reportRefs: reportRefsVal,
+    openDialog, closeDialog,
+    page: page ?? { data, setData, dataRef: dataRefVal, reportRefs: reportRefsVal },
+    dataItem: viewerContext?.dataItem ?? null,
+    itemIndex: viewerContext?.itemIndex ?? null,
+  }
+
+  if (field.valueType === 'value') return field.value
+
+  if (field.valueType === 'expression' && field.expression?.code) {
+    try {
+      const calc  = getJSCalculationFunction(field.expression.code, execContext)
+      const value = calc(form, data, setData, dataRefVal, reportRefsVal, openDialog, closeDialog, getUrlParams(), page)
+      if (value && typeof value.then === 'function') return undefined
+      return value
+    } catch { return undefined }
+  }
+
+  return undefined
+}
+
+// ── Marker shapes ─────────────────────────────────────────────────────────────
+
+function MarkerShape({ shape, color, trackH }) {
+  if (shape === 'diamond') {
+    const s = Math.max(6, trackH * 0.9)
+    return (
+      <Box sx={{ width: s, height: s, bgcolor: color, transform: 'rotate(45deg)', borderRadius: '2px', flexShrink: 0 }} />
+    )
+  }
+  if (shape === 'circle') {
+    const s = Math.max(6, trackH * 0.9)
+    return (
+      <Box sx={{ width: s, height: s, borderRadius: '50%', bgcolor: color, flexShrink: 0 }} />
+    )
+  }
+  // default: vertical line with triangle cap
+  return (
+    <Box sx={{
+      position: 'relative',
+      width: 3, height: trackH + 6,
+      bgcolor: color, borderRadius: 2, flexShrink: 0,
+      '&::after': {
+        content: '""', position: 'absolute',
+        bottom: '100%', left: '50%', transform: 'translateX(-50%)',
+        width: 0, height: 0,
+        borderLeft: '5px solid transparent', borderRight: '5px solid transparent',
+        borderBottom: `5px solid ${color}`,
+      },
+    }} />
+  )
+}
+
+// ── Build track ───────────────────────────────────────────────────────────────
+//
+// Gradient → CSS linear-gradient from colorSchema colors evenly spread.
+// Steps    → N discrete equal-width blocks by default; threshold boundaries
+//            override both zone edges AND colors (threshold color > schema color).
+
+function buildTrack({ scaleMode, thresholds, colorSchema, segments, numMin, numMax, range }) {
+  const isSteps = scaleMode === 'steps' || thresholds.length >= 2
+  const n       = Math.max(2, Number(segments) || 5)
+
+  if (isSteps) {
+    if (thresholds.length >= 2) {
+      // Threshold-driven zone boundaries
+      const pts         = [numMin, ...thresholds.map(t => Number(t.value)), numMax].sort((a, b) => a - b)
+      const zoneCount   = pts.length - 1
+      const schemaColors = resolveColorSchema(colorSchema, zoneCount, DEFAULT_PALETTE) ?? DEFAULT_PALETTE
+
+      return {
+        type: 'steps',
+        bars: pts.slice(0, -1).map((start, i) => {
+          const end    = pts[i + 1]
+          const midVal = (start + end) / 2
+          const rule   = evaluateThreshold(midVal, thresholds)
+          // Priority: explicit threshold color → colorSchema index
+          const col    = rule?.color
+            ? resolveMuiColor(rule.color).color
+            : schemaColors[i % schemaColors.length]
+          return { width: ((end - start) / range) * 100, color: col, from: start, to: end }
+        }),
+      }
+    }
+
+    // Steps without thresholds — equal-width segments from schema
+    const schemaColors = resolveColorSchema(colorSchema, n, DEFAULT_PALETTE) ?? DEFAULT_PALETTE
+    return {
+      type: 'steps',
+      bars: Array.from({ length: n }, (_, i) => {
+        const start = numMin + (range / n) * i
+        const end   = numMin + (range / n) * (i + 1)
+        return {
+          width: 100 / n,
+          color: schemaColors[i % schemaColors.length],
+          from: start,
+          to: end,
+        }
+      }),
+    }
+  }
+
+  // Gradient mode — evenly-spaced stops from colorSchema
+  const schemaColors = resolveColorSchema(colorSchema, n, DEFAULT_PALETTE) ?? DEFAULT_PALETTE
+  const stopColors   = Array.from({ length: n }, (_, i) => schemaColors[i % schemaColors.length])
+  const gradient     = `linear-gradient(to right, ${stopColors
+    .map((c, i) => `${c} ${((i / Math.max(n - 1, 1)) * 100).toFixed(1)}%`)
+    .join(', ')})`
+
+  return { type: 'gradient', gradient }
+}
+
+// ── Main renderer ─────────────────────────────────────────────────────────────
+
+export default function ColorScaleRenderer({ node, viewerContext }) {
+  const main = resolveProps(node, 'main', viewerContext)
+  const {
+    // primary marker
+    valueKey,
+    markerColor = '#333',
+    showMarker  = true,
+
+    // additional markers: [{ valueKey: fieldObj, color, label, shape }]
+    markers     = [],
+
+    // scale range
+    min = 0,
+    max = 100,
+
+    // track coloring
+    scaleMode   = 'gradient',
+    colorSchema,
+    thresholds  = [],
+    segments    = 5,
+
+    // track appearance
+    height       = 12,
+    borderRadius = 6,
+    showLabels   = true,
+
+    // format
+    format = 'number',
+    prefix = '',
+    suffix = '',
+
+    // header
+    label,
+    labelFontSize   = 11,
+    labelFontWeight = 400,
+    labelColor      = 'text.secondary',
+  } = main
+
+  const numMin = Number(min)
+  const numMax = Number(max)
+  const range  = numMax - numMin || 1
+  const trackH = Number(height) || 12
+
+  const { data, isEditMode } = viewerContext ?? {}
+  const inBuilder = isEditMode !== false
+
+  // ── Primary marker ────────────────────────────────────────────────────────
+  const rawPrimary = resolveValue(valueKey, data)
+  const numPrimary = rawPrimary != null ? Number(rawPrimary) : (inBuilder ? numMin + range * 0.6 : null)
+  const pctPrimary = numPrimary != null ? Math.min(100, Math.max(0, ((numPrimary - numMin) / range) * 100)) : null
+  const fmtPrimary = numPrimary != null ? formatNumber(numPrimary, { format, prefix, suffix }) : null
+
+  // ── Additional markers — each valueKey is a field object (or plain string) ─
+  const resolvedMarkers = (Array.isArray(markers) ? markers : []).map((m, i) => {
+    const resolvedKey = resolveField(m.valueKey, viewerContext)
+    const raw  = resolveValue(resolvedKey, data)
+    const num  = raw != null ? Number(raw) : (inBuilder ? numMin + range * (0.25 + i * 0.18) : null)
+    const pct  = num != null ? Math.min(100, Math.max(0, ((num - numMin) / range) * 100)) : null
+    const fmt  = num != null ? formatNumber(num, { format, prefix, suffix }) : null
+    return { ...m, num, pct, fmt }
+  })
+
+  // ── Collect all active markers ────────────────────────────────────────────
+  const activeMarkers = []
+  if (showMarker && (valueKey || inBuilder)) {
+    activeMarkers.push({ pct: pctPrimary, fmt: fmtPrimary, color: markerColor, label: label || '', shape: 'line' })
+  }
+  resolvedMarkers.forEach(m => {
+    if (m.pct != null) {
+      activeMarkers.push({ pct: m.pct, fmt: m.fmt, color: m.color || '#333', label: m.label || '', shape: m.shape || 'line' })
+    }
+  })
+
+  // ── Build track ───────────────────────────────────────────────────────────
+  const track = buildTrack({ scaleMode, thresholds, colorSchema, segments, numMin, numMax, range })
+
+  return (
+    <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+      <Box>
+        {/* Header */}
+        {(label || fmtPrimary) && (
+          <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.5 }}>
+            {label && (
+              <Typography sx={{ fontSize: Number(labelFontSize), fontWeight: labelFontWeight, color: labelColor }}>
+                {label}
+              </Typography>
+            )}
+            {fmtPrimary && (
+              <Typography sx={{ fontSize: 11, fontWeight: 700, color: 'text.primary' }}>
+                {fmtPrimary}
+              </Typography>
+            )}
+          </Box>
+        )}
+
+        {/* Track */}
+        <Box sx={{ position: 'relative', height: trackH, borderRadius, overflow: 'visible' }}>
+
+          {track.type === 'gradient' && (
+            <Box sx={{ height: '100%', borderRadius, background: track.gradient }} />
+          )}
+
+          {track.type === 'steps' && (
+            <Box sx={{ display: 'flex', height: '100%', borderRadius, overflow: 'hidden' }}>
+              {track.bars.map((seg, i) => (
+                <Tooltip
+                  key={i}
+                  title={`${formatNumber(seg.from, { format, prefix, suffix })} – ${formatNumber(seg.to, { format, prefix, suffix })}`}
+                  placement='top'
+                >
+                  <Box sx={{ width: `${seg.width}%`, bgcolor: seg.color, height: '100%', flexShrink: 0 }} />
+                </Tooltip>
+              ))}
+            </Box>
+          )}
+
+          {/* Markers */}
+          {activeMarkers.map((m, i) => {
+            if (m.pct == null) return null
+            const tooltipText = [m.label, m.fmt].filter(Boolean).join(': ')
+            return (
+              <Tooltip key={i} title={tooltipText || ''} placement='top'>
+                <Box sx={{
+                  position: 'absolute',
+                  left: `${m.pct}%`,
+                  top: '50%',
+                  transform: 'translate(-50%, -50%)',
+                  zIndex: 2 + i,
+                  display: 'flex', alignItems: 'center', justifyContent: 'center',
+                }}>
+                  <MarkerShape shape={m.shape} color={m.color} trackH={trackH} />
+                </Box>
+              </Tooltip>
+            )
+          })}
+        </Box>
+
+        {/* Min / Max + marker values */}
+        {showLabels && (
+          <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mt: 0.5 }}>
+            <Typography sx={{ fontSize: 10, color: 'text.disabled' }}>
+              {formatNumber(numMin, { format, prefix, suffix })}
+            </Typography>
+            <Box sx={{ display: 'flex', gap: 1.5, alignItems: 'center' }}>
+              {activeMarkers.filter(m => m.fmt).map((m, i) => (
+                <Typography key={i} sx={{ fontSize: 10, color: m.color, fontWeight: 600 }}>
+                  {m.label ? `${m.label}: ` : ''}{m.fmt}
+                </Typography>
+              ))}
+            </Box>
+            <Typography sx={{ fontSize: 10, color: 'text.disabled' }}>
+              {formatNumber(numMax, { format, prefix, suffix })}
+            </Typography>
+          </Box>
+        )}
+      </Box>
+    </ViewerComponentWrapper>
+  )
+}

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

@@ -0,0 +1,133 @@
+import { useMemo } from 'react'
+import { Box, Typography, Tooltip } 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'
+import { schemaColor, DEFAULT_PALETTE } from 'services/builderHelper/colorSchema'
+
+// ── Edit-mode sample data ─────────────────────────────────────────────────────
+
+const SAMPLE_ITEMS = [
+  { label: 'Category A', value: 5600 },
+  { label: 'Category B', value: 4820 },
+  { label: 'Category C', value: 3210 },
+  { label: 'Category D', value: 2540 },
+]
+
+// ── Renderer ──────────────────────────────────────────────────────────────────
+
+export default function ComparisonBarsRenderer({ node, viewerContext }) {
+  const main = resolveProps(node, 'main', viewerContext)
+  const { data, isEditMode } = viewerContext ?? {}
+  const inBuilder = isEditMode !== false
+
+  const {
+    // data
+    dataKey,
+    labelField  = 'label',
+    valueField  = 'value',
+    colorField  = 'color',
+
+    // coloring
+    color       = '#1976d2',     // fallback base color
+    colorSchema,
+    thresholds  = [],
+
+    // scale
+    maxKey,                       // data key whose value overrides auto-max
+    maxItems,                     // cap how many bars to render
+
+    // layout
+    height      = 8,              // bar height in px  (definition field: height)
+    gap         = 10,
+    showValues  = true,
+    showLabels  = true,
+    labelWidth  = 100,
+    sortDesc    = false,
+
+    // bar shape
+    upperRadius = 4,
+    lowerRadius = 0,
+
+    // track
+    trackColor  = 'action.hover',
+
+    // format
+    format      = 'number',
+    prefix      = '',
+    suffix      = '',
+  } = main
+
+  const raw = resolveValue(dataKey, data)
+  const noDataBound = inBuilder && (!Array.isArray(raw) || raw.length === 0)
+
+  const items = useMemo(() => {
+    const source = noDataBound ? SAMPLE_ITEMS : (Array.isArray(raw) ? raw : [])
+    let mapped = source.map(item => ({
+      label:     item[labelField] ?? item['label'] ?? '',
+      value:     Number(item[valueField] ?? item['value'] ?? 0),
+      dataColor: item[colorField] || item['color'] || null,
+    }))
+    if (sortDesc) mapped = [...mapped].sort((a, b) => b.value - a.value)
+    if (maxItems) mapped = mapped.slice(0, Number(maxItems))
+    return mapped
+  }, [raw, noDataBound, labelField, valueField, colorField, sortDesc, maxItems])
+
+  const explicitMax = maxKey ? resolveValue(maxKey, data) : null
+  const autoMax     = items.length ? Math.max(...items.map(i => i.value)) : 1
+  const max         = explicitMax != null ? Number(explicitMax) : (autoMax || 1)
+
+  const barH       = Math.max(2, Number(height) || 8)
+  const borderRad  = `${Number(upperRadius)||0}px ${Number(upperRadius)||0}px ${Number(lowerRadius)||0}px ${Number(lowerRadius)||0}px`
+
+  return (
+    <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: `${gap}px` }}>
+        {items.map((item, i) => {
+          const pct = Math.min(100, Math.max(0, (item.value / max) * 100))
+
+          // Color priority: threshold → colorSchema (with dataColor) → base color
+          const { color: threshColor } = thresholdColors(item.value, thresholds)
+          const threshApplied = thresholds.length && threshColor !== 'inherit'
+          const barColor = threshApplied
+            ? threshColor
+            : (schemaColor(colorSchema, i, item.dataColor, items.length, DEFAULT_PALETTE) ?? color)
+
+          return (
+            <Box key={i} sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+              {showLabels && (
+                <Typography noWrap sx={{
+                  fontSize: 12, color: 'text.secondary',
+                  width: labelWidth, flexShrink: 0, textAlign: 'right',
+                }}>
+                  {item.label}
+                </Typography>
+              )}
+              <Tooltip title={formatNumber(item.value, { format, prefix, suffix })} placement='top'>
+                <Box sx={{
+                  flex: 1, position: 'relative',
+                  height: barH, bgcolor: trackColor, borderRadius: borderRad,
+                }}>
+                  <Box sx={{
+                    position: 'absolute', left: 0, top: 0, bottom: 0,
+                    width: `${pct}%`, bgcolor: barColor, borderRadius: borderRad,
+                    transition: 'width .4s ease',
+                  }} />
+                </Box>
+              </Tooltip>
+              {showValues && (
+                <Typography sx={{
+                  fontSize: 11, fontWeight: 700, color: barColor,
+                  minWidth: 48, flexShrink: 0,
+                }}>
+                  {formatNumber(item.value, { format, prefix, suffix })}
+                </Typography>
+              )}
+            </Box>
+          )
+        })}
+      </Box>
+    </ViewerComponentWrapper>
+  )
+}

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

@@ -12,7 +12,7 @@ export default function ContainerRenderer({ node, viewerContext }) {
   const { data, form, isEditMode, builderContext } = viewerContext
 
   // Resolve style props for layout configuration
-  const styleProps = resolveProps(node, 'style', { form, data })
+  const styleProps = resolveProps(node, 'style', viewerContext)
 
   // Handle drop at specific index
   const handleDropAtIndex = index => e => {
@@ -45,6 +45,8 @@ export default function ContainerRenderer({ node, viewerContext }) {
 
       if (componentData) {
         const component = JSON.parse(componentData)
+        // Dialogs can only be placed in the Dialogs Zone, not inside regular containers
+        if (component.type === 'dialog') return
         const newNode = createNode(component.type,!!component.value ? JSON.parse(component.value) : null)
         builderContext.setSchema(prev => ({
           ...prev,