@devtable/dashboard 1.22.0 → 1.26.0

package/dist/dashboard.es.js

@@ -36,7 +36,7 @@ var __publicField = (obj, key, value) => {
 import React from "react";
 import _ from "lodash";
 import RGL, { WidthProvider } from "react-grid-layout";
-import { Popover, Tooltip, Group, Text, ActionIcon, Box, Button, TextInput, LoadingOverlay, Table, Select, useMantineTheme, ColorSwatch, Switch, Slider, SegmentedControl, NumberInput, Accordion, ColorInput, JsonInput, Modal, AppShell, Tabs, Menu, Divider, Container, Textarea } from "@mantine/core";
+import { Popover, Tooltip, Group, Text, ActionIcon, Box, Button, TextInput, LoadingOverlay, Table, Select, useMantineTheme, ColorSwatch, Switch, Slider, SegmentedControl, NumberInput, ColorInput, Divider, Accordion, JsonInput, Modal, AppShell, Tabs, Menu, Container, Textarea } from "@mantine/core";
 import { useRequest } from "ahooks";
 import axios from "axios";
 import { InfoCircle, DeviceFloppy, Refresh, Trash, PlaylistAdd, Settings, Resize, Paint, PlayerPlay, Database, Recycle, Share } from "tabler-icons-react";
@@ -109,20 +109,20 @@ function explainSQL(sql, context, definitions) {
 const APIClient = {
   baseURL: "http://localhost:31200",
   getRequest(method) {
-    return (url, data, options = {}) => {
+    return (url, data, options2 = {}) => {
       const headers = __spreadValues({
         "X-Requested-With": "XMLHttpRequest",
-        "Content-Type": options.string ? "application/x-www-form-urlencoded" : "application/json"
-      }, options.headers);
+        "Content-Type": options2.string ? "application/x-www-form-urlencoded" : "application/json"
+      }, options2.headers);
       const conf = {
         baseURL: this.baseURL,
         method,
         url,
-        params: method === "GET" ? data : options.params,
+        params: method === "GET" ? data : options2.params,
         headers
       };
       if (method === "POST") {
-        conf.data = options.string ? JSON.stringify(data) : data;
+        conf.data = options2.string ? JSON.stringify(data) : data;
       }
       return axios(conf).then((res) => {
         return res.data;
@@ -591,7 +591,7 @@ function PickQuery({}) {
     data,
     loading
   } = React.useContext(PanelContext);
-  const options = React.useMemo(() => {
+  const options2 = React.useMemo(() => {
     return queries.map((d) => ({
       value: d.id,
       label: d.id
@@ -610,7 +610,7 @@ function PickQuery({}) {
       children: [/* @__PURE__ */ jsx(Text, {
         children: "Select a Query"
       }), /* @__PURE__ */ jsx(Select, {
-        data: options,
+        data: options2,
         value: queryID,
         onChange: setQueryID,
         allowDeselect: false,
@@ -1567,10 +1567,10 @@ var ecStat = { exports: {} };
         var __WEBPACK_AMD_DEFINE_RESULT__;
         !(__WEBPACK_AMD_DEFINE_RESULT__ = function(require2) {
           var quantile = __webpack_require__(13);
-          function median(data) {
+          function median2(data) {
             return quantile(data, 0.5);
           }
-          return median;
+          return median2;
         }.call(exports2, __webpack_require__, exports2, module2), __WEBPACK_AMD_DEFINE_RESULT__ !== void 0 && (module2.exports = __WEBPACK_AMD_DEFINE_RESULT__));
       },
       function(module2, exports2, __webpack_require__) {
@@ -2008,7 +2008,7 @@ const defaultOption$1 = {
     }
   },
   grid: {
-    top: 30,
+    top: 0,
     left: 15,
     right: 15,
     bottom: 30,
@@ -2102,792 +2102,929 @@ function getOption(conf, data) {
   };
   return _.merge({}, defaultOption$1, customOptions);
 }
-echarts.use([BarChart, LineChart, ScatterChart, GridComponent, LegendComponent, TooltipComponent, CanvasRenderer]);
-echarts.registerTransform(echartsStat.transform.regression);
-function VizCartesianChart({
-  conf,
-  data,
-  width,
-  height
-}) {
-  const option = React.useMemo(() => {
-    return getOption(conf, data);
-  }, [conf, data]);
-  if (!width || !height) {
-    return null;
+function median(numbers) {
+  const sorted = Array.from(numbers).sort((a, b) => a - b);
+  const middle = Math.floor(sorted.length / 2);
+  if (sorted.length % 2 === 0) {
+    return (sorted[middle - 1] + sorted[middle]) / 2;
   }
-  return /* @__PURE__ */ jsx(ReactEChartsCore, {
-    echarts,
-    option,
-    style: {
-      width,
-      height
-    }
-  });
+  return sorted[middle];
 }
-var ValueType = /* @__PURE__ */ ((ValueType2) => {
-  ValueType2["string"] = "string";
-  ValueType2["number"] = "number";
-  ValueType2["eloc"] = "eloc";
-  ValueType2["percentage"] = "percentage";
-  return ValueType2;
-})(ValueType || {});
-function StringCell({
-  value
-}) {
-  return /* @__PURE__ */ jsx(Text, {
-    component: "span",
-    children: value
-  });
+function aggregateValue(data, data_field, aggregation) {
+  var _a, _b, _c;
+  const numbers = data.map((d) => d[data_field]);
+  switch (aggregation) {
+    case "sum":
+      return _.sum(numbers);
+    case "mean":
+      return _.mean(numbers);
+    case "median":
+      return median(numbers);
+    case "max":
+      return (_a = _.max(numbers)) != null ? _a : 0;
+    case "min":
+      return (_b = _.min(numbers)) != null ? _b : 0;
+    default:
+      return (_c = data[0]) == null ? void 0 : _c[data_field];
+  }
 }
-function ELOCCell({
-  value
-}) {
-  return /* @__PURE__ */ jsx(Text, {
-    component: "span",
-    children: value
-  });
+var invariant = function() {
+};
+const clamp$1 = (min, max, v) => Math.min(Math.max(v, min), max);
+const progress = (from, to, value) => {
+  const toFromDifference = to - from;
+  return toFromDifference === 0 ? 1 : (value - from) / toFromDifference;
+};
+const mix = (from, to, progress2) => -progress2 * from + progress2 * to + from;
+const clamp = (min, max) => (v) => Math.max(Math.min(v, max), min);
+const sanitize = (v) => v % 1 ? Number(v.toFixed(5)) : v;
+const floatRegex = /(-)?([\d]*\.?[\d])+/g;
+const colorRegex = /(#[0-9a-f]{6}|#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2,3}\s*\/*\s*[\d\.]+%?\))/gi;
+const singleColorRegex = /^(#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2,3}\s*\/*\s*[\d\.]+%?\))$/i;
+function isString(v) {
+  return typeof v === "string";
 }
-function NumberCell({
-  value
-}) {
-  const num = numbro(value).format({
-    thousandSeparated: true
-  });
-  return /* @__PURE__ */ jsx(Text, {
-    component: "span",
-    children: num
-  });
+const number = {
+  test: (v) => typeof v === "number",
+  parse: parseFloat,
+  transform: (v) => v
+};
+const alpha = Object.assign(Object.assign({}, number), { transform: clamp(0, 1) });
+Object.assign(Object.assign({}, number), { default: 1 });
+const createUnitType = (unit) => ({
+  test: (v) => isString(v) && v.endsWith(unit) && v.split(" ").length === 1,
+  parse: parseFloat,
+  transform: (v) => `${v}${unit}`
+});
+const percent = createUnitType("%");
+Object.assign(Object.assign({}, percent), { parse: (v) => percent.parse(v) / 100, transform: (v) => percent.transform(v * 100) });
+const isColorString = (type, testProp) => (v) => {
+  return Boolean(isString(v) && singleColorRegex.test(v) && v.startsWith(type) || testProp && Object.prototype.hasOwnProperty.call(v, testProp));
+};
+const splitColor = (aName, bName, cName) => (v) => {
+  if (!isString(v))
+    return v;
+  const [a, b, c, alpha2] = v.match(floatRegex);
+  return {
+    [aName]: parseFloat(a),
+    [bName]: parseFloat(b),
+    [cName]: parseFloat(c),
+    alpha: alpha2 !== void 0 ? parseFloat(alpha2) : 1
+  };
+};
+const hsla = {
+  test: isColorString("hsl", "hue"),
+  parse: splitColor("hue", "saturation", "lightness"),
+  transform: ({ hue, saturation, lightness, alpha: alpha$1 = 1 }) => {
+    return "hsla(" + Math.round(hue) + ", " + percent.transform(sanitize(saturation)) + ", " + percent.transform(sanitize(lightness)) + ", " + sanitize(alpha.transform(alpha$1)) + ")";
+  }
+};
+const clampRgbUnit = clamp(0, 255);
+const rgbUnit = Object.assign(Object.assign({}, number), { transform: (v) => Math.round(clampRgbUnit(v)) });
+const rgba = {
+  test: isColorString("rgb", "red"),
+  parse: splitColor("red", "green", "blue"),
+  transform: ({ red, green, blue, alpha: alpha$1 = 1 }) => "rgba(" + rgbUnit.transform(red) + ", " + rgbUnit.transform(green) + ", " + rgbUnit.transform(blue) + ", " + sanitize(alpha.transform(alpha$1)) + ")"
+};
+function parseHex(v) {
+  let r = "";
+  let g = "";
+  let b = "";
+  let a = "";
+  if (v.length > 5) {
+    r = v.substr(1, 2);
+    g = v.substr(3, 2);
+    b = v.substr(5, 2);
+    a = v.substr(7, 2);
+  } else {
+    r = v.substr(1, 1);
+    g = v.substr(2, 1);
+    b = v.substr(3, 1);
+    a = v.substr(4, 1);
+    r += r;
+    g += g;
+    b += b;
+    a += a;
+  }
+  return {
+    red: parseInt(r, 16),
+    green: parseInt(g, 16),
+    blue: parseInt(b, 16),
+    alpha: a ? parseInt(a, 16) / 255 : 1
+  };
 }
-function PercentageCell({
-  value
-}) {
-  const num = numbro(value).format({
-    output: "percent",
-    mantissa: 3
-  });
-  return /* @__PURE__ */ jsx(Text, {
-    component: "span",
-    children: num
-  });
+const hex = {
+  test: isColorString("#"),
+  parse: parseHex,
+  transform: rgba.transform
+};
+const color = {
+  test: (v) => rgba.test(v) || hex.test(v) || hsla.test(v),
+  parse: (v) => {
+    if (rgba.test(v)) {
+      return rgba.parse(v);
+    } else if (hsla.test(v)) {
+      return hsla.parse(v);
+    } else {
+      return hex.parse(v);
+    }
+  },
+  transform: (v) => {
+    return isString(v) ? v : v.hasOwnProperty("red") ? rgba.transform(v) : hsla.transform(v);
+  }
+};
+const colorToken = "${c}";
+const numberToken = "${n}";
+function test(v) {
+  var _a, _b, _c, _d;
+  return isNaN(v) && isString(v) && ((_b = (_a = v.match(floatRegex)) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) + ((_d = (_c = v.match(colorRegex)) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0) > 0;
 }
-function CellValue({
-  value,
-  type
-}) {
-  switch (type) {
-    case ValueType.string:
-      return /* @__PURE__ */ jsx(StringCell, {
-        value
-      });
-    case ValueType.eloc:
-      return /* @__PURE__ */ jsx(ELOCCell, {
-        value
-      });
-    case ValueType.number:
-      return /* @__PURE__ */ jsx(NumberCell, {
-        value
-      });
-    case ValueType.percentage:
-      return /* @__PURE__ */ jsx(PercentageCell, {
-        value
-      });
+function analyse$1(v) {
+  if (typeof v === "number")
+    v = `${v}`;
+  const values = [];
+  let numColors = 0;
+  const colors = v.match(colorRegex);
+  if (colors) {
+    numColors = colors.length;
+    v = v.replace(colorRegex, colorToken);
+    values.push(...colors.map(color.parse));
+  }
+  const numbers = v.match(floatRegex);
+  if (numbers) {
+    v = v.replace(floatRegex, numberToken);
+    values.push(...numbers.map(number.parse));
   }
+  return { values, numColors, tokenised: v };
 }
-function VizTable({
-  conf,
-  data = [],
-  width,
-  height
-}) {
-  const _a = conf, {
-    id_field,
-    use_raw_columns,
-    columns
-  } = _a, rest = __objRest(_a, [
-    "id_field",
-    "use_raw_columns",
-    "columns"
-  ]);
-  const labels = React.useMemo(() => {
-    if (use_raw_columns) {
-      return Object.keys(data == null ? void 0 : data[0]);
-    }
-    return columns.map((c) => c.label);
-  }, [use_raw_columns, columns, data]);
-  const finalColumns = React.useMemo(() => {
-    if (use_raw_columns) {
-      return Object.keys(data == null ? void 0 : data[0]).map((k2) => ({
-        label: k2,
-        value_field: k2,
-        value_type: ValueType.string
-      }));
-    }
-    return columns;
-  }, [use_raw_columns, columns, data]);
-  return /* @__PURE__ */ jsxs(Table, __spreadProps(__spreadValues({
-    sx: {
-      maxHeight: height
+function parse(v) {
+  return analyse$1(v).values;
+}
+function createTransformer(v) {
+  const { values, numColors, tokenised } = analyse$1(v);
+  const numValues = values.length;
+  return (v2) => {
+    let output = tokenised;
+    for (let i = 0; i < numValues; i++) {
+      output = output.replace(i < numColors ? colorToken : numberToken, i < numColors ? color.transform(v2[i]) : sanitize(v2[i]));
     }
-  }, rest), {
-    children: [/* @__PURE__ */ jsx("thead", {
-      children: /* @__PURE__ */ jsx("tr", {
-        children: labels.map((label) => /* @__PURE__ */ jsx("th", {
-          children: label
-        }, label))
-      })
-    }), /* @__PURE__ */ jsx("tbody", {
-      children: data.slice(0, 30).map((row, index2) => /* @__PURE__ */ jsx("tr", {
-        children: finalColumns.map(({
-          value_field,
-          value_type
-        }) => /* @__PURE__ */ jsx("td", {
-          children: /* @__PURE__ */ jsx(Group, {
-            sx: {
-              "&, .mantine-Text-root": {
-                fontFamily: "monospace",
-                fontSize: rest.fontSize
-              }
-            },
-            children: /* @__PURE__ */ jsx(CellValue, {
-              value: row[value_field],
-              type: value_type
-            })
-          })
-        }, `${value_field}--${row[value_field]}`))
-      }, id_field ? row[id_field] : `row-${index2}`))
-    }), data.length > 100 && /* @__PURE__ */ jsx("tfoot", {
-      children: /* @__PURE__ */ jsx("tr", {
-        children: /* @__PURE__ */ jsx("td", {
-          colSpan: labels.length,
-          children: /* @__PURE__ */ jsx(Text, {
-            color: "red",
-            size: "sm",
-            children: "Showing only the first 30 rows to avoid causing slow performance"
-          })
-        })
-      })
-    })]
-  }));
-}
-function interpolateString(template, params = {}) {
-  const extendedParams = __spreadProps(__spreadValues({}, params), {
-    numbro
-  });
-  const names = Object.keys(extendedParams);
-  const vals = Object.values(extendedParams);
-  try {
-    return new Function(...names, `return \`${template}\`;`)(...vals);
-  } catch (error) {
-    return error.message;
-  }
+    return output;
+  };
 }
-function VizText({
-  conf: {
-    paragraphs
-  },
-  data
-}) {
-  return /* @__PURE__ */ jsx(Fragment, {
-    children: paragraphs.map((_a, index2) => {
-      var _b = _a, {
-        template,
-        size
-      } = _b, rest = __objRest(_b, [
-        "template",
-        "size"
-      ]);
-      return /* @__PURE__ */ jsx(Text, __spreadProps(__spreadValues({}, rest), {
-        sx: {
-          fontSize: size
-        },
-        children: interpolateString(template, data[0])
-      }), `${template}---${index2}`);
-    })
-  });
+const convertNumbersToZero = (v) => typeof v === "number" ? 0 : v;
+function getAnimatableNone(v) {
+  const parsed = parse(v);
+  const transformer = createTransformer(v);
+  return transformer(parsed.map(convertNumbersToZero));
 }
-echarts.use([GridComponent, VisualMapComponent, LegendComponent, TooltipComponent, CanvasRenderer]);
-function VizBar3D({
-  conf,
-  data,
-  width,
-  height
-}) {
-  const _a = conf, {
-    x_axis_data_key,
-    y_axis_data_key,
-    z_axis_data_key
-  } = _a, restConf = __objRest(_a, [
-    "x_axis_data_key",
-    "y_axis_data_key",
-    "z_axis_data_key"
-  ]);
-  const min = React.useMemo(() => {
-    return _.minBy(data, (d) => d[z_axis_data_key])[z_axis_data_key];
-  }, [data, z_axis_data_key]);
-  const max = React.useMemo(() => {
-    return _.maxBy(data, (d) => d[z_axis_data_key])[z_axis_data_key];
-  }, [data, z_axis_data_key]);
-  const option = __spreadProps(__spreadValues({
-    tooltip: {},
-    backgroundColor: "#fff",
-    visualMap: {
-      show: true,
-      dimension: 2,
-      min,
-      max,
-      inRange: {
-        color: ["#313695", "#4575b4", "#74add1", "#abd9e9", "#e0f3f8", "#ffffbf", "#fee090", "#fdae61", "#f46d43", "#d73027", "#a50026"]
-      }
-    },
-    xAxis3D: {
-      type: "value"
-    },
-    yAxis3D: {
-      type: "value"
-    },
-    zAxis3D: {
-      type: "value"
-    },
-    grid3D: {
-      viewControl: {
-        projection: "orthographic",
-        autoRotate: false
-      },
-      light: {
-        main: {
-          shadow: true,
-          quality: "ultra",
-          intensity: 1.5
-        }
-      }
-    }
-  }, restConf), {
-    series: [{
-      type: "bar3D",
-      wireframe: {},
-      data: data.map((d) => [d[x_axis_data_key], d[y_axis_data_key], d[z_axis_data_key]])
-    }]
-  });
-  return /* @__PURE__ */ jsx(ReactEChartsCore, {
-    echarts,
-    option,
-    style: {
-      width,
-      height
-    }
-  });
+const complex = { test, parse, createTransformer, getAnimatableNone };
+function hueToRgb(p2, q2, t) {
+  if (t < 0)
+    t += 1;
+  if (t > 1)
+    t -= 1;
+  if (t < 1 / 6)
+    return p2 + (q2 - p2) * 6 * t;
+  if (t < 1 / 2)
+    return q2;
+  if (t < 2 / 3)
+    return p2 + (q2 - p2) * (2 / 3 - t) * 6;
+  return p2;
 }
-var index$2 = "";
-echarts.use([PieChart, CanvasRenderer]);
-const defaultOption = {
-  tooltip: {
-    show: true
-  },
-  series: {
-    type: "pie",
-    radius: ["50%", "80%"],
-    label: {
-      position: "outer",
-      alignTo: "edge",
-      formatter: "{name|{b}}\n{percentage|{d}%}",
-      minMargin: 5,
-      edgeDistance: 10,
-      lineHeight: 15,
-      rich: {
-        percentage: {
-          color: "#999"
-        }
-      },
-      margin: 20
-    },
-    labelLine: {
-      length: 15,
-      length2: 0,
-      maxSurfaceAngle: 80,
-      showAbove: true
-    },
-    top: 10,
-    bottom: 10,
-    left: 10,
-    right: 10
+function hslaToRgba({ hue, saturation, lightness, alpha: alpha2 }) {
+  hue /= 360;
+  saturation /= 100;
+  lightness /= 100;
+  let red = 0;
+  let green = 0;
+  let blue = 0;
+  if (!saturation) {
+    red = green = blue = lightness;
+  } else {
+    const q2 = lightness < 0.5 ? lightness * (1 + saturation) : lightness + saturation - lightness * saturation;
+    const p2 = 2 * lightness - q2;
+    red = hueToRgb(p2, q2, hue + 1 / 3);
+    green = hueToRgb(p2, q2, hue);
+    blue = hueToRgb(p2, q2, hue - 1 / 3);
   }
+  return {
+    red: Math.round(red * 255),
+    green: Math.round(green * 255),
+    blue: Math.round(blue * 255),
+    alpha: alpha2
+  };
+}
+const mixLinearColor = (from, to, v) => {
+  const fromExpo = from * from;
+  const toExpo = to * to;
+  return Math.sqrt(Math.max(0, v * (toExpo - fromExpo) + fromExpo));
 };
-function VizPie({
-  conf,
-  data,
-  width,
-  height
-}) {
-  const _a = conf, {
-    label_field = "name",
-    value_field = "value"
-  } = _a, restConf = __objRest(_a, [
-    "label_field",
-    "value_field"
-  ]);
-  const chartData = React.useMemo(() => {
-    return data.map((d) => ({
-      name: d[label_field],
-      value: Number(d[value_field])
-    }));
-  }, [data, label_field, value_field]);
-  const labelOptions = React.useMemo(() => {
-    return {
-      series: {
-        labelLayout: function(params) {
-          const isLeft = params.labelRect.x < width / 2;
-          const points = params.labelLinePoints;
-          points[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.width;
-          return {
-            labelLinePoints: points
-          };
-        }
+const colorTypes = [hex, rgba, hsla];
+const getColorType = (v) => colorTypes.find((type) => type.test(v));
+const mixColor = (from, to) => {
+  let fromColorType = getColorType(from);
+  let toColorType = getColorType(to);
+  let fromColor = fromColorType.parse(from);
+  let toColor = toColorType.parse(to);
+  if (fromColorType === hsla) {
+    fromColor = hslaToRgba(fromColor);
+    fromColorType = rgba;
+  }
+  if (toColorType === hsla) {
+    toColor = hslaToRgba(toColor);
+    toColorType = rgba;
+  }
+  const blended = Object.assign({}, fromColor);
+  return (v) => {
+    for (const key in blended) {
+      if (key !== "alpha") {
+        blended[key] = mixLinearColor(fromColor[key], toColor[key], v);
       }
-    };
-  }, [width]);
-  const option = _.merge({}, defaultOption, labelOptions, restConf, {
-    series: {
-      data: chartData
-    }
-  });
-  return /* @__PURE__ */ jsx(ReactEChartsCore, {
-    echarts,
-    option,
-    style: {
-      width,
-      height
     }
-  });
-}
-var invariant = function() {
-};
-const clamp$1 = (min, max, v) => Math.min(Math.max(v, min), max);
-const progress = (from, to, value) => {
-  const toFromDifference = to - from;
-  return toFromDifference === 0 ? 1 : (value - from) / toFromDifference;
+    blended.alpha = mix(fromColor.alpha, toColor.alpha, v);
+    return fromColorType.transform(blended);
+  };
 };
-const mix = (from, to, progress2) => -progress2 * from + progress2 * to + from;
-const clamp = (min, max) => (v) => Math.max(Math.min(v, max), min);
-const sanitize = (v) => v % 1 ? Number(v.toFixed(5)) : v;
-const floatRegex = /(-)?([\d]*\.?[\d])+/g;
-const colorRegex = /(#[0-9a-f]{6}|#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2,3}\s*\/*\s*[\d\.]+%?\))/gi;
-const singleColorRegex = /^(#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2,3}\s*\/*\s*[\d\.]+%?\))$/i;
-function isString(v) {
-  return typeof v === "string";
+const isNum = (v) => typeof v === "number";
+const combineFunctions = (a, b) => (v) => b(a(v));
+const pipe = (...transformers) => transformers.reduce(combineFunctions);
+function getMixer(origin, target) {
+  if (isNum(origin)) {
+    return (v) => mix(origin, target, v);
+  } else if (color.test(origin)) {
+    return mixColor(origin, target);
+  } else {
+    return mixComplex(origin, target);
+  }
 }
-const number = {
-  test: (v) => typeof v === "number",
-  parse: parseFloat,
-  transform: (v) => v
-};
-const alpha = Object.assign(Object.assign({}, number), { transform: clamp(0, 1) });
-Object.assign(Object.assign({}, number), { default: 1 });
-const createUnitType = (unit) => ({
-  test: (v) => isString(v) && v.endsWith(unit) && v.split(" ").length === 1,
-  parse: parseFloat,
-  transform: (v) => `${v}${unit}`
-});
-const percent = createUnitType("%");
-Object.assign(Object.assign({}, percent), { parse: (v) => percent.parse(v) / 100, transform: (v) => percent.transform(v * 100) });
-const isColorString = (type, testProp) => (v) => {
-  return Boolean(isString(v) && singleColorRegex.test(v) && v.startsWith(type) || testProp && Object.prototype.hasOwnProperty.call(v, testProp));
-};
-const splitColor = (aName, bName, cName) => (v) => {
-  if (!isString(v))
-    return v;
-  const [a, b, c, alpha2] = v.match(floatRegex);
-  return {
-    [aName]: parseFloat(a),
-    [bName]: parseFloat(b),
-    [cName]: parseFloat(c),
-    alpha: alpha2 !== void 0 ? parseFloat(alpha2) : 1
+const mixArray = (from, to) => {
+  const output = [...from];
+  const numValues = output.length;
+  const blendValue = from.map((fromThis, i) => getMixer(fromThis, to[i]));
+  return (v) => {
+    for (let i = 0; i < numValues; i++) {
+      output[i] = blendValue[i](v);
+    }
+    return output;
   };
 };
-const hsla = {
-  test: isColorString("hsl", "hue"),
-  parse: splitColor("hue", "saturation", "lightness"),
-  transform: ({ hue, saturation, lightness, alpha: alpha$1 = 1 }) => {
-    return "hsla(" + Math.round(hue) + ", " + percent.transform(sanitize(saturation)) + ", " + percent.transform(sanitize(lightness)) + ", " + sanitize(alpha.transform(alpha$1)) + ")";
+const mixObject = (origin, target) => {
+  const output = Object.assign(Object.assign({}, origin), target);
+  const blendValue = {};
+  for (const key in output) {
+    if (origin[key] !== void 0 && target[key] !== void 0) {
+      blendValue[key] = getMixer(origin[key], target[key]);
+    }
   }
+  return (v) => {
+    for (const key in blendValue) {
+      output[key] = blendValue[key](v);
+    }
+    return output;
+  };
 };
-const clampRgbUnit = clamp(0, 255);
-const rgbUnit = Object.assign(Object.assign({}, number), { transform: (v) => Math.round(clampRgbUnit(v)) });
-const rgba = {
-  test: isColorString("rgb", "red"),
-  parse: splitColor("red", "green", "blue"),
-  transform: ({ red, green, blue, alpha: alpha$1 = 1 }) => "rgba(" + rgbUnit.transform(red) + ", " + rgbUnit.transform(green) + ", " + rgbUnit.transform(blue) + ", " + sanitize(alpha.transform(alpha$1)) + ")"
-};
-function parseHex(v) {
-  let r = "";
-  let g = "";
-  let b = "";
-  let a = "";
-  if (v.length > 5) {
-    r = v.substr(1, 2);
-    g = v.substr(3, 2);
-    b = v.substr(5, 2);
-    a = v.substr(7, 2);
-  } else {
-    r = v.substr(1, 1);
-    g = v.substr(2, 1);
-    b = v.substr(3, 1);
-    a = v.substr(4, 1);
-    r += r;
-    g += g;
-    b += b;
-    a += a;
+function analyse(value) {
+  const parsed = complex.parse(value);
+  const numValues = parsed.length;
+  let numNumbers = 0;
+  let numRGB = 0;
+  let numHSL = 0;
+  for (let i = 0; i < numValues; i++) {
+    if (numNumbers || typeof parsed[i] === "number") {
+      numNumbers++;
+    } else {
+      if (parsed[i].hue !== void 0) {
+        numHSL++;
+      } else {
+        numRGB++;
+      }
+    }
   }
-  return {
-    red: parseInt(r, 16),
-    green: parseInt(g, 16),
-    blue: parseInt(b, 16),
-    alpha: a ? parseInt(a, 16) / 255 : 1
-  };
+  return { parsed, numNumbers, numRGB, numHSL };
 }
-const hex = {
-  test: isColorString("#"),
-  parse: parseHex,
-  transform: rgba.transform
+const mixComplex = (origin, target) => {
+  const template = complex.createTransformer(target);
+  const originStats = analyse(origin);
+  const targetStats = analyse(target);
+  const canInterpolate = originStats.numHSL === targetStats.numHSL && originStats.numRGB === targetStats.numRGB && originStats.numNumbers >= targetStats.numNumbers;
+  if (canInterpolate) {
+    return pipe(mixArray(originStats.parsed, targetStats.parsed), template);
+  } else {
+    return (p2) => `${p2 > 0 ? target : origin}`;
+  }
 };
-const color = {
-  test: (v) => rgba.test(v) || hex.test(v) || hsla.test(v),
-  parse: (v) => {
-    if (rgba.test(v)) {
-      return rgba.parse(v);
-    } else if (hsla.test(v)) {
-      return hsla.parse(v);
+const mixNumber = (from, to) => (p2) => mix(from, to, p2);
+function detectMixerFactory(v) {
+  if (typeof v === "number") {
+    return mixNumber;
+  } else if (typeof v === "string") {
+    if (color.test(v)) {
+      return mixColor;
     } else {
-      return hex.parse(v);
+      return mixComplex;
     }
-  },
-  transform: (v) => {
-    return isString(v) ? v : v.hasOwnProperty("red") ? rgba.transform(v) : hsla.transform(v);
+  } else if (Array.isArray(v)) {
+    return mixArray;
+  } else if (typeof v === "object") {
+    return mixObject;
+  }
+}
+function createMixers(output, ease, customMixer) {
+  const mixers = [];
+  const mixerFactory = customMixer || detectMixerFactory(output[0]);
+  const numMixers = output.length - 1;
+  for (let i = 0; i < numMixers; i++) {
+    let mixer = mixerFactory(output[i], output[i + 1]);
+    if (ease) {
+      const easingFunction = Array.isArray(ease) ? ease[i] : ease;
+      mixer = pipe(easingFunction, mixer);
+    }
+    mixers.push(mixer);
+  }
+  return mixers;
+}
+function fastInterpolate([from, to], [mixer]) {
+  return (v) => mixer(progress(from, to, v));
+}
+function slowInterpolate(input, mixers) {
+  const inputLength = input.length;
+  const lastInputIndex = inputLength - 1;
+  return (v) => {
+    let mixerIndex = 0;
+    let foundMixerIndex = false;
+    if (v <= input[0]) {
+      foundMixerIndex = true;
+    } else if (v >= input[lastInputIndex]) {
+      mixerIndex = lastInputIndex - 1;
+      foundMixerIndex = true;
+    }
+    if (!foundMixerIndex) {
+      let i = 1;
+      for (; i < inputLength; i++) {
+        if (input[i] > v || i === lastInputIndex) {
+          break;
+        }
+      }
+      mixerIndex = i - 1;
+    }
+    const progressInRange = progress(input[mixerIndex], input[mixerIndex + 1], v);
+    return mixers[mixerIndex](progressInRange);
+  };
+}
+function interpolate(input, output, { clamp: isClamp = true, ease, mixer } = {}) {
+  const inputLength = input.length;
+  invariant(inputLength === output.length);
+  invariant(!ease || !Array.isArray(ease) || ease.length === inputLength - 1);
+  if (input[0] > input[inputLength - 1]) {
+    input = [].concat(input);
+    output = [].concat(output);
+    input.reverse();
+    output.reverse();
+  }
+  const mixers = createMixers(output, ease, mixer);
+  const interpolator = inputLength === 2 ? fastInterpolate(input, mixers) : slowInterpolate(input, mixers);
+  return isClamp ? (v) => interpolator(clamp$1(input[0], input[inputLength - 1], v)) : interpolator;
+}
+class InterpolateColor {
+  constructor({ valueRange, colorRange }) {
+    __publicField(this, "mapper");
+    this.mapper = interpolate(valueRange, colorRange);
+  }
+  getColor(value) {
+    return this.mapper(value);
+  }
+}
+function getColorByColorConf(conf, value) {
+  if (conf.type === "static") {
+    return conf.staticColor;
   }
-};
-const colorToken = "${c}";
-const numberToken = "${n}";
-function test(v) {
-  var _a, _b, _c, _d;
-  return isNaN(v) && isString(v) && ((_b = (_a = v.match(floatRegex)) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) + ((_d = (_c = v.match(colorRegex)) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0) > 0;
+  if (conf.type === "continuous") {
+    return new InterpolateColor(conf).getColor(value);
+  }
+  return "black";
 }
-function analyse$1(v) {
-  if (typeof v === "number")
-    v = `${v}`;
-  const values = [];
-  let numColors = 0;
-  const colors = v.match(colorRegex);
-  if (colors) {
-    numColors = colors.length;
-    v = v.replace(colorRegex, colorToken);
-    values.push(...colors.map(color.parse));
+function getNonStatsDataText(data) {
+  if (data === null) {
+    return "null";
   }
-  const numbers = v.match(floatRegex);
-  if (numbers) {
-    v = v.replace(floatRegex, numberToken);
-    values.push(...numbers.map(number.parse));
+  if (data === void 0) {
+    return "undefined";
   }
-  return { values, numColors, tokenised: v };
+  if (Array.isArray(data)) {
+    return `Array(${data.length})`;
+  }
+  return data.toString();
 }
-function parse(v) {
-  return analyse$1(v).values;
+function variablesToElements(variables, data) {
+  const ret = {};
+  variables.forEach(({
+    name,
+    color: color2,
+    data_field,
+    aggregation,
+    size,
+    weight,
+    formatter
+  }) => {
+    const value = aggregateValue(data, data_field, aggregation);
+    let valueContent = "";
+    if (!["string", "number"].includes(typeof value)) {
+      valueContent = getNonStatsDataText(value);
+    } else {
+      valueContent = numbro(value).format(formatter);
+    }
+    ret[name] = /* @__PURE__ */ jsx(Text, {
+      sx: {
+        fontSize: size,
+        display: "inline"
+      },
+      color: getColorByColorConf(color2, value),
+      weight,
+      children: valueContent
+    });
+  });
+  return ret;
 }
-function createTransformer(v) {
-  const { values, numColors, tokenised } = analyse$1(v);
-  const numValues = values.length;
-  return (v2) => {
-    let output = tokenised;
-    for (let i = 0; i < numValues; i++) {
-      output = output.replace(i < numColors ? colorToken : numberToken, i < numColors ? color.transform(v2[i]) : sanitize(v2[i]));
+function preserveWhiteSpaces(text) {
+  return text.split(" ").map((s) => /* @__PURE__ */ jsxs(Fragment, {
+    children: [s, "\xA0"]
+  }));
+}
+function withLineBreaks(text) {
+  const normalized = text.replaceAll("<br />", "<br/>").replaceAll("\n", "<br/>");
+  const splitted = normalized.split("<br/>");
+  const ret = splitted.map((t, i) => {
+    const arr = [preserveWhiteSpaces(t)];
+    if (i !== splitted.length - 1) {
+      arr.push(/* @__PURE__ */ jsx("br", {}));
     }
-    return output;
-  };
+    return arr;
+  }).flat().filter((t) => t !== void 0);
+  return ret;
 }
-const convertNumbersToZero = (v) => typeof v === "number" ? 0 : v;
-function getAnimatableNone(v) {
-  const parsed = parse(v);
-  const transformer = createTransformer(v);
-  return transformer(parsed.map(convertNumbersToZero));
+function textToJSX(text) {
+  return withLineBreaks(text);
 }
-const complex = { test, parse, createTransformer, getAnimatableNone };
-function hueToRgb(p2, q2, t) {
-  if (t < 0)
-    t += 1;
-  if (t > 1)
-    t -= 1;
-  if (t < 1 / 6)
-    return p2 + (q2 - p2) * 6 * t;
-  if (t < 1 / 2)
-    return q2;
-  if (t < 2 / 3)
-    return p2 + (q2 - p2) * (2 / 3 - t) * 6;
-  return p2;
+function templateToJSX(template, variables, data) {
+  const variableElements = variablesToElements(variables, data);
+  const regx = /^\{(.+)\}(.*)$/;
+  return template.split("$").map((text) => {
+    var _a;
+    const match = regx.exec(text);
+    if (!match) {
+      return textToJSX(text);
+    }
+    const element = variableElements[match[1]];
+    if (!element) {
+      return textToJSX(text);
+    }
+    const rest = (_a = match[2]) != null ? _a : "";
+    return /* @__PURE__ */ jsxs(Fragment, {
+      children: [element, textToJSX(rest)]
+    });
+  });
 }
-function hslaToRgba({ hue, saturation, lightness, alpha: alpha2 }) {
-  hue /= 360;
-  saturation /= 100;
-  lightness /= 100;
-  let red = 0;
-  let green = 0;
-  let blue = 0;
-  if (!saturation) {
-    red = green = blue = lightness;
-  } else {
-    const q2 = lightness < 0.5 ? lightness * (1 + saturation) : lightness + saturation - lightness * saturation;
-    const p2 = 2 * lightness - q2;
-    red = hueToRgb(p2, q2, hue + 1 / 3);
-    green = hueToRgb(p2, q2, hue);
-    blue = hueToRgb(p2, q2, hue - 1 / 3);
-  }
-  return {
-    red: Math.round(red * 255),
-    green: Math.round(green * 255),
-    blue: Math.round(blue * 255),
-    alpha: alpha2
-  };
+echarts.use([BarChart, LineChart, ScatterChart, GridComponent, LegendComponent, TooltipComponent, CanvasRenderer]);
+echarts.registerTransform(echartsStat.transform.regression);
+function templateNotEmpty(str) {
+  return str.trim().length > 0;
 }
-const mixLinearColor = (from, to, v) => {
-  const fromExpo = from * from;
-  const toExpo = to * to;
-  return Math.sqrt(Math.max(0, v * (toExpo - fromExpo) + fromExpo));
-};
-const colorTypes = [hex, rgba, hsla];
-const getColorType = (v) => colorTypes.find((type) => type.test(v));
-const mixColor = (from, to) => {
-  let fromColorType = getColorType(from);
-  let toColorType = getColorType(to);
-  let fromColor = fromColorType.parse(from);
-  let toColor = toColorType.parse(to);
-  if (fromColorType === hsla) {
-    fromColor = hslaToRgba(fromColor);
-    fromColorType = rgba;
-  }
-  if (toColorType === hsla) {
-    toColor = hslaToRgba(toColor);
-    toColorType = rgba;
+function Chart({
+  conf,
+  data,
+  width,
+  height
+}) {
+  const option = React.useMemo(() => {
+    return getOption(conf, data);
+  }, [conf, data]);
+  if (!width || !height) {
+    return null;
   }
-  const blended = Object.assign({}, fromColor);
-  return (v) => {
-    for (const key in blended) {
-      if (key !== "alpha") {
-        blended[key] = mixLinearColor(fromColor[key], toColor[key], v);
-      }
+  return /* @__PURE__ */ jsx(ReactEChartsCore, {
+    echarts,
+    option,
+    style: {
+      width,
+      height
     }
-    blended.alpha = mix(fromColor.alpha, toColor.alpha, v);
-    return fromColorType.transform(blended);
-  };
-};
-const isNum = (v) => typeof v === "number";
-const combineFunctions = (a, b) => (v) => b(a(v));
-const pipe = (...transformers) => transformers.reduce(combineFunctions);
-function getMixer(origin, target) {
-  if (isNum(origin)) {
-    return (v) => mix(origin, target, v);
-  } else if (color.test(origin)) {
-    return mixColor(origin, target);
-  } else {
-    return mixComplex(origin, target);
-  }
+  });
 }
-const mixArray = (from, to) => {
-  const output = [...from];
-  const numValues = output.length;
-  const blendValue = from.map((fromThis, i) => getMixer(fromThis, to[i]));
-  return (v) => {
-    for (let i = 0; i < numValues; i++) {
-      output[i] = blendValue[i](v);
-    }
-    return output;
-  };
-};
-const mixObject = (origin, target) => {
-  const output = Object.assign(Object.assign({}, origin), target);
-  const blendValue = {};
-  for (const key in output) {
-    if (origin[key] !== void 0 && target[key] !== void 0) {
-      blendValue[key] = getMixer(origin[key], target[key]);
-    }
+function VizCartesianChart({
+  conf,
+  data,
+  width,
+  height
+}) {
+  const {
+    ref: topStatsRef,
+    height: topStatsHeight
+  } = useElementSize();
+  const {
+    ref: bottomStatsRef,
+    height: bottomStatsHeight
+  } = useElementSize();
+  const templates = React.useMemo(() => {
+    const {
+      stats: {
+        templates: templates2,
+        variables
+      }
+    } = conf;
+    return {
+      top: templateToJSX(templates2.top, variables, data),
+      bottom: templateToJSX(templates2.bottom, variables, data)
+    };
+  }, [conf, data]);
+  const finalHeight = Math.max(0, height - topStatsHeight - bottomStatsHeight);
+  return /* @__PURE__ */ jsxs(Box, {
+    children: [templateNotEmpty(conf.stats.templates.top) && /* @__PURE__ */ jsx(Text, {
+      ref: topStatsRef,
+      align: "left",
+      size: "xs",
+      pl: "sm",
+      children: Object.values(templates.top).map((c) => c)
+    }), /* @__PURE__ */ jsx(Chart, {
+      width,
+      height: finalHeight,
+      data,
+      conf
+    }), templateNotEmpty(conf.stats.templates.bottom) && /* @__PURE__ */ jsx(Text, {
+      ref: bottomStatsRef,
+      align: "left",
+      size: "xs",
+      pl: "sm",
+      children: Object.values(templates.bottom).map((c) => c)
+    })]
+  });
+}
+var ValueType = /* @__PURE__ */ ((ValueType2) => {
+  ValueType2["string"] = "string";
+  ValueType2["number"] = "number";
+  ValueType2["eloc"] = "eloc";
+  ValueType2["percentage"] = "percentage";
+  return ValueType2;
+})(ValueType || {});
+function StringCell({
+  value
+}) {
+  return /* @__PURE__ */ jsx(Text, {
+    component: "span",
+    children: value
+  });
+}
+function ELOCCell({
+  value
+}) {
+  return /* @__PURE__ */ jsx(Text, {
+    component: "span",
+    children: value
+  });
+}
+function NumberCell({
+  value
+}) {
+  const num = numbro(value).format({
+    thousandSeparated: true
+  });
+  return /* @__PURE__ */ jsx(Text, {
+    component: "span",
+    children: num
+  });
+}
+function PercentageCell({
+  value
+}) {
+  const num = numbro(value).format({
+    output: "percent",
+    mantissa: 3
+  });
+  return /* @__PURE__ */ jsx(Text, {
+    component: "span",
+    children: num
+  });
+}
+function CellValue({
+  value,
+  type
+}) {
+  switch (type) {
+    case ValueType.string:
+      return /* @__PURE__ */ jsx(StringCell, {
+        value
+      });
+    case ValueType.eloc:
+      return /* @__PURE__ */ jsx(ELOCCell, {
+        value
+      });
+    case ValueType.number:
+      return /* @__PURE__ */ jsx(NumberCell, {
+        value
+      });
+    case ValueType.percentage:
+      return /* @__PURE__ */ jsx(PercentageCell, {
+        value
+      });
   }
-  return (v) => {
-    for (const key in blendValue) {
-      output[key] = blendValue[key](v);
+}
+function VizTable({
+  conf,
+  data = [],
+  width,
+  height
+}) {
+  const _a = conf, {
+    id_field,
+    use_raw_columns,
+    columns
+  } = _a, rest = __objRest(_a, [
+    "id_field",
+    "use_raw_columns",
+    "columns"
+  ]);
+  const labels = React.useMemo(() => {
+    if (use_raw_columns) {
+      return Object.keys(data == null ? void 0 : data[0]);
     }
-    return output;
-  };
-};
-function analyse(value) {
-  const parsed = complex.parse(value);
-  const numValues = parsed.length;
-  let numNumbers = 0;
-  let numRGB = 0;
-  let numHSL = 0;
-  for (let i = 0; i < numValues; i++) {
-    if (numNumbers || typeof parsed[i] === "number") {
-      numNumbers++;
-    } else {
-      if (parsed[i].hue !== void 0) {
-        numHSL++;
-      } else {
-        numRGB++;
-      }
+    return columns.map((c) => c.label);
+  }, [use_raw_columns, columns, data]);
+  const finalColumns = React.useMemo(() => {
+    if (use_raw_columns) {
+      return Object.keys(data == null ? void 0 : data[0]).map((k2) => ({
+        label: k2,
+        value_field: k2,
+        value_type: ValueType.string
+      }));
     }
-  }
-  return { parsed, numNumbers, numRGB, numHSL };
-}
-const mixComplex = (origin, target) => {
-  const template = complex.createTransformer(target);
-  const originStats = analyse(origin);
-  const targetStats = analyse(target);
-  const canInterpolate = originStats.numHSL === targetStats.numHSL && originStats.numRGB === targetStats.numRGB && originStats.numNumbers >= targetStats.numNumbers;
-  if (canInterpolate) {
-    return pipe(mixArray(originStats.parsed, targetStats.parsed), template);
-  } else {
-    return (p2) => `${p2 > 0 ? target : origin}`;
-  }
-};
-const mixNumber = (from, to) => (p2) => mix(from, to, p2);
-function detectMixerFactory(v) {
-  if (typeof v === "number") {
-    return mixNumber;
-  } else if (typeof v === "string") {
-    if (color.test(v)) {
-      return mixColor;
-    } else {
-      return mixComplex;
+    return columns;
+  }, [use_raw_columns, columns, data]);
+  return /* @__PURE__ */ jsxs(Table, __spreadProps(__spreadValues({
+    sx: {
+      maxHeight: height
     }
-  } else if (Array.isArray(v)) {
-    return mixArray;
-  } else if (typeof v === "object") {
-    return mixObject;
-  }
+  }, rest), {
+    children: [/* @__PURE__ */ jsx("thead", {
+      children: /* @__PURE__ */ jsx("tr", {
+        children: labels.map((label) => /* @__PURE__ */ jsx("th", {
+          children: label
+        }, label))
+      })
+    }), /* @__PURE__ */ jsx("tbody", {
+      children: data.slice(0, 30).map((row, index2) => /* @__PURE__ */ jsx("tr", {
+        children: finalColumns.map(({
+          value_field,
+          value_type
+        }) => /* @__PURE__ */ jsx("td", {
+          children: /* @__PURE__ */ jsx(Group, {
+            sx: {
+              "&, .mantine-Text-root": {
+                fontFamily: "monospace",
+                fontSize: rest.fontSize
+              }
+            },
+            children: /* @__PURE__ */ jsx(CellValue, {
+              value: row[value_field],
+              type: value_type
+            })
+          })
+        }, `${value_field}--${row[value_field]}`))
+      }, id_field ? row[id_field] : `row-${index2}`))
+    }), data.length > 100 && /* @__PURE__ */ jsx("tfoot", {
+      children: /* @__PURE__ */ jsx("tr", {
+        children: /* @__PURE__ */ jsx("td", {
+          colSpan: labels.length,
+          children: /* @__PURE__ */ jsx(Text, {
+            color: "red",
+            size: "sm",
+            children: "Showing only the first 30 rows to avoid causing slow performance"
+          })
+        })
+      })
+    })]
+  }));
 }
-function createMixers(output, ease, customMixer) {
-  const mixers = [];
-  const mixerFactory = customMixer || detectMixerFactory(output[0]);
-  const numMixers = output.length - 1;
-  for (let i = 0; i < numMixers; i++) {
-    let mixer = mixerFactory(output[i], output[i + 1]);
-    if (ease) {
-      const easingFunction = Array.isArray(ease) ? ease[i] : ease;
-      mixer = pipe(easingFunction, mixer);
-    }
-    mixers.push(mixer);
+function interpolateString(template, params = {}) {
+  const extendedParams = __spreadProps(__spreadValues({}, params), {
+    numbro
+  });
+  const names = Object.keys(extendedParams);
+  const vals = Object.values(extendedParams);
+  try {
+    return new Function(...names, `return \`${template}\`;`)(...vals);
+  } catch (error) {
+    return error.message;
   }
-  return mixers;
 }
-function fastInterpolate([from, to], [mixer]) {
-  return (v) => mixer(progress(from, to, v));
+function VizText({
+  conf: {
+    paragraphs
+  },
+  data
+}) {
+  return /* @__PURE__ */ jsx(Fragment, {
+    children: paragraphs.map((_a, index2) => {
+      var _b = _a, {
+        template,
+        size
+      } = _b, rest = __objRest(_b, [
+        "template",
+        "size"
+      ]);
+      return /* @__PURE__ */ jsx(Text, __spreadProps(__spreadValues({}, rest), {
+        sx: {
+          fontSize: size
+        },
+        children: interpolateString(template, data[0])
+      }), `${template}---${index2}`);
+    })
+  });
 }
-function slowInterpolate(input, mixers) {
-  const inputLength = input.length;
-  const lastInputIndex = inputLength - 1;
-  return (v) => {
-    let mixerIndex = 0;
-    let foundMixerIndex = false;
-    if (v <= input[0]) {
-      foundMixerIndex = true;
-    } else if (v >= input[lastInputIndex]) {
-      mixerIndex = lastInputIndex - 1;
-      foundMixerIndex = true;
+echarts.use([GridComponent, VisualMapComponent, LegendComponent, TooltipComponent, CanvasRenderer]);
+function VizBar3D({
+  conf,
+  data,
+  width,
+  height
+}) {
+  const _a = conf, {
+    x_axis_data_key,
+    y_axis_data_key,
+    z_axis_data_key
+  } = _a, restConf = __objRest(_a, [
+    "x_axis_data_key",
+    "y_axis_data_key",
+    "z_axis_data_key"
+  ]);
+  const min = React.useMemo(() => {
+    return _.minBy(data, (d) => d[z_axis_data_key])[z_axis_data_key];
+  }, [data, z_axis_data_key]);
+  const max = React.useMemo(() => {
+    return _.maxBy(data, (d) => d[z_axis_data_key])[z_axis_data_key];
+  }, [data, z_axis_data_key]);
+  const option = __spreadProps(__spreadValues({
+    tooltip: {},
+    backgroundColor: "#fff",
+    visualMap: {
+      show: true,
+      dimension: 2,
+      min,
+      max,
+      inRange: {
+        color: ["#313695", "#4575b4", "#74add1", "#abd9e9", "#e0f3f8", "#ffffbf", "#fee090", "#fdae61", "#f46d43", "#d73027", "#a50026"]
+      }
+    },
+    xAxis3D: {
+      type: "value"
+    },
+    yAxis3D: {
+      type: "value"
+    },
+    zAxis3D: {
+      type: "value"
+    },
+    grid3D: {
+      viewControl: {
+        projection: "orthographic",
+        autoRotate: false
+      },
+      light: {
+        main: {
+          shadow: true,
+          quality: "ultra",
+          intensity: 1.5
+        }
+      }
+    }
+  }, restConf), {
+    series: [{
+      type: "bar3D",
+      wireframe: {},
+      data: data.map((d) => [d[x_axis_data_key], d[y_axis_data_key], d[z_axis_data_key]])
+    }]
+  });
+  return /* @__PURE__ */ jsx(ReactEChartsCore, {
+    echarts,
+    option,
+    style: {
+      width,
+      height
     }
-    if (!foundMixerIndex) {
-      let i = 1;
-      for (; i < inputLength; i++) {
-        if (input[i] > v || i === lastInputIndex) {
-          break;
+  });
+}
+var index$2 = "";
+echarts.use([PieChart, CanvasRenderer]);
+const defaultOption = {
+  tooltip: {
+    show: true
+  },
+  series: {
+    type: "pie",
+    radius: ["50%", "80%"],
+    label: {
+      position: "outer",
+      alignTo: "edge",
+      formatter: "{name|{b}}\n{percentage|{d}%}",
+      minMargin: 5,
+      edgeDistance: 10,
+      lineHeight: 15,
+      rich: {
+        percentage: {
+          color: "#999"
+        }
+      },
+      margin: 20
+    },
+    labelLine: {
+      length: 15,
+      length2: 0,
+      maxSurfaceAngle: 80,
+      showAbove: true
+    },
+    top: 10,
+    bottom: 10,
+    left: 10,
+    right: 10
+  }
+};
+function VizPie({
+  conf,
+  data,
+  width,
+  height
+}) {
+  const _a = conf, {
+    label_field = "name",
+    value_field = "value"
+  } = _a, restConf = __objRest(_a, [
+    "label_field",
+    "value_field"
+  ]);
+  const chartData = React.useMemo(() => {
+    return data.map((d) => ({
+      name: d[label_field],
+      value: Number(d[value_field])
+    }));
+  }, [data, label_field, value_field]);
+  const labelOptions = React.useMemo(() => {
+    return {
+      series: {
+        labelLayout: function(params) {
+          const isLeft = params.labelRect.x < width / 2;
+          const points = params.labelLinePoints;
+          points[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.width;
+          return {
+            labelLinePoints: points
+          };
         }
       }
-      mixerIndex = i - 1;
+    };
+  }, [width]);
+  const option = _.merge({}, defaultOption, labelOptions, restConf, {
+    series: {
+      data: chartData
     }
-    const progressInRange = progress(input[mixerIndex], input[mixerIndex + 1], v);
-    return mixers[mixerIndex](progressInRange);
-  };
-}
-function interpolate(input, output, { clamp: isClamp = true, ease, mixer } = {}) {
-  const inputLength = input.length;
-  invariant(inputLength === output.length);
-  invariant(!ease || !Array.isArray(ease) || ease.length === inputLength - 1);
-  if (input[0] > input[inputLength - 1]) {
-    input = [].concat(input);
-    output = [].concat(output);
-    input.reverse();
-    output.reverse();
-  }
-  const mixers = createMixers(output, ease, mixer);
-  const interpolator = inputLength === 2 ? fastInterpolate(input, mixers) : slowInterpolate(input, mixers);
-  return isClamp ? (v) => interpolator(clamp$1(input[0], input[inputLength - 1], v)) : interpolator;
-}
-class InterpolateColor {
-  constructor({ valueRange, colorRange }) {
-    __publicField(this, "mapper");
-    this.mapper = interpolate(valueRange, colorRange);
-  }
-  getColor(value) {
-    return this.mapper(value);
-  }
+  });
+  return /* @__PURE__ */ jsx(ReactEChartsCore, {
+    echarts,
+    option,
+    style: {
+      width,
+      height
+    }
+  });
 }
-function getColorByColorConf(conf, dataRow) {
-  if (conf.type === "static") {
-    return conf.staticColor;
-  }
-  if (conf.type === "continuous") {
-    const mapper = new InterpolateColor(conf);
-    const value = dataRow[conf.valueField];
-    return mapper.getColor(value);
-  }
-  return "black";
+function VizStats({
+  conf: {
+    template,
+    variables,
+    align
+  },
+  data
+}) {
+  const contents = React.useMemo(() => {
+    return templateToJSX(template, variables, data);
+  }, [template, variables, data]);
+  return /* @__PURE__ */ jsx(Text, {
+    align,
+    children: Object.values(contents).map((c) => c)
+  });
 }
-function getNonStatsDataText(data) {
-  if (data === null) {
-    return "null";
-  }
-  if (data === void 0) {
-    return "undefined";
-  }
-  if (Array.isArray(data)) {
-    return `Array(${data.length})`;
+function VizRichText({
+  conf,
+  width,
+  height
+}) {
+  if (!width || !height) {
+    return null;
   }
-  return data.toString();
-}
-function VizStats(_a) {
-  var _b = _a, {
-    conf: _c
-  } = _b, _d = _c, {
-    content,
-    size,
-    color: color2
-  } = _d, rest = __objRest(_d, [
-    "content",
-    "size",
-    "color"
-  ]), {
-    data
-  } = _b;
-  const finalColor = React.useMemo(() => {
-    return getColorByColorConf(color2, data[0]);
-  }, [color2, data]);
-  const finalContent = React.useMemo(() => {
-    var _a2;
-    const {
-      prefix,
-      postfix,
-      data_field,
-      formatter
-    } = content;
-    const contentData = (_a2 = data == null ? void 0 : data[0]) == null ? void 0 : _a2[data_field];
-    if (!["string", "number"].includes(typeof contentData)) {
-      return getNonStatsDataText(contentData);
-    }
-    const contents = [prefix, numbro(contentData).format(formatter), postfix];
-    return contents.join(" ");
-  }, [content, data]);
-  return /* @__PURE__ */ jsx(Text, __spreadProps(__spreadValues({}, rest), {
-    color: finalColor,
+  return /* @__PURE__ */ jsx(RichTextEditor, {
+    readOnly: true,
+    value: conf.content,
+    onChange: _.noop,
     sx: {
-      fontSize: size
-    },
-    children: finalContent
-  }));
+      border: "none"
+    }
+  });
 }
 function renderViz(width, height, data, viz) {
   const props = {
@@ -2907,6 +3044,8 @@ function renderViz(width, height, data, viz) {
       return /* @__PURE__ */ jsx(VizText, __spreadValues({}, props));
     case "stats":
       return /* @__PURE__ */ jsx(VizStats, __spreadValues({}, props));
+    case "rich-text":
+      return /* @__PURE__ */ jsx(VizRichText, __spreadValues({}, props));
     case "bar-3d":
       return /* @__PURE__ */ jsx(VizBar3D, __spreadValues({}, props));
     case "pie":
@@ -2915,6 +3054,7 @@ function renderViz(width, height, data, viz) {
       return null;
   }
 }
+const typesDontNeedData = ["rich-text"];
 function Viz({
   viz,
   data,
@@ -2925,6 +3065,16 @@ function Viz({
     width,
     height
   } = useElementSize();
+  const needData = !typesDontNeedData.includes(viz.type);
+  if (!needData) {
+    return /* @__PURE__ */ jsx("div", {
+      className: "viz-root",
+      ref,
+      children: /* @__PURE__ */ jsx(ErrorBoundary, {
+        children: renderViz(width, height, data, viz)
+      })
+    });
+  }
   const empty = React.useMemo(() => !Array.isArray(data) || data.length === 0, [data]);
   if (loading) {
     return /* @__PURE__ */ jsx("div", {
@@ -2968,7 +3118,7 @@ function _DataFieldSelector({
   data,
   sx
 }, ref) {
-  const options = React.useMemo(() => {
+  const options2 = React.useMemo(() => {
     if (!Array.isArray(data) || data.length === 0) {
       return [];
     }
@@ -2981,7 +3131,7 @@ function _DataFieldSelector({
   return /* @__PURE__ */ jsx(Select, {
     ref,
     label,
-    data: options,
+    data: options2,
     value,
     onChange,
     required,
@@ -3164,7 +3314,7 @@ function _MantineColorSelector({
   }, [value, themeColors]);
   return /* @__PURE__ */ jsxs(Group, {
     position: "apart",
-    spacing: "xs",
+    spacing: 4,
     children: [/* @__PURE__ */ jsx(TextInput, {
       placeholder: "Set any color",
       value: !isThemeColor ? value : "",
@@ -3175,7 +3325,7 @@ function _MantineColorSelector({
       }),
       variant: !isThemeColor ? "default" : "filled",
       sx: {
-        maxWidth: "100%",
+        maxWidth: "46%",
         flexGrow: 1
       }
     }), /* @__PURE__ */ jsx(Text, {
@@ -3194,7 +3344,7 @@ function _MantineColorSelector({
         radius: 4
       }),
       sx: {
-        maxWidth: "100%",
+        maxWidth: "46%",
         flexGrow: 1
       }
     })]
@@ -3651,12 +3801,125 @@ function _NumbroFormatSelector({
     })
   });
 }
-const NumbroFormatSelector = React.forwardRef(_NumbroFormatSelector);
-function YAxisField({
+const NumbroFormatSelector = React.forwardRef(_NumbroFormatSelector);
+function YAxisField({
+  control,
+  index: index2,
+  remove
+}) {
+  return /* @__PURE__ */ jsxs(Group, {
+    direction: "column",
+    grow: true,
+    my: 0,
+    p: "md",
+    pr: 40,
+    sx: {
+      border: "1px solid #eee",
+      position: "relative"
+    },
+    children: [/* @__PURE__ */ jsx(Group, {
+      direction: "row",
+      grow: true,
+      noWrap: true,
+      children: /* @__PURE__ */ jsx(Controller, {
+        name: `y_axes.${index2}.name`,
+        control,
+        render: ({
+          field
+        }) => /* @__PURE__ */ jsx(TextInput, __spreadValues({
+          label: "Name",
+          required: true,
+          sx: {
+            flex: 1
+          }
+        }, field))
+      })
+    }), /* @__PURE__ */ jsx(Group, {
+      direction: "column",
+      grow: true,
+      noWrap: true,
+      children: /* @__PURE__ */ jsx(Controller, {
+        name: `y_axes.${index2}.label_formatter`,
+        control,
+        render: ({
+          field
+        }) => /* @__PURE__ */ jsx(NumbroFormatSelector, __spreadValues({}, field))
+      })
+    }), /* @__PURE__ */ jsx(ActionIcon, {
+      color: "red",
+      variant: "hover",
+      onClick: () => remove(index2),
+      sx: {
+        position: "absolute",
+        top: 15,
+        right: 5
+      },
+      disabled: index2 === 0,
+      children: /* @__PURE__ */ jsx(Trash, {
+        size: 16
+      })
+    })]
+  }, index2);
+}
+function YAxesField({
+  control,
+  watch
+}) {
+  const {
+    fields,
+    append,
+    remove
+  } = useFieldArray({
+    control,
+    name: "y_axes"
+  });
+  const watchFieldArray = watch("y_axes");
+  const controlledFields = fields.map((field, index2) => {
+    return __spreadValues(__spreadValues({}, field), watchFieldArray[index2]);
+  });
+  const addYAxis = () => append({
+    name: "",
+    label_formatter: defaultNumbroFormat
+  });
+  return /* @__PURE__ */ jsxs(Group, {
+    direction: "column",
+    grow: true,
+    children: [controlledFields.map((field, index2) => /* @__PURE__ */ jsx(YAxisField, {
+      control,
+      index: index2,
+      remove
+    })), /* @__PURE__ */ jsx(Group, {
+      position: "center",
+      mt: "xs",
+      children: /* @__PURE__ */ jsx(Button, {
+        onClick: addYAxis,
+        children: "Add a Y Axis"
+      })
+    })]
+  });
+}
+const regressionOptions = [{
+  label: "Linear",
+  value: "linear"
+}, {
+  label: "Exponential",
+  value: "exponential"
+}, {
+  label: "Logarithmic",
+  value: "logarithmic"
+}, {
+  label: "Polynomial",
+  value: "polynomial"
+}];
+function RegressionField({
   control,
+  regressionItem,
   index: index2,
-  remove
+  remove,
+  yAxisOptions,
+  data
 }) {
+  const method = regressionItem.transform.config.method;
   return /* @__PURE__ */ jsxs(Group, {
     direction: "column",
     grow: true,
@@ -3667,34 +3930,110 @@ function YAxisField({
       border: "1px solid #eee",
       position: "relative"
     },
-    children: [/* @__PURE__ */ jsx(Group, {
+    children: [/* @__PURE__ */ jsx(Controller, {
+      name: `regressions.${index2}.name`,
+      control,
+      render: ({
+        field
+      }) => /* @__PURE__ */ jsx(TextInput, __spreadValues({
+        label: "Name",
+        required: true,
+        sx: {
+          flex: 1
+        }
+      }, field))
+    }), /* @__PURE__ */ jsxs(Group, {
       direction: "row",
       grow: true,
       noWrap: true,
-      children: /* @__PURE__ */ jsx(Controller, {
-        name: `y_axes.${index2}.name`,
+      children: [/* @__PURE__ */ jsx(Controller, {
+        name: `regressions.${index2}.y_axis_data_key`,
         control,
         render: ({
           field
-        }) => /* @__PURE__ */ jsx(TextInput, __spreadValues({
-          label: "Name",
+        }) => /* @__PURE__ */ jsx(DataFieldSelector, __spreadValues({
+          label: "Value Field",
           required: true,
+          data,
           sx: {
             flex: 1
           }
         }, field))
-      })
-    }), /* @__PURE__ */ jsx(Group, {
-      direction: "column",
+      }), /* @__PURE__ */ jsx(Controller, {
+        name: `regressions.${index2}.plot.yAxisIndex`,
+        control,
+        render: (_a) => {
+          var {
+            field: _b
+          } = _a, _c = _b, {
+            value,
+            onChange
+          } = _c, rest = __objRest(_c, [
+            "value",
+            "onChange"
+          ]);
+          var _a2;
+          return /* @__PURE__ */ jsx(Select, __spreadProps(__spreadValues({
+            label: "Y Axis",
+            data: yAxisOptions,
+            disabled: yAxisOptions.length === 0
+          }, rest), {
+            value: (_a2 = value == null ? void 0 : value.toString()) != null ? _a2 : "",
+            onChange: (value2) => {
+              if (!value2) {
+                onChange(0);
+                return;
+              }
+              onChange(Number(value2));
+            },
+            sx: {
+              flex: 1
+            }
+          }));
+        }
+      })]
+    }), /* @__PURE__ */ jsxs(Group, {
+      direction: "row",
       grow: true,
       noWrap: true,
-      children: /* @__PURE__ */ jsx(Controller, {
-        name: `y_axes.${index2}.label_formatter`,
+      children: [/* @__PURE__ */ jsx(Controller, {
+        name: `regressions.${index2}.transform.config.method`,
         control,
         render: ({
           field
-        }) => /* @__PURE__ */ jsx(NumbroFormatSelector, __spreadValues({}, field))
-      })
+        }) => /* @__PURE__ */ jsx(Select, __spreadValues({
+          label: "Method",
+          data: regressionOptions,
+          sx: {
+            flex: 1
+          }
+        }, field))
+      }), method === "polynomial" && /* @__PURE__ */ jsx(Controller, {
+        name: `regressions.${index2}.transform.config.order`,
+        control,
+        render: ({
+          field
+        }) => /* @__PURE__ */ jsx(NumberInput, __spreadValues({
+          label: "Order",
+          sx: {
+            flex: 1
+          }
+        }, field))
+      })]
+    }), /* @__PURE__ */ jsxs(Group, {
+      direction: "column",
+      grow: true,
+      spacing: 4,
+      children: [/* @__PURE__ */ jsx(Text, {
+        size: "sm",
+        children: "Color"
+      }), /* @__PURE__ */ jsx(Controller, {
+        name: `regressions.${index2}.plot.color`,
+        control,
+        render: ({
+          field
+        }) => /* @__PURE__ */ jsx(MantineColorSelector, __spreadValues({}, field))
+      })]
     }), /* @__PURE__ */ jsx(ActionIcon, {
       color: "red",
       variant: "hover",
@@ -3704,16 +4043,17 @@ function YAxisField({
         top: 15,
         right: 5
       },
-      disabled: index2 === 0,
       children: /* @__PURE__ */ jsx(Trash, {
         size: 16
       })
     })]
   }, index2);
 }
-function YAxesField({
+function RegressionsField({
   control,
-  watch
+  watch,
+  getValues,
+  data
 }) {
   const {
     fields,
@@ -3721,169 +4061,448 @@ function YAxesField({
     remove
   } = useFieldArray({
     control,
-    name: "y_axes"
+    name: "regressions"
   });
-  const watchFieldArray = watch("y_axes");
+  const watchFieldArray = watch("regressions");
   const controlledFields = fields.map((field, index2) => {
     return __spreadValues(__spreadValues({}, field), watchFieldArray[index2]);
   });
-  const addYAxis = () => append({
+  const yAxisOptions = React.useMemo(() => {
+    return getValues().y_axes.map(({
+      name
+    }, index2) => ({
+      label: name,
+      value: index2.toString()
+    }));
+  }, [getValues]);
+  const add = () => append({
+    transform: {
+      type: "ecStat:regression",
+      config: {
+        method: "linear",
+        order: 1,
+        formulaOn: "end"
+      }
+    },
     name: "",
-    label_formatter: defaultNumbroFormat
+    y_axis_data_key: "",
+    plot: {
+      type: "line",
+      yAxisIndex: 0,
+      color: "#666666"
+    }
   });
   return /* @__PURE__ */ jsxs(Group, {
     direction: "column",
     grow: true,
-    children: [controlledFields.map((field, index2) => /* @__PURE__ */ jsx(YAxisField, {
+    children: [controlledFields.map((regressionItem, index2) => /* @__PURE__ */ jsx(RegressionField, {
+      regressionItem,
       control,
       index: index2,
-      remove
+      remove,
+      yAxisOptions,
+      data
     })), /* @__PURE__ */ jsx(Group, {
       position: "center",
       mt: "xs",
       children: /* @__PURE__ */ jsx(Button, {
-        onClick: addYAxis,
-        children: "Add a Y Axis"
+        onClick: add,
+        children: "Add a Regression Line"
       })
     })]
   });
 }
-const regressionOptions = [{
-  label: "Linear",
-  value: "linear"
+const options = [{
+  label: "None",
+  value: "none"
+}, {
+  label: "Sum",
+  value: "sum"
+}, {
+  label: "Mean",
+  value: "mean"
+}, {
+  label: "Median",
+  value: "median"
+}, {
+  label: "Max",
+  value: "max"
+}, {
+  label: "Min",
+  value: "min"
+}];
+function _AggregationSelector({
+  label,
+  value,
+  onChange
+}, ref) {
+  return /* @__PURE__ */ jsx(Select, {
+    ref,
+    label,
+    data: options,
+    value,
+    onChange
+  });
+}
+const AggregationSelector = React.forwardRef(_AggregationSelector);
+function _ColorArrayInput({
+  label,
+  value,
+  onChange
+}, ref) {
+  const [values, setValues] = React.useState(Array.isArray(value) ? [...value] : []);
+  const add = React.useCallback(() => {
+    setValues((s) => [...s, ""]);
+  }, [setValues]);
+  const del = React.useCallback((index2) => {
+    setValues((s) => {
+      s.splice(index2, 1);
+      return [...s];
+    });
+  }, [setValues]);
+  const changed = React.useMemo(() => {
+    return !_.isEqual(values, value);
+  }, [values, value]);
+  const submit = () => {
+    onChange(values.map((s) => s.toString()));
+  };
+  const theme = useMantineTheme();
+  const swatches = React.useMemo(() => {
+    return Object.entries(theme.colors).map(([_color, profile]) => profile[6]);
+  }, [theme]);
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsxs(Group, {
+      position: "left",
+      ref,
+      children: [/* @__PURE__ */ jsx(Text, {
+        children: label
+      }), /* @__PURE__ */ jsx(ActionIcon, {
+        mr: 5,
+        variant: "filled",
+        color: "blue",
+        disabled: !changed,
+        onClick: submit,
+        children: /* @__PURE__ */ jsx(DeviceFloppy, {
+          size: 20
+        })
+      })]
+    }), /* @__PURE__ */ jsxs(Group, {
+      children: [values.map((v, i) => /* @__PURE__ */ jsx(ColorInput, {
+        value: v,
+        onChange: (color2) => {
+          setValues((s) => {
+            s.splice(i, 1, color2);
+            return [...s];
+          });
+        },
+        swatches,
+        rightSection: /* @__PURE__ */ jsx(ActionIcon, {
+          onClick: () => del(i),
+          color: "red",
+          children: /* @__PURE__ */ jsx(Trash, {
+            size: 14
+          })
+        }),
+        sx: {
+          width: "45%"
+        }
+      })), /* @__PURE__ */ jsx(ActionIcon, {
+        onClick: add,
+        color: "blue",
+        variant: "outline",
+        children: /* @__PURE__ */ jsx(PlaylistAdd, {
+          size: 20
+        })
+      })]
+    })]
+  });
+}
+const ColorArrayInput = React.forwardRef(_ColorArrayInput);
+const marks = [{
+  label: "initial",
+  value: 0
 }, {
-  label: "Exponential",
-  value: "exponential"
+  label: "500",
+  value: 25
 }, {
-  label: "Logarithmic",
-  value: "logarithmic"
+  label: "700",
+  value: 50
 }, {
-  label: "Polynomial",
-  value: "polynomial"
+  label: "semibold",
+  value: 75
+}, {
+  label: "bold",
+  value: 100
 }];
-function RegressionField({
-  control,
-  regressionItem,
-  index: index2,
-  remove,
-  yAxisOptions,
-  data
-}) {
-  const method = regressionItem.transform.config.method;
+function _MantineFontWeightSlider({
+  label,
+  value,
+  onChange
+}, ref) {
+  var _a, _b;
+  const [mark, setMark] = React.useState((_b = (_a = marks.find((m2) => m2.label === value)) == null ? void 0 : _a.value) != null ? _b : marks[0].value);
+  React.useEffect(() => {
+    const match = marks.find((s) => s.value === mark);
+    if (match) {
+      onChange(match.label);
+    }
+  }, [mark]);
   return /* @__PURE__ */ jsxs(Group, {
     direction: "column",
     grow: true,
-    my: 0,
-    p: "md",
-    pr: 40,
-    sx: {
-      border: "1px solid #eee",
-      position: "relative"
-    },
-    children: [/* @__PURE__ */ jsx(Controller, {
-      name: `regressions.${index2}.name`,
-      control,
-      render: ({
-        field
-      }) => /* @__PURE__ */ jsx(TextInput, __spreadValues({
-        label: "Name",
-        required: true,
-        sx: {
-          flex: 1
-        }
-      }, field))
+    spacing: 0,
+    mt: "sm",
+    mb: "lg",
+    children: [/* @__PURE__ */ jsx(Text, {
+      size: "sm",
+      children: label
+    }), /* @__PURE__ */ jsx(Slider, {
+      label: null,
+      marks,
+      value: mark,
+      onChange: setMark,
+      step: 25,
+      placeholder: "Pick a font size",
+      ref
+    })]
+  });
+}
+const MantineFontWeightSlider = React.forwardRef(_MantineFontWeightSlider);
+function _TextArrayInput({
+  label,
+  value,
+  onChange
+}, ref) {
+  const [values, setValues] = React.useState(Array.isArray(value) ? [...value] : []);
+  const add = React.useCallback(() => {
+    setValues((s) => [...s, ""]);
+  }, [setValues]);
+  const del = React.useCallback((index2) => {
+    setValues((s) => {
+      s.splice(index2, 1);
+      return [...s];
+    });
+  }, [setValues]);
+  const changed = React.useMemo(() => {
+    return !_.isEqual(values, value);
+  }, [values, value]);
+  const submit = () => {
+    onChange(values.map((s) => s.toString()));
+  };
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsxs(Group, {
+      position: "left",
+      ref,
+      children: [/* @__PURE__ */ jsx(Text, {
+        children: label
+      }), /* @__PURE__ */ jsx(ActionIcon, {
+        mr: 5,
+        variant: "filled",
+        color: "blue",
+        disabled: !changed,
+        onClick: submit,
+        children: /* @__PURE__ */ jsx(DeviceFloppy, {
+          size: 20
+        })
+      })]
     }), /* @__PURE__ */ jsxs(Group, {
-      direction: "row",
-      grow: true,
-      noWrap: true,
-      children: [/* @__PURE__ */ jsx(Controller, {
-        name: `regressions.${index2}.y_axis_data_key`,
-        control,
-        render: ({
-          field
-        }) => /* @__PURE__ */ jsx(DataFieldSelector, __spreadValues({
-          label: "Value Field",
-          required: true,
-          data,
-          sx: {
-            flex: 1
-          }
-        }, field))
-      }), /* @__PURE__ */ jsx(Controller, {
-        name: `regressions.${index2}.plot.yAxisIndex`,
-        control,
-        render: (_a) => {
-          var {
-            field: _b
-          } = _a, _c = _b, {
-            value,
-            onChange
-          } = _c, rest = __objRest(_c, [
-            "value",
-            "onChange"
-          ]);
-          var _a2;
-          return /* @__PURE__ */ jsx(Select, __spreadProps(__spreadValues({
-            label: "Y Axis",
-            data: yAxisOptions,
-            disabled: yAxisOptions.length === 0
-          }, rest), {
-            value: (_a2 = value == null ? void 0 : value.toString()) != null ? _a2 : "",
-            onChange: (value2) => {
-              if (!value2) {
-                onChange(0);
-                return;
-              }
-              onChange(Number(value2));
-            },
-            sx: {
-              flex: 1
-            }
-          }));
+      children: [values.map((v, i) => /* @__PURE__ */ jsx(TextInput, {
+        value: v,
+        onChange: (event) => {
+          const newValue = event.currentTarget.value;
+          setValues((s) => {
+            s.splice(i, 1, newValue);
+            return [...s];
+          });
+        },
+        rightSection: /* @__PURE__ */ jsx(ActionIcon, {
+          onClick: () => del(i),
+          color: "red",
+          children: /* @__PURE__ */ jsx(Trash, {
+            size: 14
+          })
+        }),
+        sx: {
+          width: "45%"
         }
+      })), /* @__PURE__ */ jsx(ActionIcon, {
+        onClick: add,
+        color: "blue",
+        variant: "outline",
+        children: /* @__PURE__ */ jsx(PlaylistAdd, {
+          size: 20
+        })
       })]
+    })]
+  });
+}
+const TextArrayInput = React.forwardRef(_TextArrayInput);
+function getANewVariable() {
+  return {
+    name: randomId(),
+    size: "20px",
+    weight: "bold",
+    color: {
+      type: "static",
+      staticColor: "blue"
+    },
+    data_field: "",
+    aggregation: "none",
+    formatter: {
+      output: "number",
+      mantissa: 0
+    }
+  };
+}
+const TemplateInput = React.forwardRef(function TemplateInput2(_a, ref) {
+  var _b = _a, {
+    value,
+    onChange
+  } = _b, rest = __objRest(_b, [
+    "value",
+    "onChange"
+  ]);
+  return /* @__PURE__ */ jsx(TextInput, __spreadValues({
+    ref,
+    value,
+    onChange
+  }, rest));
+});
+function TemplateVariableField({
+  value,
+  onChange,
+  data
+}) {
+  const colorType = value.color.type;
+  const handleChange = (path, newValue) => {
+    const v = _.cloneDeep(value);
+    _.set(v, path, newValue);
+    onChange(v);
+  };
+  return /* @__PURE__ */ jsxs(Box, {
+    px: "sm",
+    py: "md",
+    children: [/* @__PURE__ */ jsx(Text, {
+      weight: "bold",
+      pb: 0,
+      children: value.name
+    }), /* @__PURE__ */ jsx(Divider, {
+      my: "xs",
+      label: "Data",
+      labelPosition: "center"
     }), /* @__PURE__ */ jsxs(Group, {
       direction: "row",
       grow: true,
       noWrap: true,
-      children: [/* @__PURE__ */ jsx(Controller, {
-        name: `regressions.${index2}.transform.config.method`,
-        control,
-        render: ({
-          field
-        }) => /* @__PURE__ */ jsx(Select, __spreadValues({
-          label: "Method",
-          data: regressionOptions,
-          sx: {
-            flex: 1
-          }
-        }, field))
-      }), method === "polynomial" && /* @__PURE__ */ jsx(Controller, {
-        name: `regressions.${index2}.transform.config.order`,
-        control,
-        render: ({
-          field
-        }) => /* @__PURE__ */ jsx(NumberInput, __spreadValues({
-          label: "Order",
-          sx: {
-            flex: 1
-          }
-        }, field))
+      children: [/* @__PURE__ */ jsx(TextInput, {
+        label: "Name",
+        required: true,
+        value: value.name,
+        onChange: (e) => handleChange("name", e.currentTarget.value)
+      }), /* @__PURE__ */ jsx(DataFieldSelector, {
+        label: "Data Field",
+        required: true,
+        data,
+        value: value.data_field,
+        onChange: (v) => handleChange("data_field", v)
+      }), /* @__PURE__ */ jsx(AggregationSelector, {
+        label: "Aggregation",
+        value: value.aggregation,
+        onChange: (v) => handleChange("aggregation", v)
       })]
+    }), /* @__PURE__ */ jsx(NumbroFormatSelector, {
+      value: value.formatter,
+      onChange: (v) => handleChange("formatter", v)
+    }), /* @__PURE__ */ jsx(Divider, {
+      my: "xs",
+      label: "Typography",
+      labelPosition: "center"
+    }), /* @__PURE__ */ jsx(Group, {
+      direction: "column",
+      grow: true,
+      children: /* @__PURE__ */ jsx(TextInput, {
+        label: "Font Size",
+        placeholder: "10px, 1em, 1rem, 100%...",
+        sx: {
+          flex: 1
+        },
+        value: value.size,
+        onChange: (e) => handleChange("size", e.currentTarget.value)
+      })
+    }), /* @__PURE__ */ jsx(Group, {
+      position: "apart",
+      grow: true,
+      sx: {
+        "> *": {
+          flexGrow: 1,
+          maxWidth: "100%"
+        }
+      },
+      children: /* @__PURE__ */ jsx(MantineFontWeightSlider, {
+        label: "Font Weight",
+        value: value.weight,
+        onChange: (v) => handleChange("weight", v)
+      })
+    }), /* @__PURE__ */ jsx(Divider, {
+      my: "xs",
+      label: "Style",
+      labelPosition: "center"
     }), /* @__PURE__ */ jsxs(Group, {
       direction: "column",
       grow: true,
-      spacing: 4,
-      children: [/* @__PURE__ */ jsx(Text, {
-        size: "sm",
-        children: "Color"
-      }), /* @__PURE__ */ jsx(Controller, {
-        name: `regressions.${index2}.plot.color`,
-        control,
-        render: ({
-          field
-        }) => /* @__PURE__ */ jsx(MantineColorSelector, __spreadValues({}, field))
+      children: [/* @__PURE__ */ jsx(Select, {
+        label: "Color Type",
+        data: [{
+          label: "Static Color",
+          value: "static"
+        }, {
+          label: "Continuous Color",
+          value: "continuous"
+        }],
+        value: value.color.type,
+        onChange: (v) => handleChange("color.type", v)
+      }), colorType === "static" && /* @__PURE__ */ jsx(MantineColorSelector, {
+        value: value.color.staticColor,
+        onChange: (v) => handleChange("color.staticColor", v)
+      }), colorType === "continuous" && /* @__PURE__ */ jsxs(Fragment, {
+        children: [/* @__PURE__ */ jsx(TextArrayInput, {
+          label: "Value Range",
+          value: value.color.valueRange,
+          onChange: (v) => handleChange("color.valueRange", v)
+        }), /* @__PURE__ */ jsx(ColorArrayInput, {
+          label: "Color Range",
+          value: value.color.colorRange,
+          onChange: (v) => handleChange("color.colorRange", v)
+        })]
       })]
+    })]
+  });
+}
+function VariableField$1({
+  control,
+  index: index2,
+  remove,
+  data
+}) {
+  return /* @__PURE__ */ jsxs(Group, {
+    direction: "column",
+    grow: true,
+    my: "sm",
+    p: 0,
+    sx: {
+      border: "1px solid #eee",
+      borderTopColor: "#333",
+      borderTopWidth: 2,
+      position: "relative"
+    },
+    children: [/* @__PURE__ */ jsx(Controller, {
+      name: `stats.variables.${index2}`,
+      control,
+      render: ({
+        field
+      }) => /* @__PURE__ */ jsx(TemplateVariableField, __spreadValues({
+        data
+      }, field))
     }), /* @__PURE__ */ jsx(ActionIcon, {
       color: "red",
       variant: "hover",
@@ -3899,10 +4518,9 @@ function RegressionField({
     })]
   }, index2);
 }
-function RegressionsField({
+function StatsField({
   control,
   watch,
-  getValues,
   data
 }) {
   const {
@@ -3911,53 +4529,58 @@ function RegressionsField({
     remove
   } = useFieldArray({
     control,
-    name: "regressions"
+    name: "stats.variables"
   });
-  const watchFieldArray = watch("regressions");
+  watch("stats.templates");
+  const watchFieldArray = watch("stats.variables");
   const controlledFields = fields.map((field, index2) => {
     return __spreadValues(__spreadValues({}, field), watchFieldArray[index2]);
   });
-  const yAxisOptions = React.useMemo(() => {
-    return getValues().y_axes.map(({
-      name
-    }, index2) => ({
-      label: name,
-      value: index2.toString()
-    }));
-  }, [getValues]);
-  const add = () => append({
-    transform: {
-      type: "ecStat:regression",
-      config: {
-        method: "linear",
-        order: 1,
-        formulaOn: "end"
-      }
-    },
-    name: "",
-    y_axis_data_key: "",
-    plot: {
-      type: "line",
-      yAxisIndex: 0,
-      color: "#666666"
-    }
-  });
+  const add = () => append(getANewVariable());
   return /* @__PURE__ */ jsxs(Group, {
     direction: "column",
     grow: true,
-    children: [controlledFields.map((regressionItem, index2) => /* @__PURE__ */ jsx(RegressionField, {
-      regressionItem,
+    children: [/* @__PURE__ */ jsxs(Group, {
+      direction: "column",
+      grow: true,
+      noWrap: true,
+      spacing: 0,
+      children: [/* @__PURE__ */ jsx(Controller, {
+        name: "stats.templates.top",
+        control,
+        render: ({
+          field
+        }) => /* @__PURE__ */ jsx(TemplateInput, __spreadValues({
+          label: "Template for stats above the chart",
+          py: "md",
+          sx: {
+            flexGrow: 1
+          }
+        }, field))
+      }), /* @__PURE__ */ jsx(Controller, {
+        name: "stats.templates.bottom",
+        control,
+        render: ({
+          field
+        }) => /* @__PURE__ */ jsx(TemplateInput, __spreadValues({
+          label: "Template for stats under the chart",
+          py: "md",
+          sx: {
+            flexGrow: 1
+          }
+        }, field))
+      })]
+    }), controlledFields.map((_variableItem, index2) => /* @__PURE__ */ jsx(VariableField$1, {
       control,
       index: index2,
       remove,
-      yAxisOptions,
       data
     })), /* @__PURE__ */ jsx(Group, {
       position: "center",
       mt: "xs",
       children: /* @__PURE__ */ jsx(Button, {
         onClick: add,
-        children: "Add a Regression Line"
+        children: "Add a Variable"
       })
     })]
   });
@@ -3994,6 +4617,18 @@ function withDefaults(series) {
   }
   return series.map(setDefaults);
 }
+function normalizeStats(stats) {
+  if (!stats) {
+    return {
+      templates: {
+        top: "",
+        bottom: ""
+      },
+      variables: []
+    };
+  }
+  return stats;
+}
 function VizCartesianChartPanel({
   conf,
   setConf,
@@ -4008,9 +4643,11 @@ function VizCartesianChartPanel({
   ]);
   const defaultValues = React.useMemo(() => {
     const _a2 = restConf, {
-      x_axis_name = ""
+      x_axis_name = "",
+      stats
     } = _a2, rest = __objRest(_a2, [
-      "x_axis_name"
+      "x_axis_name",
+      "stats"
     ]);
     return __spreadValues({
       series: withDefaults(series != null ? series : []),
@@ -4018,7 +4655,8 @@ function VizCartesianChartPanel({
       y_axes: y_axes != null ? y_axes : [{
         name: "Y Axis",
         label_formatter: defaultNumbroFormat
-      }]
+      }],
+      stats: normalizeStats(stats)
     }, rest);
   }, [series, restConf]);
   React.useEffect(() => {
@@ -4128,6 +4766,13 @@ function VizCartesianChartPanel({
             getValues,
             data
           })
+        }), /* @__PURE__ */ jsx(Accordion.Item, {
+          label: "Stats",
+          children: /* @__PURE__ */ jsx(StatsField, {
+            control,
+            watch,
+            data
+          })
         })]
       })]
     })
@@ -4195,231 +4840,249 @@ function VizPiePanel({
     })
   });
 }
-const marks = [{
-  label: "initial",
-  value: 0
-}, {
-  label: "500",
-  value: 25
-}, {
-  label: "700",
-  value: 50
-}, {
-  label: "semibold",
-  value: 75
-}, {
-  label: "bold",
-  value: 100
-}];
-function _MantineFontWeightSlider({
-  label,
-  value,
-  onChange
-}, ref) {
-  var _a, _b;
-  const [mark, setMark] = React.useState((_b = (_a = marks.find((m2) => m2.label === value)) == null ? void 0 : _a.value) != null ? _b : marks[0].value);
+function VizRichTextPanel({
+  conf,
+  setConf
+}) {
+  const defaultValues = React.useMemo(() => {
+    const {
+      content = ""
+    } = conf;
+    return {
+      content
+    };
+  }, [conf]);
   React.useEffect(() => {
-    const match = marks.find((s) => s.value === mark);
-    if (match) {
-      onChange(match.label);
+    const configMalformed = !_.isEqual(conf, defaultValues);
+    if (configMalformed) {
+      setConf(defaultValues);
     }
-  }, [mark]);
-  return /* @__PURE__ */ jsxs(Group, {
-    direction: "column",
-    grow: true,
-    spacing: "xs",
-    mb: "lg",
-    children: [/* @__PURE__ */ jsx(Text, {
-      children: label
-    }), /* @__PURE__ */ jsx(Slider, {
-      label: null,
-      marks,
-      value: mark,
-      onChange: setMark,
-      step: 25,
-      placeholder: "Pick a font size",
-      ref
-    })]
+  }, [conf, defaultValues]);
+  const {
+    control,
+    handleSubmit,
+    watch,
+    getValues
+  } = useForm({
+    defaultValues
   });
-}
-const MantineFontWeightSlider = React.forwardRef(_MantineFontWeightSlider);
-function _TextArrayInput({
-  label,
-  value,
-  onChange
-}, ref) {
-  const [values, setValues] = React.useState(Array.isArray(value) ? [...value] : []);
-  const add = React.useCallback(() => {
-    setValues((s) => [...s, ""]);
-  }, [setValues]);
-  const del = React.useCallback((index2) => {
-    setValues((s) => {
-      s.splice(index2, 1);
-      return [...s];
-    });
-  }, [setValues]);
+  watch("content");
+  const values = getValues();
   const changed = React.useMemo(() => {
-    return !_.isEqual(values, value);
-  }, [values, value]);
-  const submit = () => {
-    onChange(values.map((s) => s.toString()));
-  };
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [/* @__PURE__ */ jsxs(Group, {
-      position: "left",
-      ref,
-      children: [/* @__PURE__ */ jsx(Text, {
-        children: label
-      }), /* @__PURE__ */ jsx(ActionIcon, {
-        mr: 5,
-        variant: "filled",
-        color: "blue",
-        disabled: !changed,
-        onClick: submit,
-        children: /* @__PURE__ */ jsx(DeviceFloppy, {
-          size: 20
-        })
-      })]
-    }), /* @__PURE__ */ jsxs(Group, {
-      children: [values.map((v, i) => /* @__PURE__ */ jsx(TextInput, {
-        value: v,
-        onChange: (event) => {
-          const newValue = event.currentTarget.value;
-          setValues((s) => {
-            s.splice(i, 1, newValue);
-            return [...s];
-          });
+    return !_.isEqual(values, conf);
+  }, [values, conf]);
+  return /* @__PURE__ */ jsx(Group, {
+    direction: "column",
+    mt: "md",
+    spacing: "xs",
+    grow: true,
+    children: /* @__PURE__ */ jsxs("form", {
+      onSubmit: handleSubmit(setConf),
+      children: [/* @__PURE__ */ jsxs(Group, {
+        position: "left",
+        py: "md",
+        pl: "md",
+        sx: {
+          borderBottom: "1px solid #eee",
+          background: "#efefef"
         },
-        rightSection: /* @__PURE__ */ jsx(ActionIcon, {
-          onClick: () => del(i),
-          color: "red",
-          children: /* @__PURE__ */ jsx(Trash, {
-            size: 14
+        children: [/* @__PURE__ */ jsx(Text, {
+          children: "Content"
+        }), /* @__PURE__ */ jsx(ActionIcon, {
+          type: "submit",
+          mr: 5,
+          variant: "filled",
+          color: "blue",
+          disabled: !changed,
+          children: /* @__PURE__ */ jsx(DeviceFloppy, {
+            size: 20
           })
-        }),
-        sx: {
-          width: "45%"
-        }
-      })), /* @__PURE__ */ jsx(ActionIcon, {
-        onClick: add,
-        color: "blue",
-        variant: "outline",
-        children: /* @__PURE__ */ jsx(PlaylistAdd, {
-          size: 20
-        })
+        })]
+      }), /* @__PURE__ */ jsx(Controller, {
+        name: "content",
+        control,
+        render: ({
+          field
+        }) => /* @__PURE__ */ jsx(RichTextEditor, __spreadValues({
+          sx: {
+            flex: 1
+          }
+        }, field))
       })]
-    })]
+    })
   });
 }
-const TextArrayInput = React.forwardRef(_TextArrayInput);
-function _ColorArrayInput({
-  label,
-  value,
-  onChange
-}, ref) {
-  const [values, setValues] = React.useState(Array.isArray(value) ? [...value] : []);
-  const add = React.useCallback(() => {
-    setValues((s) => [...s, ""]);
-  }, [setValues]);
-  const del = React.useCallback((index2) => {
-    setValues((s) => {
-      s.splice(index2, 1);
-      return [...s];
-    });
-  }, [setValues]);
-  const changed = React.useMemo(() => {
-    return !_.isEqual(values, value);
-  }, [values, value]);
-  const submit = () => {
-    onChange(values.map((s) => s.toString()));
+function updateSchema(legacyConf) {
+  if ("variables" in legacyConf) {
+    return legacyConf;
+  }
+  const {
+    align,
+    size,
+    weight,
+    color: color2,
+    content: {
+      prefix = "",
+      data_field = "value",
+      formatter = {
+        output: "number",
+        mantissa: 0
+      },
+      postfix = ""
+    } = {}
+  } = legacyConf;
+  return {
+    align,
+    template: `${prefix} \${value} ${postfix}`,
+    variables: [
+      {
+        name: "value",
+        data_field,
+        aggregation: "none",
+        formatter,
+        color: color2,
+        weight,
+        size
+      }
+    ]
   };
-  const theme = useMantineTheme();
-  const swatches = React.useMemo(() => {
-    return Object.entries(theme.colors).map(([_color, profile]) => profile[6]);
-  }, [theme]);
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [/* @__PURE__ */ jsxs(Group, {
-      position: "left",
-      ref,
-      children: [/* @__PURE__ */ jsx(Text, {
-        children: label
-      }), /* @__PURE__ */ jsx(ActionIcon, {
-        mr: 5,
-        variant: "filled",
-        color: "blue",
-        disabled: !changed,
-        onClick: submit,
-        children: /* @__PURE__ */ jsx(DeviceFloppy, {
-          size: 20
-        })
-      })]
-    }), /* @__PURE__ */ jsxs(Group, {
-      children: [values.map((v, i) => /* @__PURE__ */ jsx(ColorInput, {
-        value: v,
-        onChange: (color2) => {
-          setValues((s) => {
-            s.splice(i, 1, color2);
-            return [...s];
-          });
-        },
-        swatches,
-        rightSection: /* @__PURE__ */ jsx(ActionIcon, {
-          onClick: () => del(i),
-          color: "red",
-          children: /* @__PURE__ */ jsx(Trash, {
-            size: 14
-          })
-        }),
-        sx: {
-          width: "45%"
-        }
-      })), /* @__PURE__ */ jsx(ActionIcon, {
-        onClick: add,
-        color: "blue",
-        variant: "outline",
-        children: /* @__PURE__ */ jsx(PlaylistAdd, {
-          size: 20
-        })
-      })]
+}
+function VariableField({
+  control,
+  index: index2,
+  remove,
+  data
+}) {
+  return /* @__PURE__ */ jsxs(Group, {
+    direction: "column",
+    grow: true,
+    my: "sm",
+    p: 0,
+    sx: {
+      border: "1px solid #eee",
+      borderTopColor: "#333",
+      borderTopWidth: 2,
+      position: "relative"
+    },
+    children: [/* @__PURE__ */ jsx(Controller, {
+      name: `variables.${index2}`,
+      control,
+      render: ({
+        field
+      }) => /* @__PURE__ */ jsx(TemplateVariableField, __spreadValues({
+        data
+      }, field))
+    }), /* @__PURE__ */ jsx(ActionIcon, {
+      color: "red",
+      variant: "hover",
+      onClick: () => remove(index2),
+      sx: {
+        position: "absolute",
+        top: 15,
+        right: 5
+      },
+      children: /* @__PURE__ */ jsx(Trash, {
+        size: 16
+      })
     })]
-  });
+  }, index2);
 }
-const ColorArrayInput = React.forwardRef(_ColorArrayInput);
-function VizStatsPanel({
-  conf,
-  setConf,
+function VariablesField({
+  control,
+  watch,
   data
 }) {
-  const defaultValues = _.merge({}, {
+  const {
+    fields,
+    append,
+    remove
+  } = useFieldArray({
+    control,
+    name: "variables"
+  });
+  const watchFieldArray = watch("variables");
+  const controlledFields = fields.map((field, index2) => {
+    return __spreadValues(__spreadValues({}, field), watchFieldArray[index2]);
+  });
+  const add = () => append(getANewVariable());
+  return /* @__PURE__ */ jsxs(Group, {
+    direction: "column",
+    grow: true,
+    children: [controlledFields.map((_variableItem, index2) => /* @__PURE__ */ jsx(VariableField, {
+      control,
+      index: index2,
+      remove,
+      data
+    })), /* @__PURE__ */ jsx(Group, {
+      position: "center",
+      mt: "xs",
+      children: /* @__PURE__ */ jsx(Button, {
+        onClick: add,
+        children: "Add a Variable"
+      })
+    })]
+  });
+}
+function getInitialConf() {
+  return {
     align: "center",
-    size: "100px",
-    weight: "bold",
-    color: {
-      type: "static",
-      staticColor: "red"
-    },
-    content: {
-      prefix: "",
+    template: "The variable ${value} is defined in Variables section",
+    variables: [{
+      name: "value",
+      size: "20px",
+      weight: "bold",
+      color: {
+        type: "static",
+        staticColor: "blue"
+      },
       data_field: "",
+      aggregation: "none",
       formatter: {
         output: "number",
         mantissa: 0
-      },
-      postfix: ""
+      }
+    }]
+  };
+}
+function VizStatsPanel({
+  conf,
+  setConf,
+  data
+}) {
+  const defaultValues = React.useMemo(() => {
+    const {
+      align,
+      template = "",
+      variables = []
+    } = updateSchema(conf);
+    if (!align) {
+      return getInitialConf();
     }
-  }, conf);
+    return {
+      variables,
+      template,
+      align
+    };
+  }, [conf]);
+  React.useEffect(() => {
+    const configMalformed = !_.isEqual(conf, defaultValues);
+    if (configMalformed) {
+      setConf(defaultValues);
+    }
+  }, [conf, defaultValues]);
   const {
     control,
     handleSubmit,
     watch,
-    formState: {
-      isDirty
-    }
+    getValues
   } = useForm({
     defaultValues
   });
-  const colorType = watch("color.type");
-  watch("color.valueField");
+  watch(["variables", "template"]);
+  const values = getValues();
+  const changed = React.useMemo(() => {
+    return !_.isEqual(values, conf);
+  }, [values, conf]);
   return /* @__PURE__ */ jsx(Group, {
     direction: "column",
     mt: "md",
@@ -4444,166 +5107,32 @@ function VizStatsPanel({
           mr: 5,
           variant: "filled",
           color: "blue",
-          disabled: !isDirty,
+          disabled: !changed,
           children: /* @__PURE__ */ jsx(DeviceFloppy, {
             size: 20
           })
         })]
-      }), /* @__PURE__ */ jsxs(Accordion, {
-        offsetIcon: false,
-        multiple: true,
-        initialState: {
-          0: true,
-          2: true
-        },
-        children: [/* @__PURE__ */ jsx(Accordion.Item, {
-          label: "Content",
-          children: /* @__PURE__ */ jsxs(Group, {
-            direction: "column",
-            grow: true,
-            children: [/* @__PURE__ */ jsxs(Group, {
-              direction: "row",
-              grow: true,
-              noWrap: true,
-              children: [/* @__PURE__ */ jsx(Controller, {
-                name: "content.prefix",
-                control,
-                render: ({
-                  field
-                }) => /* @__PURE__ */ jsx(TextInput, __spreadValues({
-                  label: "Prefix",
-                  sx: {
-                    flexGrow: 1
-                  }
-                }, field))
-              }), /* @__PURE__ */ jsx(Controller, {
-                name: "content.data_field",
-                control,
-                render: ({
-                  field
-                }) => /* @__PURE__ */ jsx(DataFieldSelector, __spreadValues({
-                  label: "Data Field",
-                  required: true,
-                  data
-                }, field))
-              }), /* @__PURE__ */ jsx(Controller, {
-                name: "content.postfix",
-                control,
-                render: ({
-                  field
-                }) => /* @__PURE__ */ jsx(TextInput, __spreadValues({
-                  label: "Postfix",
-                  sx: {
-                    flexGrow: 1
-                  }
-                }, field))
-              })]
-            }), /* @__PURE__ */ jsx(Controller, {
-              name: "content.formatter",
-              control,
-              render: ({
-                field
-              }) => /* @__PURE__ */ jsx(NumbroFormatSelector, __spreadValues({}, field))
-            })]
-          })
-        }), /* @__PURE__ */ jsxs(Accordion.Item, {
-          label: "Font",
-          children: [/* @__PURE__ */ jsx(Group, {
-            direction: "column",
-            grow: true,
-            children: /* @__PURE__ */ jsx(Controller, {
-              name: "size",
-              control,
-              render: ({
-                field
-              }) => /* @__PURE__ */ jsx(TextInput, __spreadValues({
-                label: "Font Size",
-                placeholder: "10px, 1em, 1rem, 100%...",
-                sx: {
-                  flex: 1
-                }
-              }, field))
-            })
-          }), /* @__PURE__ */ jsx(Group, {
-            position: "apart",
-            grow: true,
-            sx: {
-              "> *": {
-                flexGrow: 1,
-                maxWidth: "100%"
-              }
-            },
-            children: /* @__PURE__ */ jsx(Controller, {
-              name: "weight",
-              control,
-              render: ({
-                field
-              }) => /* @__PURE__ */ jsx(MantineFontWeightSlider, __spreadValues({
-                label: "Font Weight"
-              }, field))
-            })
-          })]
-        }), /* @__PURE__ */ jsx(Accordion.Item, {
-          label: "Color",
-          children: /* @__PURE__ */ jsxs(Group, {
-            direction: "column",
-            grow: true,
-            children: [/* @__PURE__ */ jsx(Controller, {
-              name: "color.type",
-              control,
-              render: ({
-                field
-              }) => /* @__PURE__ */ jsx(Select, __spreadValues({
-                label: "Color Type",
-                data: [{
-                  label: "Static Color",
-                  value: "static"
-                }, {
-                  label: "Continuous Color",
-                  value: "continuous"
-                }]
-              }, field))
-            }), colorType === "static" && /* @__PURE__ */ jsx(Controller, {
-              name: "color.staticColor",
-              control,
-              render: ({
-                field
-              }) => /* @__PURE__ */ jsx(MantineColorSelector, __spreadValues({}, field))
-            }), colorType === "continuous" && /* @__PURE__ */ jsxs(Fragment, {
-              children: [/* @__PURE__ */ jsx(Controller, {
-                name: "color.valueField",
-                control,
-                defaultValue: "",
-                render: ({
-                  field
-                }) => /* @__PURE__ */ jsx(TextInput, __spreadValues({
-                  placeholder: "Calculate color with this field",
-                  label: "Value Field",
-                  required: true,
-                  sx: {
-                    flex: 1
-                  }
-                }, field))
-              }), /* @__PURE__ */ jsx(Controller, {
-                name: "color.valueRange",
-                control,
-                render: ({
-                  field
-                }) => /* @__PURE__ */ jsx(TextArrayInput, __spreadValues({
-                  label: "Value Range"
-                }, field))
-              }), /* @__PURE__ */ jsx(Controller, {
-                name: "color.colorRange",
-                control,
-                render: ({
-                  field
-                }) => /* @__PURE__ */ jsx(ColorArrayInput, __spreadValues({
-                  label: "Color Range"
-                }, field))
-              })]
-            })]
-          })
-        })]
+      }), /* @__PURE__ */ jsx(Controller, {
+        name: "template",
+        control,
+        render: ({
+          field
+        }) => /* @__PURE__ */ jsx(TemplateInput, __spreadValues({
+          label: "Template",
+          py: "md",
+          sx: {
+            flexGrow: 1
+          }
+        }, field))
+      }), /* @__PURE__ */ jsx(Text, {
+        pb: "sm",
+        pt: "md",
+        size: "sm",
+        children: "Variables"
+      }), /* @__PURE__ */ jsx(VariablesField, {
+        control,
+        watch,
+        data
       })]
     })
   });
@@ -4688,17 +5217,17 @@ function ValueTypeSelector({
     sx
   });
 }
-function VizTablePanel(_e) {
-  var _f = _e, {
-    conf: _g
-  } = _f, _h = _g, {
+function VizTablePanel(_c) {
+  var _d = _c, {
+    conf: _e
+  } = _d, _f = _e, {
     columns
-  } = _h, restConf = __objRest(_h, [
+  } = _f, restConf = __objRest(_f, [
     "columns"
   ]), {
     setConf,
     data
-  } = _f;
+  } = _d;
   const form = useForm$1({
     initialValues: __spreadValues({
       id_field: "id",
@@ -5044,6 +5573,10 @@ const types = [{
   value: "stats",
   label: "Stats",
   Panel: VizStatsPanel
+}, {
+  value: "rich-text",
+  label: "Rich Text",
+  Panel: VizRichTextPanel
 }, {
   value: "table",
   label: "Table",
@@ -5722,7 +6255,7 @@ function SelectOrAddQuery({
       chooseDefault();
     }
   }, [id, queries, chooseDefault]);
-  const options = React.useMemo(() => {
+  const options2 = React.useMemo(() => {
     return queries.map((d) => ({
       value: d.id,
       label: d.id
@@ -5749,7 +6282,7 @@ function SelectOrAddQuery({
       children: [/* @__PURE__ */ jsx(Text, {
         children: "Select a Query"
       }), /* @__PURE__ */ jsx(Select, {
-        data: options,
+        data: options2,
         value: id,
         onChange: setID,
         allowDeselect: false,