robobyte-front-builder 1.0.17 → 1.0.21

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

@@ -0,0 +1,294 @@
+import { useMemo } from 'react'
+import {
+  ResponsiveContainer, PieChart, Pie, Cell, Tooltip, Legend, Label,
+} from 'recharts'
+import { Box, Typography } from '@mui/material'
+import ViewerComponentWrapper from '../ViewerComponentWrapper'
+import { resolveProps, resolveValue } from 'services/builderHelper/resolveProps'
+import { formatNumber } from 'services/builderHelper/numberFormat'
+import { generateTints, resolveColorSchema } from 'services/builderHelper/colorSchema'
+
+const DEFAULT_COLORS = ['#1976d2','#9c27b0','#e91e63','#ff9800','#4caf50','#00bcd4','#f44336','#3f51b5']
+
+// ── Tooltip ───────────────────────────────────────────────────────────────────
+// Shows: ring/set label (multi only) → slice name → value → percent
+
+const CustomTooltip = ({ active, payload, format, prefix, suffix }) => {
+  if (!active || !payload?.length) return null
+  const item = payload[0]
+  const seriesName = item.payload?.seriesName  // injected in multi mode
+  return (
+    <Box sx={{ bgcolor: 'background.paper', border: '1px solid', borderColor: 'divider',
+      borderRadius: 1, px: 1.25, py: 0.75, boxShadow: 2, fontSize: 12 }}>
+      {seriesName && (
+        <Box sx={{ fontSize: 11, color: 'text.secondary', mb: 0.25 }}>{seriesName}</Box>
+      )}
+      <Box fontWeight={600}>{item.name}</Box>
+      <Box>{formatNumber(item.value, { format, prefix, suffix })}</Box>
+      {item.percent != null && !isNaN(item.percent) && (
+        <Box color='text.secondary'>{(item.percent * 100).toFixed(1)}%</Box>
+      )}
+    </Box>
+  )
+}
+
+// ── Center label — rendered via Recharts <Label position='center'> ─────────────
+
+function makeCenterLabel({ label, value, format, prefix, suffix, color }) {
+  return function CenterContent({ viewBox }) {
+    const { cx, cy } = viewBox ?? {}
+    if (cx == null) return null
+    const hasValue = value != null
+    const hasLabel = !!label
+    const valueY   = hasLabel ? cy - 10 : cy
+    const labelY   = hasValue ? cy + 12 : cy
+    return (
+      <g>
+        {hasValue && (
+          <text x={cx} y={valueY} textAnchor='middle' dominantBaseline='middle'
+            fontSize='18' fontWeight='800' fill={color}>
+            {formatNumber(value, { format, prefix, suffix })}
+          </text>
+        )}
+        {hasLabel && (
+          <text x={cx} y={labelY} textAnchor='middle' dominantBaseline='middle'
+            fontSize='11' fill='#999'>
+            {label}
+          </text>
+        )}
+      </g>
+    )
+  }
+}
+
+// ── Edit-mode sample data — distinct per ring so they look different ──────────
+
+function makeSampleSlices(ringIndex) {
+  const offsets = [0, -8, 5, -3]
+  const base = [40, 30, 20, 10]
+  return ['A','B','C','D'].map((name, i) => ({
+    name,
+    value: Math.max(5, base[i] + (offsets[ringIndex % offsets.length] ?? 0) * (i % 2 === 0 ? 1 : -1)),
+  }))
+}
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+function parseRadius(val, fallback) {
+  if (val == null) return fallback
+  const n = Number(String(val).replace('%', ''))
+  return isFinite(n) ? n : fallback
+}
+
+function buildSlices(raw, nameField, valueField, colorField, fallbackColors, seriesName) {
+  if (!Array.isArray(raw)) return []
+  const fb = fallbackColors?.length ? fallbackColors : DEFAULT_COLORS
+  return raw.map((item, i) => ({
+    name:       item[nameField] ?? item['name'] ?? item['label'] ?? `Item ${i + 1}`,
+    value:      Number(item[valueField] ?? item['value'] ?? 0),
+    // colorField / 'color' from data always wins; fallback only when absent
+    color:      item[colorField] || item['color'] || (fallbackColors?.length ? fb[i % fb.length] : undefined),
+    // seriesName injected for multi-series tooltip; undefined for single-series
+    ...(seriesName != null ? { seriesName } : {}),
+  }))
+}
+
+// ── Renderer ──────────────────────────────────────────────────────────────────
+
+export default function DonutRenderer({ node, viewerContext }) {
+  const main = resolveProps(node, 'main', viewerContext)
+  const { data, isEditMode } = viewerContext ?? {}
+  const inBuilder = isEditMode !== false
+
+  const {
+    // single-series
+    dataKey,
+    nameField       = 'name',
+    valueField      = 'value',
+    colorField      = 'color',
+    centerLabel,
+    centerKey,
+
+    // multi-series
+    donutType       = 'single',
+    series          = [],
+
+    // single-series color schema
+    colorSchema,
+
+    // layout
+    height          = 200,
+    innerRadius     = 55,
+    outerRadius     = 80,
+    showLegend      = true,
+    legendPosition  = 'bottom',
+    showTooltip     = true,
+    format          = 'number',
+    prefix          = '',
+    suffix          = '',
+    startAngle      = 90,
+    padAngle        = 2,
+    colors,
+  } = main
+
+  const paletteColors = useMemo(() => {
+    try { return Array.isArray(colors) ? colors : (colors ? JSON.parse(colors) : DEFAULT_COLORS) }
+    catch { return DEFAULT_COLORS }
+  }, [colors])
+
+  // Resolve the dataKey expression — may be a string key OR a direct object/array value.
+  // For multi-series: if the resolved value is a plain object (not array), treat it as
+  // the container from which each ring looks up its own field. This supports the pattern:
+  //   dataKey → expression returning { thisYear: [...], lastYear: [...] }
+  //   Ring 1 field: "thisYear", Ring 2 field: "lastYear"
+  const resolvedKey  = resolveValue(dataKey, data)
+  const raw          = Array.isArray(resolvedKey) ? resolvedKey : []
+  const ringSource   = (resolvedKey && typeof resolvedKey === 'object' && !Array.isArray(resolvedKey))
+    ? resolvedKey   // object: use as ring container
+    : data          // fallback: look up ring fields in component data directly
+
+  const noDataBound  = inBuilder && (!ringSource || Object.keys(ringSource).length === 0)
+  const singleColors = useMemo(
+    () => resolveColorSchema(colorSchema, raw.length || 4, paletteColors) ?? [],
+    [colorSchema, raw.length, paletteColors]
+  )
+
+  const chartData    = useMemo(
+    () => buildSlices(
+      (noDataBound && raw.length === 0) ? makeSampleSlices(0) : raw,
+      nameField, valueField, colorField, singleColors,
+    ),
+    [raw, noDataBound, nameField, valueField, colorField, singleColors]
+  )
+
+  const isMulti      = donutType === 'multi'
+  const validSeries  = useMemo(
+    () => (Array.isArray(series) ? series : []).filter(s => s.field),
+    [series]
+  )
+
+  const centerValue  = centerKey ? resolveValue(centerKey, data) : null
+  // Use first ring's first slice color for multi-series center
+  const primaryColor = chartData[0]?.color ?? '#1976d2'
+
+  const h         = Number(height) || 200
+  const innerPct  = parseRadius(innerRadius, 55)
+  const outerPct  = parseRadius(outerRadius, 80)
+  const startDeg  = Number(startAngle) || 90
+
+  // Only show placeholder when nothing is configured at all
+  const isEmpty = isMulti ? validSeries.length === 0 : !dataKey
+  if (inBuilder && isEmpty) {
+    return (
+      <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+        <Box sx={{ height: h, border: '1px dashed', borderColor: 'divider',
+          borderRadius: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+          <Typography variant='caption' color='text.disabled'>
+            {isMulti ? 'Donut — add rings and set their Data Field' : 'Donut — bind dataKey (array)'}
+          </Typography>
+        </Box>
+      </ViewerComponentWrapper>
+    )
+  }
+
+  const ringCount  = validSeries.length || 1
+  const ringGap    = 2
+  const totalSpace = outerPct - innerPct
+  const ringWidth  = Math.max(4, (totalSpace - ringGap * (ringCount - 1)) / ringCount)
+
+  const sharedPieProps = {
+    dataKey:           'value',
+    nameKey:           'name',
+    startAngle:        startDeg,
+    endAngle:          startDeg - 360,
+    paddingAngle:      Number(padAngle) || 0,
+    isAnimationActive: false,
+    labelLine:         false,
+  }
+
+  // Center label works for both single and multi
+  const showCenter    = centerLabel || centerValue != null
+  const CenterContent = showCenter
+    ? makeCenterLabel({ label: centerLabel, value: centerValue, format, prefix, suffix, color: primaryColor })
+    : null
+
+  return (
+    <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+      <ResponsiveContainer width='100%' height={h}>
+        <PieChart>
+          {showTooltip && (
+            <Tooltip
+              content={<CustomTooltip format={format} prefix={prefix} suffix={suffix} />}
+              isAnimationActive={false}
+            />
+          )}
+          {showLegend && (
+            <Legend
+              layout={legendPosition === 'right' ? 'vertical' : 'horizontal'}
+              verticalAlign={legendPosition === 'right' ? 'middle' : legendPosition === 'top' ? 'top' : 'bottom'}
+              align={legendPosition === 'right' ? 'right' : 'center'}
+              iconType='circle' iconSize={8}
+              formatter={v => <span style={{ fontSize: 11, color: '#555' }}>{v}</span>}
+            />
+          )}
+
+          {/* ── Multi-series: one ring per series ── */}
+          {isMulti && validSeries.map((s, i) => {
+            const ringRaw    = resolveValue(s.field, ringSource) ?? []
+            const rawToBuild = (noDataBound && ringRaw.length === 0) ? makeSampleSlices(i) : ringRaw
+            const ringLabel   = s.name || s.field || `Ring ${i + 1}`
+            const sliceCount  = rawToBuild.length || 4
+            const colorMode   = s.colorMode || 'tints'
+            // Resolve slice color palette based on the ring's chosen schema:
+            //   tints   → monochromatic tints of the ring's base color
+            //   palette → shared global palette
+            //   data    → empty array (buildSlices will read color from each data item only)
+            //   custom  → user-supplied JSON array of colors
+            let sliceColors
+            if (colorMode === 'tints' && s.color) {
+              sliceColors = generateTints(s.color, sliceCount)
+            } else if (colorMode === 'custom') {
+              try { sliceColors = JSON.parse(s.customColors || '[]') } catch { sliceColors = paletteColors }
+              if (!sliceColors.length) sliceColors = paletteColors
+            } else if (colorMode === 'data') {
+              sliceColors = []  // buildSlices falls back to item.color; no generated colors
+            } else {
+              sliceColors = paletteColors  // 'palette' or unknown
+            }
+            const ringData    = buildSlices(
+              rawToBuild,
+              s.nameField || nameField,
+              s.valueField || valueField,
+              colorField,
+              sliceColors,
+              ringLabel,  // inject seriesName for tooltip
+            )
+            const rInner = `${innerPct + i * (ringWidth + ringGap)}%`
+            const rOuter = `${innerPct + i * (ringWidth + ringGap) + ringWidth}%`
+            return (
+              <Pie key={s.id ?? i} data={ringData} {...sharedPieProps}
+                innerRadius={rInner} outerRadius={rOuter}>
+                {ringData.map((entry, j) => <Cell key={j} fill={entry.color} />)}
+                {/* Center label attached to innermost ring only */}
+                {CenterContent && i === 0 && (
+                  <Label width={30} position='center' content={<CenterContent />} />
+                )}
+              </Pie>
+            )
+          })}
+
+          {/* ── Single-series ── */}
+          {!isMulti && (
+            <Pie data={chartData} {...sharedPieProps}
+              innerRadius={`${innerPct}%`} outerRadius={`${outerPct}%`}>
+              {chartData.map((entry, i) => <Cell key={i} fill={entry.color} />)}
+              {CenterContent && (
+                <Label width={30} position='center' content={<CenterContent />} />
+              )}
+            </Pie>
+          )}
+        </PieChart>
+      </ResponsiveContainer>
+    </ViewerComponentWrapper>
+  )
+}

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

@@ -1,63 +1,55 @@
-import { FormControl, InputLabel, Select, MenuItem, FormHelperText } from '@mui/material'
+import { FormControl, Select, MenuItem, FormHelperText } from '@mui/material'
 import ViewerComponentWrapper from '../ViewerComponentWrapper'
+import FieldLabel from '../FieldLabel'
 import { resolveProps } from 'services/builderHelper/resolveProps'
+import { runFieldAction } from 'services/builderHelper/actionExecutor'
 
 export default function DropdownRenderer({ node, viewerContext }) {
   const { data, form, updateFormValue, validationErrors } = viewerContext
-  const main = resolveProps(node, 'main', { form, data })
+  const main = resolveProps(node, 'main', viewerContext)
 
-  // Get component key
   const key = node.props?.main?.key?.value || node.props?.main?.key || node.id
-
-  // Get value from form state
   const value = form[key] || (main.multiple ? [] : '')
+  const error = validationErrors?.[key]
+  const options = Array.isArray(main.options) ? main.options : []
 
-  // Get validation error
-  const error = validationErrors[key]
-
-  // Get options - can be static array or resolved via expression
-  const options = main.options || []
+  const { label, labelPosition, required, helperText } = main
 
-  const handleChange = (e) => {
+  const handleChange = e => {
     updateFormValue(key, e.target.value)
+    runFieldAction(node, viewerContext, 'onChange', e.target.value)
   }
 
-  // Ensure options is an array
-  const optionsArray = Array.isArray(options) ? options : []
-
   return (
     <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
-      <FormControl fullWidth={main.fullWidth} error={!!error} size={main.size}>
-        {main.label && <InputLabel>{main.label}</InputLabel>}
-        <Select
-          value={value}
-          onChange={handleChange}
-          label={main.label}
-          disabled={main.disabled}
-          multiple={main.multiple}
-          native={main.native}
-          displayEmpty={!!main.placeholder}
-        >
-          {main.placeholder && (
-            <MenuItem value="" disabled>
-              <em>{main.placeholder}</em>
-            </MenuItem>
-          )}
-          {optionsArray.map((option, index) => {
-            // Support both {label, value} format and simple string format
-            const optionLabel = typeof option === 'object' ? option.label : option
-            const optionValue = typeof option === 'object' ? option.value : option
-            return (
-              <MenuItem key={index} value={optionValue}>
-                {optionLabel}
+      <FieldLabel label={label} required={required} labelPosition={labelPosition} error={!!error}>
+        <FormControl fullWidth={main.fullWidth !== false} error={!!error} size={main.size}>
+          <Select
+            value={value}
+            onChange={handleChange}
+            disabled={main.disabled}
+            multiple={main.multiple}
+            native={main.native}
+            displayEmpty={!!main.placeholder}
+          >
+            {main.placeholder && (
+              <MenuItem value="" disabled>
+                <em>{main.placeholder}</em>
               </MenuItem>
-            )
-          })}
-        </Select>
-        {(error || main.helperText) && (
-          <FormHelperText>{error || main.helperText}</FormHelperText>
-        )}
-      </FormControl>
+            )}
+            {options.map((option, index) => {
+              const optionLabel = typeof option === 'object' ? option.label : option
+              const optionValue = typeof option === 'object' ? option.value : option
+              return (
+                <MenuItem key={index} value={optionValue}>
+                  {optionLabel}
+                </MenuItem>
+              )
+            })}
+          </Select>
+          {(error || helperText) && <FormHelperText>{error || helperText}</FormHelperText>}
+        </FormControl>
+      </FieldLabel>
     </ViewerComponentWrapper>
   )
 }