@devtable/dashboard 1.24.0 → 1.27.0

package/dist/dashboard.es.js

@@ -33,15 +33,15 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import React from "react";
+import React, { createContext, useContext, useReducer } 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 { Box, Group, Button, Modal, Popover, Tooltip, Text, ActionIcon, TextInput, LoadingOverlay, Table, Select, useMantineTheme, ColorSwatch, Switch, Slider, SegmentedControl, NumberInput, ColorInput, Divider, Accordion, JsonInput, 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";
+import { InfoCircle, DeviceFloppy, Refresh, Trash, PlaylistAdd, Settings, Copy, Resize, Paint, PlayerPlay, Database, Recycle, Share } from "tabler-icons-react";
 import RichTextEditor, { RichTextEditor as RichTextEditor$1 } from "@mantine/rte";
-import { useInputState, useElementSize, randomId } from "@mantine/hooks";
+import { randomId, useInputState, useElementSize } from "@mantine/hooks";
 import ReactEChartsCore from "echarts-for-react/lib/core";
 import * as echarts from "echarts/core";
 import { SunburstChart, BarChart, LineChart, ScatterChart, PieChart } from "echarts/charts";
@@ -58,7 +58,7 @@ var DashboardMode = /* @__PURE__ */ ((DashboardMode2) => {
   DashboardMode2["Edit"] = "edit";
   return DashboardMode2;
 })(DashboardMode || {});
-const initialContext$3 = {
+const initialContext$4 = {
   layoutFrozen: false,
   freezeLayout: () => {
   },
@@ -67,7 +67,7 @@ const initialContext$3 = {
   inLayoutMode: false,
   inUseMode: true
 };
-const LayoutStateContext = React.createContext(initialContext$3);
+const LayoutStateContext = React.createContext(initialContext$4);
 function explainSQLSnippet(snippet, context) {
   const names = Object.keys(context);
   const vals = Object.values(context);
@@ -162,10 +162,11 @@ async function getQuerySources() {
     return {};
   }
 }
-const initialContext$2 = {};
-const initialContextInfoContext = initialContext$2;
-const ContextInfoContext = React.createContext(initialContext$2);
-const initialContext$1 = {
+const initialContext$3 = {};
+const initialContextInfoContext = initialContext$3;
+const ContextInfoContext = React.createContext(initialContext$3);
+const initialContext$2 = {
+  id: "",
   data: [],
   loading: false,
   title: "",
@@ -186,16 +187,96 @@ const initialContext$1 = {
   refreshData: () => {
   }
 };
-const PanelContext = React.createContext(initialContext$1);
-const initialContext = {
-  sqlSnippets: [],
-  setSQLSnippets: () => {
-  },
-  queries: [],
-  setQueries: () => {
+const PanelContext = React.createContext(initialContext$2);
+const ModalsContext = createContext(null);
+ModalsContext.displayName = "@mantine/modals/ModalsContext";
+function useModals() {
+  const ctx = useContext(ModalsContext);
+  if (!ctx) {
+    throw new Error("[@mantine/modals] useModals hook was called outside of context, wrap your app with ModalsProvider component");
   }
+  return ctx;
+}
+var __defProp$1 = Object.defineProperty;
+var __defProps$1 = Object.defineProperties;
+var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
+var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
+var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$1.call(b, prop))
+      __defNormalProp$1(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1)
+    for (var prop of __getOwnPropSymbols$1(b)) {
+      if (__propIsEnum$1.call(b, prop))
+        __defNormalProp$1(a, prop, b[prop]);
+    }
+  return a;
 };
-const DefinitionContext = React.createContext(initialContext);
+var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
+function ConfirmModal({
+  id,
+  cancelProps,
+  confirmProps,
+  labels = { cancel: "", confirm: "" },
+  closeOnConfirm = true,
+  closeOnCancel = true,
+  groupProps,
+  onCancel,
+  onConfirm,
+  children
+}) {
+  const { cancel: cancelLabel, confirm: confirmLabel } = labels;
+  const ctx = useModals();
+  const handleCancel = (event) => {
+    typeof (cancelProps == null ? void 0 : cancelProps.onClick) === "function" && (cancelProps == null ? void 0 : cancelProps.onClick(event));
+    typeof onCancel === "function" && onCancel();
+    closeOnCancel && ctx.closeModal(id);
+  };
+  const handleConfirm = (event) => {
+    typeof (confirmProps == null ? void 0 : confirmProps.onClick) === "function" && (confirmProps == null ? void 0 : confirmProps.onClick(event));
+    typeof onConfirm === "function" && onConfirm();
+    closeOnConfirm && ctx.closeModal(id);
+  };
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, children && /* @__PURE__ */ React.createElement(Box, {
+    mb: "md"
+  }, children), /* @__PURE__ */ React.createElement(Group, __spreadValues$1({
+    position: "right"
+  }, groupProps), /* @__PURE__ */ React.createElement(Button, __spreadProps$1(__spreadValues$1({
+    variant: "default"
+  }, cancelProps), {
+    onClick: handleCancel
+  }), (cancelProps == null ? void 0 : cancelProps.children) || cancelLabel), /* @__PURE__ */ React.createElement(Button, __spreadProps$1(__spreadValues$1({}, confirmProps), {
+    onClick: handleConfirm
+  }), (confirmProps == null ? void 0 : confirmProps.children) || confirmLabel)));
+}
+function modalsReducer(state, action) {
+  switch (action.type) {
+    case "OPEN": {
+      return {
+        current: action.payload,
+        modals: [...state.modals, action.payload]
+      };
+    }
+    case "CLOSE": {
+      return {
+        current: state.modals[state.modals.length - 2] || null,
+        modals: state.modals.filter((m2) => m2.id !== action.payload)
+      };
+    }
+    case "CLOSE_ALL": {
+      return {
+        current: state.current,
+        modals: []
+      };
+    }
+    default: {
+      return state;
+    }
+  }
+}
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 var jsxRuntime = { exports: {} };
 var reactJsxRuntime_production_min = {};
@@ -230,6 +311,240 @@ reactJsxRuntime_production_min.jsxs = q;
 const jsx = jsxRuntime.exports.jsx;
 const jsxs = jsxRuntime.exports.jsxs;
 const Fragment = jsxRuntime.exports.Fragment;
+var __defProp2 = Object.defineProperty;
+var __defProps2 = Object.defineProperties;
+var __getOwnPropDescs2 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols2 = Object.getOwnPropertySymbols;
+var __hasOwnProp2 = Object.prototype.hasOwnProperty;
+var __propIsEnum2 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, {
+  enumerable: true,
+  configurable: true,
+  writable: true,
+  value
+}) : obj[key] = value;
+var __spreadValues2 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp2.call(b, prop))
+      __defNormalProp2(a, prop, b[prop]);
+  if (__getOwnPropSymbols2)
+    for (var prop of __getOwnPropSymbols2(b)) {
+      if (__propIsEnum2.call(b, prop))
+        __defNormalProp2(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps2 = (a, b) => __defProps2(a, __getOwnPropDescs2(b));
+var __objRest2 = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp2.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols2)
+    for (var prop of __getOwnPropSymbols2(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum2.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function separateConfirmModalProps(props) {
+  if (!props) {
+    return {
+      confirmProps: {},
+      modalProps: {}
+    };
+  }
+  const _a = props, {
+    id,
+    children,
+    onCancel,
+    onConfirm,
+    closeOnConfirm,
+    closeOnCancel,
+    cancelProps,
+    confirmProps,
+    groupProps,
+    labels
+  } = _a, others = __objRest2(_a, ["id", "children", "onCancel", "onConfirm", "closeOnConfirm", "closeOnCancel", "cancelProps", "confirmProps", "groupProps", "labels"]);
+  return {
+    confirmProps: {
+      id,
+      children,
+      onCancel,
+      onConfirm,
+      closeOnConfirm,
+      closeOnCancel,
+      cancelProps,
+      confirmProps,
+      groupProps,
+      labels
+    },
+    modalProps: __spreadValues2({
+      id
+    }, others)
+  };
+}
+function ModalsProvider({
+  children,
+  modalProps,
+  labels,
+  modals
+}) {
+  const [state, dispatch] = useReducer(modalsReducer, {
+    modals: [],
+    current: null
+  });
+  const closeAll = (canceled) => {
+    state.modals.forEach((modal) => {
+      var _a, _b, _c, _d;
+      if (modal.type === "confirm" && canceled) {
+        (_b = (_a = modal.props) == null ? void 0 : _a.onCancel) == null ? void 0 : _b.call(_a);
+      }
+      (_d = (_c = modal.props) == null ? void 0 : _c.onClose) == null ? void 0 : _d.call(_c);
+    });
+    dispatch({
+      type: "CLOSE_ALL"
+    });
+  };
+  const openModal = (props) => {
+    const id = props.id || randomId();
+    dispatch({
+      type: "OPEN",
+      payload: {
+        id,
+        type: "content",
+        props
+      }
+    });
+    return id;
+  };
+  const openConfirmModal = (props) => {
+    const id = props.id || randomId();
+    dispatch({
+      type: "OPEN",
+      payload: {
+        id,
+        type: "confirm",
+        props
+      }
+    });
+    return id;
+  };
+  const openContextModal = (modal, props) => {
+    const id = props.id || randomId();
+    dispatch({
+      type: "OPEN",
+      payload: {
+        id,
+        type: "context",
+        props,
+        ctx: modal
+      }
+    });
+    return id;
+  };
+  const closeModal = (id, canceled) => {
+    var _a, _b, _c, _d;
+    if (state.modals.length <= 1) {
+      closeAll(canceled);
+      return;
+    }
+    const modal = state.modals.find((item) => item.id === id);
+    if ((modal == null ? void 0 : modal.type) === "confirm" && canceled) {
+      (_b = (_a = modal.props) == null ? void 0 : _a.onCancel) == null ? void 0 : _b.call(_a);
+    }
+    (_d = (_c = modal == null ? void 0 : modal.props) == null ? void 0 : _c.onClose) == null ? void 0 : _d.call(_c);
+    dispatch({
+      type: "CLOSE",
+      payload: modal.id
+    });
+  };
+  const ctx = {
+    modals: state.modals,
+    openModal,
+    openConfirmModal,
+    openContextModal,
+    closeModal,
+    closeAll
+  };
+  const getCurrentModal = () => {
+    var _a;
+    switch ((_a = state.current) == null ? void 0 : _a.type) {
+      case "context": {
+        const _b = state.current.props, {
+          innerProps
+        } = _b, rest = __objRest2(_b, ["innerProps"]);
+        const ContextModal = modals[state.current.ctx];
+        return {
+          modalProps: rest,
+          content: /* @__PURE__ */ jsx(ContextModal, {
+            innerProps,
+            context: ctx,
+            id: state.current.id
+          })
+        };
+      }
+      case "confirm": {
+        const {
+          modalProps: separatedModalProps,
+          confirmProps: separatedConfirmProps
+        } = separateConfirmModalProps(state.current.props);
+        return {
+          modalProps: separatedModalProps,
+          content: /* @__PURE__ */ jsx(ConfirmModal, __spreadValues({}, __spreadProps2(__spreadValues2({}, separatedConfirmProps), {
+            id: state.current.id,
+            labels: state.current.props.labels || labels
+          })))
+        };
+      }
+      case "content": {
+        const _c = state.current.props, {
+          children: currentModalChildren
+        } = _c, rest = __objRest2(_c, ["children"]);
+        return {
+          modalProps: rest,
+          content: /* @__PURE__ */ jsx(Fragment, {
+            children: currentModalChildren
+          })
+        };
+      }
+      default: {
+        return {
+          modalProps: {},
+          content: null
+        };
+      }
+    }
+  };
+  const {
+    modalProps: currentModalProps,
+    content
+  } = getCurrentModal();
+  return /* @__PURE__ */ jsxs(ModalsContext.Provider, {
+    value: ctx,
+    children: [/* @__PURE__ */ jsx(Modal, __spreadProps(__spreadValues({}, __spreadProps2(__spreadValues2(__spreadValues2({}, modalProps), currentModalProps), {
+      opened: state.modals.length > 0,
+      onClose: () => closeModal(state.current.id)
+    })), {
+      children: content
+    })), children]
+  });
+}
+const initialContext$1 = {
+  addPanel: _.noop,
+  duplidatePanel: _.noop,
+  removePanelByID: _.noop
+};
+const DashboardActionContext = React.createContext(initialContext$1);
+const initialContext = {
+  sqlSnippets: [],
+  setSQLSnippets: () => {
+  },
+  queries: [],
+  setQueries: () => {
+  }
+};
+const DefinitionContext = React.createContext(initialContext);
 function DescriptionPopover({
   position = "bottom",
   trigger = "hover"
@@ -2008,7 +2323,7 @@ const defaultOption$1 = {
     }
   },
   grid: {
-    top: 30,
+    top: 0,
     left: 15,
     right: 15,
     bottom: 30,
@@ -2102,439 +2417,81 @@ function getOption(conf, data) {
   };
   return _.merge({}, defaultOption$1, customOptions);
 }
-echarts.use([BarChart, LineChart, ScatterChart, GridComponent, LegendComponent, TooltipComponent, CanvasRenderer]);
-echarts.registerTransform(echartsStat.transform.regression);
-function VizCartesianChart({
-  conf,
-  data,
-  width,
-  height
-}) {
-  const option = React.useMemo(() => {
-    return getOption(conf, data);
-  }, [conf, data]);
-  if (!width || !height) {
-    return null;
+function median(numbers) {
+  const sorted = Array.from(numbers).sort((a, b) => a - b);
+  const middle = Math.floor(sorted.length / 2);
+  if (sorted.length % 2 === 0) {
+    return (sorted[middle - 1] + sorted[middle]) / 2;
   }
-  return /* @__PURE__ */ jsx(ReactEChartsCore, {
-    echarts,
-    option,
-    style: {
-      width,
-      height
-    }
-  });
-}
-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
-  });
+  return sorted[middle];
 }
-function NumberCell({
-  value
-}) {
-  const num = numbro(value).format({
-    thousandSeparated: true
-  });
-  return /* @__PURE__ */ jsx(Text, {
-    component: "span",
-    children: num
-  });
+function aggregateValue(data, data_field, aggregation) {
+  var _a, _b, _c;
+  const numbers = data.map((d) => d[data_field]);
+  switch (aggregation) {
+    case "sum":
+      return _.sum(numbers);
+    case "mean":
+      return _.mean(numbers);
+    case "median":
+      return median(numbers);
+    case "max":
+      return (_a = _.max(numbers)) != null ? _a : 0;
+    case "min":
+      return (_b = _.min(numbers)) != null ? _b : 0;
+    default:
+      return (_c = data[0]) == null ? void 0 : _c[data_field];
+  }
 }
-function PercentageCell({
-  value
-}) {
-  const num = numbro(value).format({
-    output: "percent",
-    mantissa: 3
-  });
-  return /* @__PURE__ */ jsx(Text, {
-    component: "span",
-    children: num
-  });
+var invariant = function() {
+};
+const clamp$1 = (min, max, v) => Math.min(Math.max(v, min), max);
+const progress = (from, to, value) => {
+  const toFromDifference = to - from;
+  return toFromDifference === 0 ? 1 : (value - from) / toFromDifference;
+};
+const mix = (from, to, progress2) => -progress2 * from + progress2 * to + from;
+const clamp = (min, max) => (v) => Math.max(Math.min(v, max), min);
+const sanitize = (v) => v % 1 ? Number(v.toFixed(5)) : v;
+const floatRegex = /(-)?([\d]*\.?[\d])+/g;
+const colorRegex = /(#[0-9a-f]{6}|#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2,3}\s*\/*\s*[\d\.]+%?\))/gi;
+const singleColorRegex = /^(#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2,3}\s*\/*\s*[\d\.]+%?\))$/i;
+function isString(v) {
+  return typeof v === "string";
 }
-function 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);
-  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);
-const progress = (from, to, value) => {
-  const toFromDifference = to - from;
-  return toFromDifference === 0 ? 1 : (value - from) / toFromDifference;
-};
-const mix = (from, to, progress2) => -progress2 * from + progress2 * to + from;
-const clamp = (min, max) => (v) => Math.max(Math.min(v, max), min);
-const sanitize = (v) => v % 1 ? Number(v.toFixed(5)) : v;
-const floatRegex = /(-)?([\d]*\.?[\d])+/g;
-const colorRegex = /(#[0-9a-f]{6}|#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2,3}\s*\/*\s*[\d\.]+%?\))/gi;
-const singleColorRegex = /^(#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2,3}\s*\/*\s*[\d\.]+%?\))$/i;
-function isString(v) {
-  return typeof v === "string";
-}
-const number = {
-  test: (v) => typeof v === "number",
-  parse: parseFloat,
-  transform: (v) => v
-};
-const alpha = Object.assign(Object.assign({}, number), { transform: clamp(0, 1) });
-Object.assign(Object.assign({}, number), { default: 1 });
-const createUnitType = (unit) => ({
-  test: (v) => isString(v) && v.endsWith(unit) && v.split(" ").length === 1,
-  parse: parseFloat,
-  transform: (v) => `${v}${unit}`
-});
-const percent = createUnitType("%");
-Object.assign(Object.assign({}, percent), { parse: (v) => percent.parse(v) / 100, transform: (v) => percent.transform(v * 100) });
-const isColorString = (type, testProp) => (v) => {
-  return Boolean(isString(v) && singleColorRegex.test(v) && v.startsWith(type) || testProp && Object.prototype.hasOwnProperty.call(v, testProp));
-};
-const splitColor = (aName, bName, cName) => (v) => {
-  if (!isString(v))
-    return v;
-  const [a, b, c, alpha2] = v.match(floatRegex);
-  return {
-    [aName]: parseFloat(a),
-    [bName]: parseFloat(b),
-    [cName]: parseFloat(c),
-    alpha: alpha2 !== void 0 ? parseFloat(alpha2) : 1
-  };
-};
-const hsla = {
-  test: isColorString("hsl", "hue"),
-  parse: splitColor("hue", "saturation", "lightness"),
-  transform: ({ hue, saturation, lightness, alpha: alpha$1 = 1 }) => {
-    return "hsla(" + Math.round(hue) + ", " + percent.transform(sanitize(saturation)) + ", " + percent.transform(sanitize(lightness)) + ", " + sanitize(alpha.transform(alpha$1)) + ")";
+const number = {
+  test: (v) => typeof v === "number",
+  parse: parseFloat,
+  transform: (v) => v
+};
+const alpha = Object.assign(Object.assign({}, number), { transform: clamp(0, 1) });
+Object.assign(Object.assign({}, number), { default: 1 });
+const createUnitType = (unit) => ({
+  test: (v) => isString(v) && v.endsWith(unit) && v.split(" ").length === 1,
+  parse: parseFloat,
+  transform: (v) => `${v}${unit}`
+});
+const percent = createUnitType("%");
+Object.assign(Object.assign({}, percent), { parse: (v) => percent.parse(v) / 100, transform: (v) => percent.transform(v * 100) });
+const isColorString = (type, testProp) => (v) => {
+  return Boolean(isString(v) && singleColorRegex.test(v) && v.startsWith(type) || testProp && Object.prototype.hasOwnProperty.call(v, testProp));
+};
+const splitColor = (aName, bName, cName) => (v) => {
+  if (!isString(v))
+    return v;
+  const [a, b, c, alpha2] = v.match(floatRegex);
+  return {
+    [aName]: parseFloat(a),
+    [bName]: parseFloat(b),
+    [cName]: parseFloat(c),
+    alpha: alpha2 !== void 0 ? parseFloat(alpha2) : 1
+  };
+};
+const hsla = {
+  test: isColorString("hsl", "hue"),
+  parse: splitColor("hue", "saturation", "lightness"),
+  transform: ({ hue, saturation, lightness, alpha: alpha$1 = 1 }) => {
+    return "hsla(" + Math.round(hue) + ", " + percent.transform(sanitize(saturation)) + ", " + percent.transform(sanitize(lightness)) + ", " + sanitize(alpha.transform(alpha$1)) + ")";
   }
 };
 const clampRgbUnit = clamp(0, 255);
@@ -2861,85 +2818,494 @@ function getColorByColorConf(conf, 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})`;
+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 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
+        }
+      }
     }
-    return arr;
-  }).flat().filter((t) => t !== void 0);
-  return ret;
-}
-function textToJSX(text) {
-  return withLineBreaks(text);
+  }, 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
+    }
+  });
 }
-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({
@@ -4056,700 +4422,846 @@ function RegressionsField({
       mt: "xs",
       children: /* @__PURE__ */ jsx(Button, {
         onClick: add,
-        children: "Add a Regression Line"
-      })
+        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,
+    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,
+        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",
-        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
+  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
         },
-        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__ */ jsx(Group, {
+  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")))]
-      })]
-    })
-  });
+    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 VizRichTextPanel({
-  conf,
-  setConf
+function StatsField({
+  control,
+  watch,
+  data
 }) {
-  const defaultValues = React.useMemo(() => {
-    const {
-      content = ""
-    } = conf;
-    return {
-      content
-    };
-  }, [conf]);
-  React.useEffect(() => {
-    const configMalformed = !_.isEqual(conf, defaultValues);
-    if (configMalformed) {
-      setConf(defaultValues);
-    }
-  }, [conf, defaultValues]);
   const {
+    fields,
+    append,
+    remove
+  } = useFieldArray({
     control,
-    handleSubmit,
-    watch,
-    getValues
-  } = useForm({
-    defaultValues
+    name: "stats.variables"
   });
-  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
-          })
-        })]
+  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",
+    grow: true,
+    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: "content",
+        name: "stats.templates.bottom",
         control,
         render: ({
           field
-        }) => /* @__PURE__ */ jsx(RichTextEditor, __spreadValues({
+        }) => /* @__PURE__ */ jsx(TemplateInput, __spreadValues({
+          label: "Template for stats under the chart",
+          py: "md",
           sx: {
-            flex: 1
+            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 updateSchema(legacyConf) {
-  if ("variables" in legacyConf) {
-    return legacyConf;
+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
+    };
   }
-  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
-  });
+  return series.map(setDefaults);
 }
-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
-        })
-      })]
-    })]
-  });
+function normalizeStats(stats) {
+  if (!stats) {
+    return {
+      templates: {
+        top: "",
+        bottom: ""
+      },
+      variables: []
+    };
+  }
+  return stats;
 }
-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);
+function VizCartesianChartPanel({
+  conf,
+  setConf,
+  data
+}) {
+  const _a = conf, {
+    series,
+    y_axes
+  } = _a, restConf = __objRest(_a, [
+    "series",
+    "y_axes"
+  ]);
+  const defaultValues = React.useMemo(() => {
+    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 match = marks.find((s) => s.value === mark);
-    if (match) {
-      onChange(match.label);
+    const configMalformed = !_.isEqual(conf, defaultValues);
+    if (configMalformed) {
+      setConf(defaultValues);
     }
-  }, [mark]);
-  return /* @__PURE__ */ jsxs(Group, {
-    direction: "column",
-    grow: true,
-    spacing: 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
-    })]
+  }, [conf, defaultValues]);
+  const {
+    control,
+    handleSubmit,
+    watch,
+    getValues
+  } = useForm({
+    defaultValues
   });
-}
-const MantineFontWeightSlider = React.forwardRef(_MantineFontWeightSlider);
-function _TextArrayInput({
-  label,
-  value,
-  onChange
-}, ref) {
-  const [values, setValues] = React.useState(Array.isArray(value) ? [...value] : []);
-  const add = React.useCallback(() => {
-    setValues((s) => [...s, ""]);
-  }, [setValues]);
-  const del = React.useCallback((index2) => {
-    setValues((s) => {
-      s.splice(index2, 1);
-      return [...s];
-    });
-  }, [setValues]);
+  watch(["x_axis_data_key", "x_axis_name"]);
+  const values = getValues();
   const changed = React.useMemo(() => {
-    return !_.isEqual(values, value);
-  }, [values, value]);
-  const submit = () => {
-    onChange(values.map((s) => s.toString()));
-  };
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [/* @__PURE__ */ jsxs(Group, {
-      position: "left",
-      ref,
-      children: [/* @__PURE__ */ jsx(Text, {
-        children: label
-      }), /* @__PURE__ */ jsx(ActionIcon, {
-        mr: 5,
-        variant: "filled",
-        color: "blue",
-        disabled: !changed,
-        onClick: submit,
-        children: /* @__PURE__ */ jsx(DeviceFloppy, {
-          size: 20
-        })
-      })]
-    }), /* @__PURE__ */ jsxs(Group, {
-      children: [values.map((v, i) => /* @__PURE__ */ jsx(TextInput, {
-        value: v,
-        onChange: (event) => {
-          const newValue = event.currentTarget.value;
-          setValues((s) => {
-            s.splice(i, 1, newValue);
-            return [...s];
-          });
+    return !_.isEqual(values, conf);
+  }, [values, conf]);
+  return /* @__PURE__ */ jsx(Group, {
+    direction: "column",
+    mt: "md",
+    spacing: "xs",
+    grow: true,
+    children: /* @__PURE__ */ jsxs("form", {
+      onSubmit: handleSubmit(setConf),
+      children: [/* @__PURE__ */ jsxs(Group, {
+        position: "left",
+        py: "md",
+        pl: "md",
+        sx: {
+          borderBottom: "1px solid #eee",
+          background: "#efefef"
         },
-        rightSection: /* @__PURE__ */ jsx(ActionIcon, {
-          onClick: () => del(i),
-          color: "red",
-          children: /* @__PURE__ */ jsx(Trash, {
-            size: 14
+        children: [/* @__PURE__ */ jsx(Text, {
+          children: "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 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,
+function VizPiePanel({
+  conf: {
+    label_field,
+    value_field
+  },
+  setConf,
   data
 }) {
-  const colorType = value.color.type;
-  const handleChange = (path, newValue) => {
-    const v = _.cloneDeep(value);
-    _.set(v, path, newValue);
-    onChange(v);
-  };
-  return /* @__PURE__ */ jsxs(Box, {
-    px: "sm",
-    py: "md",
-    children: [/* @__PURE__ */ jsx(Text, {
-      weight: "bold",
-      pb: 0,
-      children: value.name
-    }), /* @__PURE__ */ jsx(Divider, {
-      my: "xs",
-      label: "Data",
-      labelPosition: "center"
-    }), /* @__PURE__ */ jsxs(Group, {
-      direction: "row",
-      grow: true,
-      noWrap: true,
-      children: [/* @__PURE__ */ jsx(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)
+  const form = useForm$1({
+    initialValues: {
+      label_field,
+      value_field
+    }
+  });
+  return /* @__PURE__ */ jsx(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")))]
       })]
-    }), /* @__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%...",
+    })
+  });
+}
+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: {
-          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 +5319,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,
@@ -5561,16 +6059,34 @@ function PanelSettingsModal({
 }
 var titleBar = "";
 function PanelTitleBar({}) {
+  const modals = useModals();
   const [opened, setOpened] = React.useState(false);
   const open = () => setOpened(true);
   const close = () => setOpened(false);
   const {
+    id,
     title,
     refreshData
   } = React.useContext(PanelContext);
   const {
     inEditMode
   } = React.useContext(LayoutStateContext);
+  const {
+    duplidatePanel,
+    removePanelByID
+  } = React.useContext(DashboardActionContext);
+  const duplicate = React.useCallback(() => {
+    duplidatePanel(id);
+  }, [duplidatePanel, id]);
+  const remove = () => modals.openConfirmModal({
+    title: "Delete this panel?",
+    labels: {
+      confirm: "Confirm",
+      cancel: "Cancel"
+    },
+    onCancel: () => console.log("Cancel"),
+    onConfirm: () => removePanelByID(id)
+  });
   return /* @__PURE__ */ jsxs(Box, {
     sx: {
       position: "relative"
@@ -5611,8 +6127,14 @@ function PanelTitleBar({}) {
           }),
           children: "Settings"
         }), /* @__PURE__ */ jsx(Divider, {}), /* @__PURE__ */ jsx(Menu.Item, {
+          onClick: duplicate,
+          icon: /* @__PURE__ */ jsx(Copy, {
+            size: 14
+          }),
+          children: "Duplicate"
+        }), /* @__PURE__ */ jsx(Menu.Item, {
           color: "red",
-          disabled: true,
+          onClick: remove,
           icon: /* @__PURE__ */ jsx(Trash, {
             size: 14
           }),
@@ -5672,6 +6194,7 @@ function Panel({
   const refreshData = refresh;
   return /* @__PURE__ */ jsx(PanelContext.Provider, {
     value: {
+      id,
       data,
       loading,
       title,
@@ -5701,7 +6224,6 @@ function DashboardLayout({
   setPanels,
   className = "layout",
   rowHeight = 10,
-  onRemoveItem,
   isDraggable,
   isResizable
 }) {
@@ -5737,7 +6259,6 @@ function DashboardLayout({
         children: /* @__PURE__ */ jsx(Panel, __spreadProps(__spreadValues({
           id
         }, rest), {
-          destroy: () => onRemoveItem(id),
           update: (panel) => {
             setPanels((prevs) => {
               prevs.splice(index2, 1, panel);
@@ -6481,9 +7002,12 @@ function DashboardActions({
   mode,
   setMode,
   hasChanges,
-  addPanel,
-  saveChanges
+  saveChanges,
+  revertChanges
 }) {
+  const {
+    addPanel
+  } = React.useContext(DashboardActionContext);
   const {
     inLayoutMode,
     inEditMode,
@@ -6533,6 +7057,7 @@ function DashboardActions({
         color: "red",
         size: "sm",
         disabled: !hasChanges,
+        onClick: revertChanges,
         leftIcon: /* @__PURE__ */ jsx(Recycle, {
           size: 20
         }),
@@ -6588,6 +7113,11 @@ function Dashboard({
     });
     await update(d);
   };
+  const revertDashboardChanges = () => {
+    setPanels(dashboard.panels);
+    setSQLSnippets(dashboard.definition.sqlSnippets);
+    setQueries(dashboard.definition.queries);
+  };
   const addPanel = () => {
     const id = randomId();
     const newItem = {
@@ -6608,6 +7138,24 @@ function Dashboard({
     };
     setPanels((prevs) => [...prevs, newItem]);
   };
+  const duplidatePanel = (id) => {
+    try {
+      const panel = panels.find((p2) => p2.id === id);
+      if (!panel) {
+        throw new Error(`[duplicate panel] Can't find a panel by id[${id}]`);
+      }
+      const newPanel = __spreadProps(__spreadValues({}, panel), {
+        id: randomId(),
+        layout: __spreadProps(__spreadValues({}, panel.layout), {
+          x: 0,
+          y: Infinity
+        })
+      });
+      setPanels((prevs) => [...prevs, newPanel]);
+    } catch (error) {
+      console.error(error);
+    }
+  };
   const removePanelByID = (id) => {
     const index2 = panels.findIndex((p2) => p2.id === id);
     setPanels((prevs) => {
@@ -6624,34 +7172,42 @@ function Dashboard({
     queries,
     setQueries
   }), [sqlSnippets, setSQLSnippets, queries, setQueries]);
-  return /* @__PURE__ */ jsx(ContextInfoContext.Provider, {
-    value: context,
-    children: /* @__PURE__ */ jsx("div", {
-      className,
-      children: /* @__PURE__ */ jsx(DefinitionContext.Provider, {
-        value: definitions,
-        children: /* @__PURE__ */ jsxs(LayoutStateContext.Provider, {
-          value: {
-            layoutFrozen,
-            freezeLayout,
-            mode,
-            inEditMode,
-            inLayoutMode,
-            inUseMode
-          },
-          children: [/* @__PURE__ */ jsx(DashboardActions, {
-            mode,
-            setMode,
-            hasChanges,
-            addPanel,
-            saveChanges: saveDashboardChanges
-          }), /* @__PURE__ */ jsx(DashboardLayout, {
-            panels,
-            setPanels,
-            isDraggable: inLayoutMode,
-            isResizable: inLayoutMode,
-            onRemoveItem: removePanelByID
-          })]
+  return /* @__PURE__ */ jsx(ModalsProvider, {
+    children: /* @__PURE__ */ jsx(ContextInfoContext.Provider, {
+      value: context,
+      children: /* @__PURE__ */ jsx(DashboardActionContext.Provider, {
+        value: {
+          addPanel,
+          duplidatePanel,
+          removePanelByID
+        },
+        children: /* @__PURE__ */ jsx(DefinitionContext.Provider, {
+          value: definitions,
+          children: /* @__PURE__ */ jsx(LayoutStateContext.Provider, {
+            value: {
+              layoutFrozen,
+              freezeLayout,
+              mode,
+              inEditMode,
+              inLayoutMode,
+              inUseMode
+            },
+            children: /* @__PURE__ */ jsxs("div", {
+              className,
+              children: [/* @__PURE__ */ jsx(DashboardActions, {
+                mode,
+                setMode,
+                hasChanges,
+                saveChanges: saveDashboardChanges,
+                revertChanges: revertDashboardChanges
+              }), /* @__PURE__ */ jsx(DashboardLayout, {
+                panels,
+                setPanels,
+                isDraggable: inLayoutMode,
+                isResizable: inLayoutMode
+              })]
+            })
+          })
         })
       })
     })
@@ -6698,24 +7254,26 @@ function ReadOnlyDashboard({
     setQueries: () => {
     }
   }), [dashboard]);
-  return /* @__PURE__ */ jsx(ContextInfoContext.Provider, {
-    value: context,
-    children: /* @__PURE__ */ jsx("div", {
-      className,
-      children: /* @__PURE__ */ jsx(DefinitionContext.Provider, {
-        value: definition,
-        children: /* @__PURE__ */ jsx(LayoutStateContext.Provider, {
-          value: {
-            layoutFrozen: true,
-            freezeLayout: () => {
+  return /* @__PURE__ */ jsx(ModalsProvider, {
+    children: /* @__PURE__ */ jsx(ContextInfoContext.Provider, {
+      value: context,
+      children: /* @__PURE__ */ jsx("div", {
+        className,
+        children: /* @__PURE__ */ jsx(DefinitionContext.Provider, {
+          value: definition,
+          children: /* @__PURE__ */ jsx(LayoutStateContext.Provider, {
+            value: {
+              layoutFrozen: true,
+              freezeLayout: () => {
+              },
+              mode: DashboardMode.Use,
+              inEditMode: false,
+              inLayoutMode: false,
+              inUseMode: true
             },
-            mode: DashboardMode.Use,
-            inEditMode: false,
-            inLayoutMode: false,
-            inUseMode: true
-          },
-          children: /* @__PURE__ */ jsx(ReadOnlyDashboardLayout, {
-            panels: dashboard.panels
+            children: /* @__PURE__ */ jsx(ReadOnlyDashboardLayout, {
+              panels: dashboard.panels
+            })
           })
         })
       })