@devtable/dashboard 1.22.0 → 1.24.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, Accordion, ColorInput, Divider, 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__) {
@@ -2460,6 +2460,32 @@ function VizPie({
     }
   });
 }
+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 sorted[middle];
+}
+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];
+  }
+}
 var invariant = function() {
 };
 const clamp$1 = (min, max, v) => Math.min(Math.max(v, min), max);
@@ -2826,14 +2852,12 @@ class InterpolateColor {
     return this.mapper(value);
   }
 }
-function getColorByColorConf(conf, dataRow) {
+function getColorByColorConf(conf, value) {
   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 new InterpolateColor(conf).getColor(value);
   }
   return "black";
 }
@@ -2849,46 +2873,108 @@ function getNonStatsDataText(data) {
   }
   return data.toString();
 }
-function VizStats(_a) {
-  var _b = _a, {
-    conf: _c
-  } = _b, _d = _c, {
-    content,
+function variablesToElements(variables, data) {
+  const ret = {};
+  variables.forEach(({
+    name,
+    color: color2,
+    data_field,
+    aggregation,
     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);
+    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);
     }
-    const contents = [prefix, numbro(contentData).format(formatter), postfix];
-    return contents.join(" ");
-  }, [content, data]);
-  return /* @__PURE__ */ jsx(Text, __spreadProps(__spreadValues({}, rest), {
-    color: finalColor,
-    sx: {
-      fontSize: size
-    },
-    children: finalContent
+    ret[name] = /* @__PURE__ */ jsx(Text, {
+      sx: {
+        fontSize: size,
+        display: "inline"
+      },
+      color: getColorByColorConf(color2, value),
+      weight,
+      children: valueContent
+    });
+  });
+  return ret;
+}
+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 arr;
+  }).flat().filter((t) => t !== void 0);
+  return ret;
+}
+function textToJSX(text) {
+  return withLineBreaks(text);
+}
+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 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 VizRichText({
+  conf,
+  width,
+  height
+}) {
+  if (!width || !height) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(RichTextEditor, {
+    readOnly: true,
+    value: conf.content,
+    onChange: _.noop,
+    sx: {
+      border: "none"
+    }
+  });
+}
 function renderViz(width, height, data, viz) {
   const props = {
     width,
@@ -2907,6 +2993,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 +3003,7 @@ function renderViz(width, height, data, viz) {
       return null;
   }
 }
+const typesDontNeedData = ["rich-text"];
 function Viz({
   viz,
   data,
@@ -2925,6 +3014,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 +3067,7 @@ function _DataFieldSelector({
   data,
   sx
 }, ref) {
-  const options = React.useMemo(() => {
+  const options2 = React.useMemo(() => {
     if (!Array.isArray(data) || data.length === 0) {
       return [];
     }
@@ -2981,7 +3080,7 @@ function _DataFieldSelector({
   return /* @__PURE__ */ jsx(Select, {
     ref,
     label,
-    data: options,
+    data: options2,
     value,
     onChange,
     required,
@@ -3164,7 +3263,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 +3274,7 @@ function _MantineColorSelector({
       }),
       variant: !isThemeColor ? "default" : "filled",
       sx: {
-        maxWidth: "100%",
+        maxWidth: "46%",
         flexGrow: 1
       }
     }), /* @__PURE__ */ jsx(Text, {
@@ -3194,7 +3293,7 @@ function _MantineColorSelector({
         radius: 4
       }),
       sx: {
-        maxWidth: "100%",
+        maxWidth: "46%",
         flexGrow: 1
       }
     })]
@@ -4195,55 +4294,147 @@ function VizPiePanel({
     })
   });
 }
-const marks = [{
-  label: "initial",
-  value: 0
+function VizRichTextPanel({
+  conf,
+  setConf
+}) {
+  const defaultValues = React.useMemo(() => {
+    const {
+      content = ""
+    } = conf;
+    return {
+      content
+    };
+  }, [conf]);
+  React.useEffect(() => {
+    const configMalformed = !_.isEqual(conf, defaultValues);
+    if (configMalformed) {
+      setConf(defaultValues);
+    }
+  }, [conf, defaultValues]);
+  const {
+    control,
+    handleSubmit,
+    watch,
+    getValues
+  } = useForm({
+    defaultValues
+  });
+  watch("content");
+  const values = getValues();
+  const changed = React.useMemo(() => {
+    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"
+        },
+        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
+          })
+        })]
+      }), /* @__PURE__ */ jsx(Controller, {
+        name: "content",
+        control,
+        render: ({
+          field
+        }) => /* @__PURE__ */ jsx(RichTextEditor, __spreadValues({
+          sx: {
+            flex: 1
+          }
+        }, field))
+      })]
+    })
+  });
+}
+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 options = [{
+  label: "None",
+  value: "none"
 }, {
-  label: "500",
-  value: 25
+  label: "Sum",
+  value: "sum"
 }, {
-  label: "700",
-  value: 50
+  label: "Mean",
+  value: "mean"
 }, {
-  label: "semibold",
-  value: 75
+  label: "Median",
+  value: "median"
 }, {
-  label: "bold",
-  value: 100
+  label: "Max",
+  value: "max"
+}, {
+  label: "Min",
+  value: "min"
 }];
-function _MantineFontWeightSlider({
+function _AggregationSelector({
   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,
-    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
-    })]
+  return /* @__PURE__ */ jsx(Select, {
+    ref,
+    label,
+    data: options,
+    value,
+    onChange
   });
 }
-const MantineFontWeightSlider = React.forwardRef(_MantineFontWeightSlider);
-function _TextArrayInput({
+const AggregationSelector = React.forwardRef(_AggregationSelector);
+function _ColorArrayInput({
   label,
   value,
   onChange
@@ -4264,6 +4455,10 @@ function _TextArrayInput({
   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",
@@ -4281,15 +4476,15 @@ function _TextArrayInput({
         })
       })]
     }), /* @__PURE__ */ jsxs(Group, {
-      children: [values.map((v, i) => /* @__PURE__ */ jsx(TextInput, {
+      children: [values.map((v, i) => /* @__PURE__ */ jsx(ColorInput, {
         value: v,
-        onChange: (event) => {
-          const newValue = event.currentTarget.value;
+        onChange: (color2) => {
           setValues((s) => {
-            s.splice(i, 1, newValue);
+            s.splice(i, 1, color2);
             return [...s];
           });
         },
+        swatches,
         rightSection: /* @__PURE__ */ jsx(ActionIcon, {
           onClick: () => del(i),
           color: "red",
@@ -4311,8 +4506,58 @@ function _TextArrayInput({
     })]
   });
 }
-const TextArrayInput = React.forwardRef(_TextArrayInput);
-function _ColorArrayInput({
+const ColorArrayInput = React.forwardRef(_ColorArrayInput);
+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);
+  React.useEffect(() => {
+    const match = marks.find((s) => s.value === mark);
+    if (match) {
+      onChange(match.label);
+    }
+  }, [mark]);
+  return /* @__PURE__ */ jsxs(Group, {
+    direction: "column",
+    grow: true,
+    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
@@ -4333,10 +4578,6 @@ function _ColorArrayInput({
   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",
@@ -4354,15 +4595,15 @@ function _ColorArrayInput({
         })
       })]
     }), /* @__PURE__ */ jsxs(Group, {
-      children: [values.map((v, i) => /* @__PURE__ */ jsx(ColorInput, {
+      children: [values.map((v, i) => /* @__PURE__ */ jsx(TextInput, {
         value: v,
-        onChange: (color2) => {
+        onChange: (event) => {
+          const newValue = event.currentTarget.value;
           setValues((s) => {
-            s.splice(i, 1, color2);
+            s.splice(i, 1, newValue);
             return [...s];
           });
         },
-        swatches,
         rightSection: /* @__PURE__ */ jsx(ActionIcon, {
           onClick: () => del(i),
           color: "red",
@@ -4384,42 +4625,281 @@ function _ColorArrayInput({
     })]
   });
 }
-const ColorArrayInput = React.forwardRef(_ColorArrayInput);
-function VizStatsPanel({
-  conf,
-  setConf,
+const TextArrayInput = React.forwardRef(_TextArrayInput);
+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 defaultValues = _.merge({}, {
-    align: "center",
-    size: "100px",
+  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(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,
+      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({
+  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);
+}
+function VariablesField({
+  control,
+  watch,
+  data
+}) {
+  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({
+    name: randomId(),
+    size: "20px",
     weight: "bold",
     color: {
       type: "static",
-      staticColor: "red"
+      staticColor: "blue"
     },
-    content: {
-      prefix: "",
+    data_field: "",
+    aggregation: "none",
+    formatter: {
+      output: "number",
+      mantissa: 0
+    }
+  });
+  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",
+    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 +4924,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 +5034,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 +5390,10 @@ const types = [{
   value: "stats",
   label: "Stats",
   Panel: VizStatsPanel
+}, {
+  value: "rich-text",
+  label: "Rich Text",
+  Panel: VizRichTextPanel
 }, {
   value: "table",
   label: "Table",
@@ -5722,7 +6072,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 +6099,7 @@ function SelectOrAddQuery({
       children: [/* @__PURE__ */ jsx(Text, {
         children: "Select a Query"
       }), /* @__PURE__ */ jsx(Select, {
-        data: options,
+        data: options2,
         value: id,
         onChange: setID,
         allowDeselect: false,