robobyte-front-builder 1.0.19 → 1.0.21

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

@@ -0,0 +1,388 @@
+import { useMemo, useCallback } from 'react'
+import {
+  ResponsiveContainer,
+  ComposedChart, BarChart, LineChart, AreaChart,
+  Bar, Line, Area,
+  XAxis, YAxis, Tooltip, ReferenceLine, LabelList, Cell,
+  Legend,
+} from 'recharts'
+import { Box, Typography } from '@mui/material'
+import ViewerComponentWrapper from '../ViewerComponentWrapper'
+import { resolveProps, resolveValue } from 'services/builderHelper/resolveProps'
+import { thresholdColors } from 'services/builderHelper/thresholdEngine'
+import { schemaColor, DEFAULT_PALETTE } from 'services/builderHelper/colorSchema'
+import { formatNumber } from 'services/builderHelper/numberFormat'
+import { runKpiAction } from 'services/builderHelper/actionExecutor'
+
+// ── Tooltip ───────────────────────────────────────────────────────────────────
+
+const CustomTooltip = ({ active, payload, labelField, format, prefix, suffix, multi }) => {
+  if (!active || !payload?.length) return null
+  const label = payload[0]?.payload?.[labelField]
+  return (
+    <Box sx={{
+      bgcolor: 'background.paper', border: '1px solid', borderColor: 'divider',
+      borderRadius: 1, px: 1.25, py: 0.75, boxShadow: 2, fontSize: 11,
+    }}>
+      {label != null && (
+        <Typography sx={{ fontSize: 11, fontWeight: 600, mb: multi ? 0.5 : 0, color: 'text.secondary' }}>
+          {label}
+        </Typography>
+      )}
+      {payload.map((p, i) => (
+        <Box key={i} sx={{ display: 'flex', alignItems: 'center', gap: 0.75, mt: i > 0 ? 0.25 : 0 }}>
+          <Box sx={{ width: 8, height: 8, borderRadius: '50%', bgcolor: p.color, flexShrink: 0 }} />
+          <Typography sx={{ fontSize: 11, color: 'text.primary' }}>
+            {p.name && multi ? `${p.name}: ` : ''}
+            {formatNumber(p.value, { format, prefix, suffix })}
+          </Typography>
+        </Box>
+      ))}
+    </Box>
+  )
+}
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+function normaliseData(raw, valueField) {
+  if (!Array.isArray(raw)) return []
+  return raw.map(item =>
+    typeof item === 'object' ? item : { [valueField]: item }
+  )
+}
+
+function barRadius(upper = 3, lower = 0) {
+  return [Number(upper) || 0, Number(upper) || 0, Number(lower) || 0, Number(lower) || 0]
+}
+
+// ── Main renderer ─────────────────────────────────────────────────────────────
+
+export default function ChartRenderer({ node, viewerContext }) {
+  const main   = resolveProps(node, 'main', viewerContext)
+  const { data, isEditMode } = viewerContext ?? {}
+
+  // ── Click action ─────────────────────────────────────────────────────────────
+  const hasClickAction = !!node.props?.actions?.onDataClick?.code
+  const handleChartClick = useCallback((rechartsData) => {
+    if (!rechartsData?.activePayload?.length) return
+    const payload    = rechartsData.activePayload[0]
+    const entry      = payload?.payload ?? {}
+    runKpiAction(node, viewerContext, 'onDataClick', {
+      clickedItem:  entry,
+      clickedValue: payload?.value,
+      clickedField: payload?.dataKey,
+      clickedLabel: rechartsData.activeLabel ?? entry[main.labelField ?? 'label'],
+      clickedIndex: rechartsData.activeTooltipIndex ?? -1,
+    })
+  }, [node, viewerContext, main.labelField])
+
+  const {
+    // data
+    dataKey,
+    valueField    = 'value',
+    labelField    = 'label',
+
+    // chart type
+    chartType     = 'bar',   // 'bar' | 'bar-h' | 'line' | 'area' | 'multi'
+
+    // multi-series array (used when chartType === 'multi')
+    series        = [],
+
+    // single-series appearance
+    color         = '#1976d2',
+    colorSchema,
+    height        = 80,
+    upperRadius   = 3,
+    lowerRadius   = 0,
+    strokeWidth   = 2,
+    smooth        = true,
+    showDot       = false,
+    fillOpacity   = 0.15,
+    highlightLast = false,
+    highlightColor= '#ff9800',
+
+    // display
+    showXAxis     = false,
+    showYAxis     = false,
+    showTooltip   = true,
+    showValues    = false,
+    showLegend    = false,
+    prefix        = '',
+    suffix        = '',
+
+    // reference line
+    referenceValue,
+
+    // thresholds (single-series)
+    thresholds    = [],
+  } = main
+
+  const resolved  = resolveValue(dataKey, data)
+  // Chart always needs a flat array; a plain object (e.g. multi-dataset) is not supported here —
+  // use a flat array where each row has all series fields.
+  const raw       = Array.isArray(resolved) ? resolved : []
+
+  // `inBuilder` = true in edit mode AND in builder preview (isEditMode undefined).
+  // Only false in actual production deployments where isEditMode is explicitly false.
+  const inBuilder = isEditMode !== false
+
+  const validSeries = useMemo(() => (Array.isArray(series) ? series : []).filter(s => s.field), [series])
+
+  // Generate sample data whose fields match the configured series (multi)
+  // or the single valueField (single-series). Used whenever real data is absent.
+  const sampleData = useMemo(() => {
+    const fields = validSeries.length ? validSeries.map(s => s.field) : [valueField]
+    const base   = [40, 65, 50, 80, 55, 70, 45]
+    return base.map((v, i) => {
+      const row = { [labelField]: String.fromCharCode(65 + i) }
+      fields.forEach((f, fi) => { row[f] = Math.max(10, v + fi * 12 - (i % 2) * 8) })
+      return row
+    })
+  }, [validSeries, valueField, labelField])
+
+  // Use sample data whenever we're in the builder and no real data is bound
+  const noDataBound = inBuilder && raw.length === 0
+  const chartData   = useMemo(
+    () => normaliseData(noDataBound ? sampleData : raw, valueField),
+    [noDataBound, sampleData, raw, valueField]
+  )
+
+  const isMulti   = chartType === 'multi'
+  const isBarH    = chartType === 'bar-h'
+  const isBar     = chartType === 'bar'
+  const isLine    = chartType === 'line'
+  const isArea    = chartType === 'area'
+
+  // ── Auto-detect series when multi mode but series prop is empty ───────────────
+  // This handles the case where the series config is lost/not resolved in
+  // preview mode, or when the user builds data via expression editor inline.
+  // We inspect the first chartData row and pick any numeric fields != labelField.
+  const effectiveSeries = useMemo(() => {
+    if (validSeries.length > 0) return validSeries
+    if (!isMulti || chartData.length === 0) return validSeries
+    const sample = chartData[0]
+    return Object.keys(sample)
+      .filter(k => k !== labelField && typeof sample[k] === 'number')
+      .map((field, i) => ({
+        field,
+        name: field,
+        type: 'bar',
+        color: DEFAULT_PALETTE[i % DEFAULT_PALETTE.length],
+      }))
+  }, [isMulti, validSeries, chartData, labelField])
+
+  const h         = Number(height) || 80
+  const topMargin = showValues ? 14 : 4
+
+  // ── Empty state — multi mode with no series configured yet ───────────────────
+  if (inBuilder && isMulti && effectiveSeries.length === 0) {
+    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'>
+            Chart (multi) — configure Series to preview
+          </Typography>
+        </Box>
+      </ViewerComponentWrapper>
+    )
+  }
+
+  // ── Threshold / color (single series) ───────────────────────────────────────
+  const lastVal      = chartData.length ? chartData[chartData.length - 1][valueField] : 0
+  const { color: tc} = thresholdColors(lastVal, thresholds)
+  const resolvedColor= thresholds.length && tc !== 'inherit' ? tc : color
+  const lastIdx      = chartData.length - 1
+
+  // ── Tooltip component ────────────────────────────────────────────────────────
+  const tooltipEl = showTooltip ? (
+    <Tooltip
+      content={<CustomTooltip labelField={labelField} format='number' prefix={prefix} suffix={suffix} multi={isMulti} />}
+      isAnimationActive={false}
+      cursor={{ fill: 'rgba(0,0,0,0.04)', stroke: resolvedColor, strokeWidth: isBar || isBarH ? 0 : 1, opacity: 0.3 }}
+    />
+  ) : null
+
+  // ── Reference line ───────────────────────────────────────────────────────────
+  const refLineEl = referenceValue != null ? (
+    <ReferenceLine y={Number(referenceValue)} stroke={resolvedColor} strokeDasharray='4 3' strokeOpacity={0.5} />
+  ) : null
+
+  // ── Shared chart props ───────────────────────────────────────────────────────
+  const margin = { top: topMargin, right: 4, bottom: 4, left: 4 }
+
+  // ══════════════════════════════════════════════════════════════════════════════
+  // MULTI-SERIES
+  // ══════════════════════════════════════════════════════════════════════════════
+  if (isMulti) {
+
+    return (
+      <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+        <ResponsiveContainer width='100%' height={h}>
+          <ComposedChart data={chartData} margin={margin} onClick={hasClickAction ? handleChartClick : undefined} style={hasClickAction ? { cursor: 'pointer' } : {}}>
+            <XAxis
+              dataKey={labelField}
+              type='category'
+              tick={showXAxis ? { fontSize: 10 } : false}
+              axisLine={showXAxis} tickLine={showXAxis}
+              hide={!showXAxis}
+            />
+            <YAxis hide={!showYAxis} tick={{ fontSize: 10 }} axisLine={false} tickLine={false} />
+            {tooltipEl}
+            {showLegend && <Legend wrapperStyle={{ fontSize: 11 }} />}
+            {refLineEl}
+            {effectiveSeries.map(s => {
+              const r    = barRadius(s.upperRadius ?? 3, s.lowerRadius ?? 0)
+              const dash = s.dashed ? '5 3' : undefined
+              if (s.type === 'bar') {
+                return (
+                  <Bar key={s.id ?? s.field} dataKey={s.field} name={s.name || s.field}
+                    fill={s.color || '#1976d2'} radius={r} isAnimationActive={false}>
+                    {showValues && <LabelList dataKey={s.field} position='top' style={{ fontSize: 10 }} />}
+                  </Bar>
+                )
+              }
+              if (s.type === 'area') {
+                return (
+                  <Area key={s.id ?? s.field} dataKey={s.field} name={s.name || s.field}
+                    type={s.smooth !== false ? 'monotone' : 'linear'}
+                    stroke={s.color || '#1976d2'} strokeWidth={s.strokeWidth ?? 2}
+                    strokeDasharray={dash}
+                    fill={s.color || '#1976d2'} fillOpacity={s.fillOpacity ?? 0.15}
+                    dot={s.showDot ? { r: 3, fill: s.color } : false}
+                    isAnimationActive={false}
+                  />
+                )
+              }
+              // default: line
+              return (
+                <Line key={s.id ?? s.field} dataKey={s.field} name={s.name || s.field}
+                  type={s.smooth !== false ? 'monotone' : 'linear'}
+                  stroke={s.color || '#1976d2'} strokeWidth={s.strokeWidth ?? 2}
+                  strokeDasharray={dash}
+                  dot={s.showDot ? { r: 3, fill: s.color } : false}
+                  isAnimationActive={false}
+                />
+              )
+            })}
+          </ComposedChart>
+        </ResponsiveContainer>
+      </ViewerComponentWrapper>
+    )
+  }
+
+  // ══════════════════════════════════════════════════════════════════════════════
+  // BAR — VERTICAL (chartType === 'bar')
+  // ══════════════════════════════════════════════════════════════════════════════
+  if (isBar) {
+    return (
+      <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+        <ResponsiveContainer width='100%' height={h}>
+          <BarChart data={chartData} layout='horizontal' margin={margin} onClick={hasClickAction ? handleChartClick : undefined} style={hasClickAction ? { cursor: 'pointer' } : {}}>
+            {showXAxis
+              ? <XAxis dataKey={labelField} type='category' tick={{ fontSize: 10 }} axisLine={false} tickLine={false} />
+              : <XAxis dataKey={labelField} type='category' hide />}
+            <YAxis type='number' hide={!showYAxis} tick={{ fontSize: 10 }} axisLine={false} tickLine={false} />
+            {tooltipEl}
+            {refLineEl}
+            <Bar dataKey={valueField} radius={barRadius(upperRadius, lowerRadius)} isAnimationActive={false}>
+              {chartData.map((entry, i) => {
+                const { color: tc } = thresholdColors(entry[valueField], thresholds)
+                const useT = thresholds.length && tc !== 'inherit'
+                const fill = useT ? tc : (highlightLast && i === lastIdx ? highlightColor : (schemaColor(colorSchema, i, null, chartData.length, DEFAULT_PALETTE) ?? resolvedColor))
+                return <Cell key={i} fill={fill} />
+              })}
+              {showValues && <LabelList dataKey={valueField} position='top' style={{ fontSize: 10 }} />}
+            </Bar>
+          </BarChart>
+        </ResponsiveContainer>
+      </ViewerComponentWrapper>
+    )
+  }
+
+  // ══════════════════════════════════════════════════════════════════════════════
+  // BAR — HORIZONTAL (chartType === 'bar-h')
+  // ══════════════════════════════════════════════════════════════════════════════
+  if (isBarH) {
+    return (
+      <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+        <ResponsiveContainer width='100%' height={h}>
+          <BarChart data={chartData} layout='vertical' margin={{ ...margin, left: showXAxis ? 0 : 4 }} onClick={hasClickAction ? handleChartClick : undefined} style={hasClickAction ? { cursor: 'pointer' } : {}}>
+            <XAxis type='number' hide={!showYAxis} tick={{ fontSize: 10 }} axisLine={false} tickLine={false} />
+            {showXAxis
+              ? <YAxis dataKey={labelField} type='category' width={60} tick={{ fontSize: 10 }} axisLine={false} tickLine={false} />
+              : <YAxis dataKey={labelField} type='category' hide />}
+            {tooltipEl}
+            {refLineEl}
+            <Bar dataKey={valueField} radius={barRadius(upperRadius, lowerRadius)} isAnimationActive={false}>
+              {chartData.map((entry, i) => {
+                const { color: tc } = thresholdColors(entry[valueField], thresholds)
+                const useT = thresholds.length && tc !== 'inherit'
+                const fill = useT ? tc : (highlightLast && i === lastIdx ? highlightColor : (schemaColor(colorSchema, i, null, chartData.length, DEFAULT_PALETTE) ?? resolvedColor))
+                return <Cell key={i} fill={fill} />
+              })}
+              {showValues && <LabelList dataKey={valueField} position='right' style={{ fontSize: 10 }} />}
+            </Bar>
+          </BarChart>
+        </ResponsiveContainer>
+      </ViewerComponentWrapper>
+    )
+  }
+
+  // ══════════════════════════════════════════════════════════════════════════════
+  // AREA
+  // ══════════════════════════════════════════════════════════════════════════════
+  if (isArea) {
+    return (
+      <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+        <ResponsiveContainer width='100%' height={h}>
+          <AreaChart data={chartData} margin={margin} onClick={hasClickAction ? handleChartClick : undefined} style={hasClickAction ? { cursor: 'pointer' } : {}}>
+            <defs>
+              <linearGradient id={`grad_${node.id}`} x1='0' y1='0' x2='0' y2='1'>
+                <stop offset='5%'  stopColor={resolvedColor} stopOpacity={Number(fillOpacity) * 4 || 0.6} />
+                <stop offset='95%' stopColor={resolvedColor} stopOpacity={0} />
+              </linearGradient>
+            </defs>
+            {showXAxis && <XAxis dataKey={labelField} tick={{ fontSize: 10 }} axisLine={false} tickLine={false} />}
+            <YAxis hide={!showYAxis} tick={{ fontSize: 10 }} axisLine={false} tickLine={false} />
+            {tooltipEl}
+            {refLineEl}
+            <Area
+              type={smooth ? 'monotone' : 'linear'}
+              dataKey={valueField}
+              stroke={resolvedColor} strokeWidth={Number(strokeWidth) || 2}
+              fill={`url(#grad_${node.id})`}
+              dot={showDot ? { r: 3, fill: resolvedColor } : false}
+              isAnimationActive={false}
+            />
+          </AreaChart>
+        </ResponsiveContainer>
+      </ViewerComponentWrapper>
+    )
+  }
+
+  // ══════════════════════════════════════════════════════════════════════════════
+  // LINE (default)
+  // ══════════════════════════════════════════════════════════════════════════════
+  return (
+    <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+      <ResponsiveContainer width='100%' height={h}>
+        <LineChart data={chartData} margin={margin} onClick={hasClickAction ? handleChartClick : undefined} style={hasClickAction ? { cursor: 'pointer' } : {}}>
+          {showXAxis && <XAxis dataKey={labelField} tick={{ fontSize: 10 }} axisLine={false} tickLine={false} />}
+          <YAxis hide={!showYAxis} tick={{ fontSize: 10 }} axisLine={false} tickLine={false} />
+          {tooltipEl}
+          {refLineEl}
+          <Line
+            type={smooth ? 'monotone' : 'linear'}
+            dataKey={valueField}
+            stroke={resolvedColor} strokeWidth={Number(strokeWidth) || 2}
+            dot={showDot ? { r: 3, fill: resolvedColor } : false}
+            isAnimationActive={false}
+          />
+        </LineChart>
+      </ResponsiveContainer>
+    </ViewerComponentWrapper>
+  )
+}

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

@@ -1,27 +1,35 @@
 import { FormControlLabel, Checkbox } 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 CheckboxRenderer({ node, viewerContext }) {
   const { data, form, updateFormValue } = 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 (default to false for checkboxes)
   const checked = form[key] || false
 
-  const handleChange = (e) => {
+  const { label, labelPosition, required, size, disabled, ...rest } = main
+
+  const handleChange = e => {
     updateFormValue(key, e.target.checked)
+    runFieldAction(node, viewerContext, 'onChange', e.target.checked)
   }
 
+  // When position is 'none' (or no label), the checkbox's own inline label is the label text.
+  // Otherwise, label is rendered externally and the checkbox control has no extra label.
+  const hasExternalLabel = label && labelPosition !== 'none'
+
   return (
     <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
-      <FormControlLabel
-        {...main}
-        control={<Checkbox  {...main} checked={checked} onChange={handleChange} />}
-      />
+      <FieldLabel label={label} required={required} labelPosition={labelPosition}>
+        <FormControlLabel
+          label={hasExternalLabel ? '' : (label || '')}
+          control={<Checkbox size={size} disabled={disabled} checked={checked} onChange={handleChange} />}
+        />
+      </FieldLabel>
     </ViewerComponentWrapper>
   )
 }