Chart Configuration

{
  title: "Tank A Level",
  idVar: 42,
  maxValue: 1000,
  order: 1,
  color: "#363F9C",
  unidad: "L",
  porcentage: true,
  border: true,
  shape: "circle"
}

import { z } from 'zod'

const BooleanChartSchema = z.object({
  title: z.string().min(1, 'Title is required').trim(),
  textOn: z.string().min(1, 'ON text is required').trim(),
  textOff: z.string().min(1, 'OFF text is required').trim(),
  colorOn: z.string()
    .regex(/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/, 'Invalid hex color'),
  colorOff: z.string()
    .regex(/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/, 'Invalid hex color'),
  order: z.number().min(1)
})
.superRefine((data, ctx) => {
  if (data.colorOn === data.colorOff) {
    ctx.addIssue({
      code: z.ZodIssueCode.custom,
      message: 'ON and OFF colors must be different',
      path: ['colorOn']
    })
  }
})

{
  title: "Water Distribution",
  type: "PieChart",
  categories: [
    {
      var_id: 15,
      name: "Treatment Area",
      color: "#4CAF50"
    },
    {
      var_id: 16,
      name: "Storage Tanks",
      color: "#2196F3"
    },
    {
      var_id: 17,
      name: "Distribution",
      color: "#FFC107"
    }
  ]
}

xAxisConfig: {
  dateTimeType: "relative",
  dateRange: "24h",      // e.g., "1h", "6h", "24h", "7d"
  samplingPeriod: "5m"   // e.g., "1m", "5m", "1h"
}

xAxisConfig: {
  dateTimeType: "absolute",
  dateFrom: "2024-01-01T00:00:00",
  dateTo: "2024-01-31T23:59:59"
}

export const configs = {
  1: {
    id: 1,
    typeGraph: 'LiquidFillPorcentaje',
    title: 1,           // 0=Not required, 1=Required, 2=Optional
    value: 1,
    maxValue: 1,
    unity: 2,
    color: 2,
    singleValue: true,
    order: 1,
    preConfig: {
      color: '#363F9C',
      porcentage: 'true',
      shape: 'circle',
      border: 'true'
    }
  }
  // ... additional chart configurations
}