@devtable/dashboard 1.24.0 → 1.25.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, Divider, JsonInput, Modal, AppShell, Tabs, Menu, 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";
@@ -2008,7 +2008,7 @@ const defaultOption$1 = {
     }
   },
   grid: {
-    top: 30,
+    top: 0,
     left: 15,
     right: 15,
     bottom: 30,
@@ -2102,364 +2102,6 @@ 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;
-  }
-  return /* @__PURE__ */ jsx(ReactEChartsCore, {
-    echarts,
-    option,
-    style: {
-      width,
-      height
-    }
-  });
-}
-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
-      });
-  }
-}
-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
-    }
-  }, 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;
-  }
-}
-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}`);
-    })
-  });
-}
-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
-    }
-  });
-}
-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
-          };
-        }
-      }
-    };
-  }, [width]);
-  const option = _.merge({}, defaultOption, labelOptions, restConf, {
-    series: {
-      data: chartData
-    }
-  });
-  return /* @__PURE__ */ jsx(ReactEChartsCore, {
-    echarts,
-    option,
-    style: {
-      width,
-      height
-    }
-  });
-}
 function median(numbers) {
   const sorted = Array.from(numbers).sort((a, b) => a - b);
   const middle = Math.floor(sorted.length / 2);
@@ -2852,94 +2494,503 @@ class InterpolateColor {
     return this.mapper(value);
   }
 }
-function getColorByColorConf(conf, value) {
-  if (conf.type === "static") {
-    return conf.staticColor;
-  }
-  if (conf.type === "continuous") {
-    return new InterpolateColor(conf).getColor(value);
-  }
-  return "black";
+function getColorByColorConf(conf, value) {
+  if (conf.type === "static") {
+    return conf.staticColor;
+  }
+  if (conf.type === "continuous") {
+    return new InterpolateColor(conf).getColor(value);
+  }
+  return "black";
+}
+function getNonStatsDataText(data) {
+  if (data === null) {
+    return "null";
+  }
+  if (data === void 0) {
+    return "undefined";
+  }
+  if (Array.isArray(data)) {
+    return `Array(${data.length})`;
+  }
+  return data.toString();
+}
+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 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)]
+    });
+  });
+}
+echarts.use([BarChart, LineChart, ScatterChart, GridComponent, LegendComponent, TooltipComponent, CanvasRenderer]);
+echarts.registerTransform(echartsStat.transform.regression);
+function templateNotEmpty(str) {
+  return str.trim().length > 0;
+}
+function Chart({
+  conf,
+  data,
+  width,
+  height
+}) {
+  const option = React.useMemo(() => {
+    return getOption(conf, data);
+  }, [conf, data]);
+  if (!width || !height) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(ReactEChartsCore, {
+    echarts,
+    option,
+    style: {
+      width,
+      height
+    }
+  });
+}
+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 getNonStatsDataText(data) {
-  if (data === null) {
-    return "null";
-  }
-  if (data === void 0) {
-    return "undefined";
-  }
-  if (Array.isArray(data)) {
-    return `Array(${data.length})`;
+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 data.toString();
 }
-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);
+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]);
     }
-    ret[name] = /* @__PURE__ */ jsx(Text, {
-      sx: {
-        fontSize: size,
-        display: "inline"
-      },
-      color: getColorByColorConf(color2, value),
-      weight,
-      children: valueContent
-    });
+    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
+    }
+  }, 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
   });
-  return ret;
+  const names = Object.keys(extendedParams);
+  const vals = Object.values(extendedParams);
+  try {
+    return new Function(...names, `return \`${template}\`;`)(...vals);
+  } catch (error) {
+    return error.message;
+  }
 }
-function preserveWhiteSpaces(text) {
-  return text.split(" ").map((s) => /* @__PURE__ */ jsxs(Fragment, {
-    children: [s, "\xA0"]
-  }));
+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 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", {}));
+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
     }
-    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);
+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
+          };
+        }
+      }
+    };
+  }, [width]);
+  const option = _.merge({}, defaultOption, labelOptions, restConf, {
+    series: {
+      data: chartData
     }
-    const element = variableElements[match[1]];
-    if (!element) {
-      return textToJSX(text);
+  });
+  return /* @__PURE__ */ jsx(ReactEChartsCore, {
+    echarts,
+    option,
+    style: {
+      width,
+      height
     }
-    const rest = (_a = match[2]) != null ? _a : "";
-    return /* @__PURE__ */ jsxs(Fragment, {
-      children: [element, textToJSX(rest)]
-    });
   });
 }
 function VizStats({
@@ -4040,272 +4091,574 @@ function RegressionsField({
       yAxisIndex: 0,
       color: "#666666"
     }
-  });
+  });
+  return /* @__PURE__ */ jsxs(Group, {
+    direction: "column",
+    grow: true,
+    children: [controlledFields.map((regressionItem, index2) => /* @__PURE__ */ jsx(RegressionField, {
+      regressionItem,
+      control,
+      index: index2,
+      remove,
+      yAxisOptions,
+      data
+    })), /* @__PURE__ */ jsx(Group, {
+      position: "center",
+      mt: "xs",
+      children: /* @__PURE__ */ jsx(Button, {
+        onClick: add,
+        children: "Add a Regression Line"
+      })
+    })]
+  });
+}
+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: "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,
-    children: [controlledFields.map((regressionItem, index2) => /* @__PURE__ */ jsx(RegressionField, {
-      regressionItem,
-      control,
-      index: index2,
-      remove,
-      yAxisOptions,
-      data
-    })), /* @__PURE__ */ jsx(Group, {
-      position: "center",
-      mt: "xs",
-      children: /* @__PURE__ */ jsx(Button, {
+    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, {
+      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,
-        children: "Add a Regression Line"
-      })
+        color: "blue",
+        variant: "outline",
+        children: /* @__PURE__ */ jsx(PlaylistAdd, {
+          size: 20
+        })
+      })]
     })]
   });
 }
-function withDefaults(series) {
-  function setDefaults({
-    type,
-    name,
-    showSymbol,
-    symbolSize = 5,
-    y_axis_data_key = "value",
-    yAxisIndex = 0,
-    label_position = "top",
-    stack = "1",
-    color: color2 = "black",
-    barWidth = "30",
-    smooth = false,
-    step = false
-  }) {
-    return {
-      type,
-      name,
-      showSymbol,
-      symbolSize,
-      y_axis_data_key,
-      yAxisIndex,
-      label_position,
-      stack,
-      color: color2,
-      barWidth,
-      smooth,
-      step
-    };
-  }
-  return series.map(setDefaults);
+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
+    }
+  };
 }
-function VizCartesianChartPanel({
-  conf,
-  setConf,
+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 _a = conf, {
-    series,
-    y_axes
-  } = _a, restConf = __objRest(_a, [
-    "series",
-    "y_axes"
-  ]);
-  const defaultValues = React.useMemo(() => {
-    const _a2 = restConf, {
-      x_axis_name = ""
-    } = _a2, rest = __objRest(_a2, [
-      "x_axis_name"
-    ]);
-    return __spreadValues({
-      series: withDefaults(series != null ? series : []),
-      x_axis_name,
-      y_axes: y_axes != null ? y_axes : [{
-        name: "Y Axis",
-        label_formatter: defaultNumbroFormat
-      }]
-    }, rest);
-  }, [series, restConf]);
-  React.useEffect(() => {
-    const configMalformed = !_.isEqual(conf, defaultValues);
-    if (configMalformed) {
-      setConf(defaultValues);
-    }
-  }, [conf, defaultValues]);
-  const {
-    control,
-    handleSubmit,
-    watch,
-    getValues
-  } = useForm({
-    defaultValues
-  });
-  watch(["x_axis_data_key", "x_axis_name"]);
-  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",
+  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: {
-          borderBottom: "1px solid #eee",
-          background: "#efefef"
-        },
-        children: [/* @__PURE__ */ jsx(Text, {
-          children: "Chart Config"
-        }), /* @__PURE__ */ jsx(ActionIcon, {
-          type: "submit",
-          mr: 5,
-          variant: "filled",
-          color: "blue",
-          disabled: !changed,
-          children: /* @__PURE__ */ jsx(DeviceFloppy, {
-            size: 20
-          })
-        })]
-      }), /* @__PURE__ */ jsxs(Accordion, {
-        offsetIcon: false,
-        multiple: true,
-        initialState: {
-          0: true,
-          1: true
+          flex: 1
         },
-        children: [/* @__PURE__ */ jsx(Accordion.Item, {
-          label: "X Axis",
-          children: /* @__PURE__ */ jsxs(Group, {
-            direction: "row",
-            grow: true,
-            noWrap: true,
-            children: [/* @__PURE__ */ jsx(Controller, {
-              name: "x_axis_data_key",
-              control,
-              render: ({
-                field
-              }) => /* @__PURE__ */ jsx(DataFieldSelector, __spreadValues({
-                label: "X Axis Data Field",
-                required: true,
-                data,
-                sx: {
-                  flex: 1
-                }
-              }, field))
-            }), /* @__PURE__ */ jsx(Controller, {
-              name: "x_axis_name",
-              control,
-              render: ({
-                field
-              }) => /* @__PURE__ */ jsx(TextInput, __spreadValues({
-                label: "X Axis Name",
-                sx: {
-                  flex: 1
-                }
-              }, field))
-            })]
-          })
-        }), /* @__PURE__ */ jsx(Accordion.Item, {
-          label: "Y Axes",
-          children: /* @__PURE__ */ jsx(YAxesField, {
-            control,
-            watch
-          })
-        }), /* @__PURE__ */ jsx(Accordion.Item, {
-          label: "Series",
-          children: /* @__PURE__ */ jsx(SeriesField, {
-            control,
-            watch,
-            getValues,
-            data
-          })
-        }), /* @__PURE__ */ jsx(Accordion.Item, {
-          label: "Regression Lines",
-          children: /* @__PURE__ */ jsx(RegressionsField, {
-            control,
-            watch,
-            getValues,
-            data
-          })
+        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 VizPiePanel({
-  conf: {
-    label_field,
-    value_field
-  },
-  setConf,
+function VariableField$1({
+  control,
+  index: index2,
+  remove,
   data
 }) {
-  const form = useForm$1({
-    initialValues: {
-      label_field,
-      value_field
-    }
+  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",
+      onClick: () => remove(index2),
+      sx: {
+        position: "absolute",
+        top: 15,
+        right: 5
+      },
+      children: /* @__PURE__ */ jsx(Trash, {
+        size: 16
+      })
+    })]
+  }, index2);
+}
+function StatsField({
+  control,
+  watch,
+  data
+}) {
+  const {
+    fields,
+    append,
+    remove
+  } = useFieldArray({
+    control,
+    name: "stats.variables"
   });
-  return /* @__PURE__ */ jsx(Group, {
+  watch("stats.templates");
+  const watchFieldArray = watch("stats.variables");
+  const controlledFields = fields.map((field, index2) => {
+    return __spreadValues(__spreadValues({}, field), watchFieldArray[index2]);
+  });
+  const add = () => append(getANewVariable());
+  return /* @__PURE__ */ jsxs(Group, {
     direction: "column",
-    mt: "md",
-    spacing: "xs",
     grow: true,
-    children: /* @__PURE__ */ jsxs("form", {
-      onSubmit: form.onSubmit(setConf),
-      children: [/* @__PURE__ */ jsxs(Group, {
-        position: "apart",
-        mb: "lg",
-        sx: {
-          position: "relative"
-        },
-        children: [/* @__PURE__ */ jsx(Text, {
-          children: "Pie Config"
-        }), /* @__PURE__ */ jsx(ActionIcon, {
-          type: "submit",
-          mr: 5,
-          variant: "filled",
-          color: "blue",
-          children: /* @__PURE__ */ jsx(DeviceFloppy, {
-            size: 20
-          })
-        })]
-      }), /* @__PURE__ */ jsxs(Group, {
-        direction: "column",
-        mt: "md",
-        spacing: "xs",
-        grow: true,
-        p: "md",
-        mb: "sm",
-        sx: {
-          border: "1px solid #eee",
-          borderRadius: "5px"
-        },
-        children: [/* @__PURE__ */ jsx(DataFieldSelector, __spreadValues({
-          label: "Label Field",
-          required: true,
-          data
-        }, form.getInputProps("label_field"))), /* @__PURE__ */ jsx(DataFieldSelector, __spreadValues({
-          label: "Value Field",
-          required: true,
-          data
-        }, form.getInputProps("value_field")))]
+    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,
+      data
+    })), /* @__PURE__ */ jsx(Group, {
+      position: "center",
+      mt: "xs",
+      children: /* @__PURE__ */ jsx(Button, {
+        onClick: add,
+        children: "Add a Variable"
+      })
+    })]
   });
 }
-function VizRichTextPanel({
+function withDefaults(series) {
+  function setDefaults({
+    type,
+    name,
+    showSymbol,
+    symbolSize = 5,
+    y_axis_data_key = "value",
+    yAxisIndex = 0,
+    label_position = "top",
+    stack = "1",
+    color: color2 = "black",
+    barWidth = "30",
+    smooth = false,
+    step = false
+  }) {
+    return {
+      type,
+      name,
+      showSymbol,
+      symbolSize,
+      y_axis_data_key,
+      yAxisIndex,
+      label_position,
+      stack,
+      color: color2,
+      barWidth,
+      smooth,
+      step
+    };
+  }
+  return series.map(setDefaults);
+}
+function normalizeStats(stats) {
+  if (!stats) {
+    return {
+      templates: {
+        top: "",
+        bottom: ""
+      },
+      variables: []
+    };
+  }
+  return stats;
+}
+function VizCartesianChartPanel({
   conf,
-  setConf
+  setConf,
+  data
 }) {
+  const _a = conf, {
+    series,
+    y_axes
+  } = _a, restConf = __objRest(_a, [
+    "series",
+    "y_axes"
+  ]);
   const defaultValues = React.useMemo(() => {
-    const {
-      content = ""
-    } = conf;
-    return {
-      content
-    };
-  }, [conf]);
+    const _a2 = restConf, {
+      x_axis_name = "",
+      stats
+    } = _a2, rest = __objRest(_a2, [
+      "x_axis_name",
+      "stats"
+    ]);
+    return __spreadValues({
+      series: withDefaults(series != null ? series : []),
+      x_axis_name,
+      y_axes: y_axes != null ? y_axes : [{
+        name: "Y Axis",
+        label_formatter: defaultNumbroFormat
+      }],
+      stats: normalizeStats(stats)
+    }, rest);
+  }, [series, restConf]);
   React.useEffect(() => {
     const configMalformed = !_.isEqual(conf, defaultValues);
     if (configMalformed) {
@@ -4320,436 +4673,280 @@ function VizRichTextPanel({
   } = 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: "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];
-          });
+  watch(["x_axis_data_key", "x_axis_name"]);
+  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"
         },
-        swatches,
-        rightSection: /* @__PURE__ */ jsx(ActionIcon, {
-          onClick: () => del(i),
-          color: "red",
-          children: /* @__PURE__ */ jsx(Trash, {
-            size: 14
+        children: [/* @__PURE__ */ jsx(Text, {
+          children: "Chart Config"
+        }), /* @__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__ */ jsxs(Accordion, {
+        offsetIcon: false,
+        multiple: true,
+        initialState: {
+          0: true,
+          1: true
+        },
+        children: [/* @__PURE__ */ jsx(Accordion.Item, {
+          label: "X Axis",
+          children: /* @__PURE__ */ jsxs(Group, {
+            direction: "row",
+            grow: true,
+            noWrap: true,
+            children: [/* @__PURE__ */ jsx(Controller, {
+              name: "x_axis_data_key",
+              control,
+              render: ({
+                field
+              }) => /* @__PURE__ */ jsx(DataFieldSelector, __spreadValues({
+                label: "X Axis Data Field",
+                required: true,
+                data,
+                sx: {
+                  flex: 1
+                }
+              }, field))
+            }), /* @__PURE__ */ jsx(Controller, {
+              name: "x_axis_name",
+              control,
+              render: ({
+                field
+              }) => /* @__PURE__ */ jsx(TextInput, __spreadValues({
+                label: "X Axis Name",
+                sx: {
+                  flex: 1
+                }
+              }, field))
+            })]
+          })
+        }), /* @__PURE__ */ jsx(Accordion.Item, {
+          label: "Y Axes",
+          children: /* @__PURE__ */ jsx(YAxesField, {
+            control,
+            watch
+          })
+        }), /* @__PURE__ */ jsx(Accordion.Item, {
+          label: "Series",
+          children: /* @__PURE__ */ jsx(SeriesField, {
+            control,
+            watch,
+            getValues,
+            data
+          })
+        }), /* @__PURE__ */ jsx(Accordion.Item, {
+          label: "Regression Lines",
+          children: /* @__PURE__ */ jsx(RegressionsField, {
+            control,
+            watch,
+            getValues,
+            data
+          })
+        }), /* @__PURE__ */ jsx(Accordion.Item, {
+          label: "Stats",
+          children: /* @__PURE__ */ jsx(StatsField, {
+            control,
+            watch,
+            data
+          })
+        })]
       })]
-    })]
+    })
   });
 }
-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);
+function VizPiePanel({
+  conf: {
+    label_field,
+    value_field
+  },
+  setConf,
+  data
+}) {
+  const form = useForm$1({
+    initialValues: {
+      label_field,
+      value_field
     }
-  }, [mark]);
-  return /* @__PURE__ */ jsxs(Group, {
+  });
+  return /* @__PURE__ */ jsx(Group, {
     direction: "column",
+    mt: "md",
+    spacing: "xs",
     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
-}, 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, {
-      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];
-          });
+    children: /* @__PURE__ */ jsxs("form", {
+      onSubmit: form.onSubmit(setConf),
+      children: [/* @__PURE__ */ jsxs(Group, {
+        position: "apart",
+        mb: "lg",
+        sx: {
+          position: "relative"
         },
-        rightSection: /* @__PURE__ */ jsx(ActionIcon, {
-          onClick: () => del(i),
-          color: "red",
-          children: /* @__PURE__ */ jsx(Trash, {
-            size: 14
+        children: [/* @__PURE__ */ jsx(Text, {
+          children: "Pie Config"
+        }), /* @__PURE__ */ jsx(ActionIcon, {
+          type: "submit",
+          mr: 5,
+          variant: "filled",
+          color: "blue",
+          children: /* @__PURE__ */ jsx(DeviceFloppy, {
+            size: 20
           })
-        }),
+        })]
+      }), /* @__PURE__ */ jsxs(Group, {
+        direction: "column",
+        mt: "md",
+        spacing: "xs",
+        grow: true,
+        p: "md",
+        mb: "sm",
         sx: {
-          width: "45%"
-        }
-      })), /* @__PURE__ */ jsx(ActionIcon, {
-        onClick: add,
-        color: "blue",
-        variant: "outline",
-        children: /* @__PURE__ */ jsx(PlaylistAdd, {
-          size: 20
-        })
+          border: "1px solid #eee",
+          borderRadius: "5px"
+        },
+        children: [/* @__PURE__ */ jsx(DataFieldSelector, __spreadValues({
+          label: "Label Field",
+          required: true,
+          data
+        }, form.getInputProps("label_field"))), /* @__PURE__ */ jsx(DataFieldSelector, __spreadValues({
+          label: "Value Field",
+          required: true,
+          data
+        }, form.getInputProps("value_field")))]
       })]
-    })]
+    })
   });
 }
-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
+function VizRichTextPanel({
+  conf,
+  setConf
 }) {
-  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%...",
+  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: {
-          flex: 1
+          borderBottom: "1px solid #eee",
+          background: "#efefef"
         },
-        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)
+        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
+      }
+    ]
+  };
+}
 function VariableField({
   control,
   index: index2,
@@ -4807,21 +5004,7 @@ function VariablesField({
   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: "blue"
-    },
-    data_field: "",
-    aggregation: "none",
-    formatter: {
-      output: "number",
-      mantissa: 0
-    }
-  });
+  const add = () => append(getANewVariable());
   return /* @__PURE__ */ jsxs(Group, {
     direction: "column",
     grow: true,