@devtable/dashboard 1.11.0 → 1.14.0

package/dist/dashboard.es.js

@@ -36,7 +36,7 @@ var __publicField = (obj, key, value) => {
 import React from "react";
 import _ from "lodash";
 import { WidthProvider, Responsive } from "react-grid-layout";
-import { Popover, Tooltip, Group, Text, ActionIcon, TextInput, Box, LoadingOverlay, Table, Select, Button, useMantineTheme, ColorSwatch, JsonInput, Anchor, Slider, ColorInput, Accordion, Switch, Modal, AppShell, Tabs, Menu, Divider, Container, SegmentedControl, Textarea } from "@mantine/core";
+import { Popover, Tooltip, Group, Text, ActionIcon, TextInput, Box, LoadingOverlay, Table, Select, Button, useMantineTheme, ColorSwatch, SegmentedControl, NumberInput, Switch, Slider, ColorInput, Accordion, JsonInput, Modal, AppShell, Tabs, Menu, Divider, Container, Textarea } from "@mantine/core";
 import { useRequest } from "ahooks";
 import axios from "axios";
 import { InfoCircle, DeviceFloppy, Refresh, Trash, PlaylistAdd, Settings, Resize, Paint, PlayerPlay, ClipboardText, Database, Recycle, Share } from "tabler-icons-react";
@@ -49,8 +49,8 @@ import { CanvasRenderer } from "echarts/renderers";
 import { GridComponent, LegendComponent, TooltipComponent, VisualMapComponent } from "echarts/components";
 import numbro from "numbro";
 import "echarts-gl";
-import { useForm, Controller } from "react-hook-form";
-import { formList, useForm as useForm$1 } from "@mantine/form";
+import { useForm, Controller, useFieldArray } from "react-hook-form";
+import { useForm as useForm$1, formList } from "@mantine/form";
 import { Prism } from "@mantine/prism";
 var DashboardMode = /* @__PURE__ */ ((DashboardMode2) => {
   DashboardMode2["Use"] = "use";
@@ -668,12 +668,6 @@ const defaultOption$1 = {
       fontWeight: "bold"
     }
   },
-  yAxis: {
-    nameTextStyle: {
-      fontWeight: "bolder",
-      align: "left"
-    }
-  },
   grid: {
     top: 30,
     left: 15,
@@ -689,49 +683,57 @@ function VizCartesianChart({
   height
 }) {
   const option = React.useMemo(() => {
-    var _c, _d;
-    const valueFormatters = conf.series.reduce((ret, {
-      name,
-      y_axis_data_formatter
-    }) => {
-      ret[name] = function formatter({
-        value
-      }) {
-        if (!y_axis_data_formatter) {
+    var _c;
+    const labelFormatters = conf.y_axes.reduce((ret, {
+      label_formatter
+    }, index2) => {
+      ret[index2] = function formatter(payload) {
+        const value = typeof payload === "object" ? payload.value : payload;
+        if (!label_formatter) {
           return value;
         }
         try {
-          return numbro(value).format(JSON.parse(y_axis_data_formatter));
+          return numbro(value).format(label_formatter);
         } catch (error) {
           console.error(error);
           return value;
         }
       };
       return ret;
+    }, {
+      default: ({
+        value
+      }) => value
+    });
+    const yAxisIndexMap = conf.series.reduce((ret, {
+      yAxisIndex,
+      name
+    }) => {
+      ret[name] = yAxisIndex;
+      return ret;
     }, {});
     const series = conf.series.map((_a) => {
       var _b = _a, {
         y_axis_data_key,
-        y_axis_data_formatter,
-        name,
-        label_position
+        yAxisIndex,
+        label_position,
+        name
       } = _b, rest = __objRest(_b, [
         "y_axis_data_key",
-        "y_axis_data_formatter",
-        "name",
-        "label_position"
+        "yAxisIndex",
+        "label_position",
+        "name"
       ]);
       const ret = __spreadValues({
         data: data.map((d) => d[y_axis_data_key]),
         label: {
           show: !!label_position,
-          position: label_position
+          position: label_position,
+          formatter: labelFormatters[yAxisIndex != null ? yAxisIndex : "default"]
         },
-        name
+        name,
+        yAxisIndex
       }, rest);
-      if (y_axis_data_formatter) {
-        ret.label.formatter = valueFormatters[name];
-      }
       return ret;
     });
     const customOptions = {
@@ -739,9 +741,20 @@ function VizCartesianChart({
         data: data.map((d) => d[conf.x_axis_data_key]),
         name: (_c = conf.x_axis_name) != null ? _c : ""
       },
-      yAxis: {
-        name: (_d = conf.y_axis_name) != null ? _d : ""
-      },
+      yAxis: conf.y_axes.map((_d, index2) => {
+        var _e = _d, {
+          label_formatter
+        } = _e, rest = __objRest(_e, [
+          "label_formatter"
+        ]);
+        var _a;
+        return __spreadProps(__spreadValues({}, rest), {
+          axisLabel: {
+            show: true,
+            formatter: (_a = labelFormatters[index2]) != null ? _a : labelFormatters.default
+          }
+        });
+      }),
       dataset: {
         source: data
       },
@@ -756,10 +769,13 @@ function VizCartesianChart({
             seriesName,
             value
           }) => {
+            var _a;
             if (!seriesName) {
               return value;
             }
-            return `${seriesName}: ${valueFormatters[seriesName]({
+            const yAxisIndex = yAxisIndexMap[seriesName];
+            const formatter = (_a = labelFormatters[yAxisIndex]) != null ? _a : labelFormatters.default;
+            return `${seriesName}: ${formatter({
               value
             })}`;
           });
@@ -911,7 +927,7 @@ function VizTable({
               type: value_type
             })
           })
-        }, row[value_field]))
+        }, `${value_field}--${row[value_field]}`))
       }, id_field ? row[id_field] : `row-${index2}`))
     }), data.length > 100 && /* @__PURE__ */ jsx("tfoot", {
       children: /* @__PURE__ */ jsx("tr", {
@@ -927,7 +943,7 @@ function VizTable({
     })]
   }));
 }
-function interpolateString$1(template, params = {}) {
+function interpolateString(template, params = {}) {
   const extendedParams = __spreadProps(__spreadValues({}, params), {
     numbro
   });
@@ -958,7 +974,7 @@ function VizText({
         sx: {
           fontSize: size
         },
-        children: interpolateString$1(template, data[0])
+        children: interpolateString(template, data[0])
       }), `${template}---${index2}`);
     })
   });
@@ -1483,18 +1499,6 @@ class InterpolateColor {
     return this.mapper(value);
   }
 }
-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 getColorByColorConf(conf, dataRow) {
   if (conf.type === "static") {
     return conf.staticColor;
@@ -1510,11 +1514,11 @@ function VizStats(_a) {
   var _b = _a, {
     conf: _c
   } = _b, _d = _c, {
-    template,
+    content,
     size,
     color: color2
   } = _d, rest = __objRest(_d, [
-    "template",
+    "content",
     "size",
     "color"
   ]), {
@@ -1523,12 +1527,24 @@ function VizStats(_a) {
   const finalColor = React.useMemo(() => {
     return getColorByColorConf(color2, data[0]);
   }, [color2, data]);
+  const finalContent = React.useMemo(() => {
+    var _a2;
+    const {
+      prefix,
+      postfix,
+      data_field,
+      formatter
+    } = content;
+    const contentData = (_a2 = data == null ? void 0 : data[0]) == null ? void 0 : _a2[data_field];
+    const contents = [prefix, numbro(contentData).format(formatter), postfix];
+    return contents.join(" ");
+  }, [content, data]);
   return /* @__PURE__ */ jsx(Text, __spreadProps(__spreadValues({}, rest), {
     color: finalColor,
     sx: {
       fontSize: size
     },
-    children: interpolateString(template, data[0])
+    children: finalContent
   }));
 }
 function renderViz(width, height, data, viz) {
@@ -1819,10 +1835,6 @@ function MantineColorSelector({
     })]
   });
 }
-const numbroFormatExample = JSON.stringify({
-  output: "percent",
-  mantissa: 2
-}, null, 2);
 const labelPositions = [{
   label: "off",
   value: ""
@@ -1867,13 +1879,13 @@ const labelPositions = [{
   value: "insideBottomRight"
 }];
 function SeriesItemField({
-  form,
-  index: index2
+  control,
+  index: index2,
+  remove,
+  seriesItem,
+  yAxisOptions
 }) {
-  const value = form.values.series[index2];
-  const {
-    type
-  } = value;
+  const type = seriesItem.type;
   return /* @__PURE__ */ jsxs(Group, {
     direction: "column",
     grow: true,
@@ -1884,108 +1896,400 @@ function SeriesItemField({
       border: "1px solid #eee",
       position: "relative"
     },
-    children: [/* @__PURE__ */ jsxs(Group, {
-      direction: "row",
+    children: [/* @__PURE__ */ jsx(Group, {
+      direction: "column",
       grow: true,
       noWrap: true,
-      children: [/* @__PURE__ */ jsx(Select, __spreadValues({
-        label: "Type",
-        data: [{
-          label: "Line",
-          value: "line"
-        }, {
-          label: "Bar",
-          value: "bar"
-        }, {
-          label: "Scatter",
-          value: "scatter",
-          disabled: true
-        }]
-      }, form.getListInputProps("series", index2, "type"))), /* @__PURE__ */ jsx(TextInput, __spreadValues({
+      children: /* @__PURE__ */ jsx(Controller, {
+        name: `series.${index2}.type`,
+        control,
+        render: ({
+          field
+        }) => /* @__PURE__ */ jsx(SegmentedControl, __spreadValues({
+          data: [{
+            label: "Line",
+            value: "line"
+          }, {
+            label: "Bar",
+            value: "bar"
+          }, {
+            label: "Scatter",
+            value: "scatter",
+            disabled: true
+          }, {
+            label: "Boxplot",
+            value: "boxplot",
+            disabled: true
+          }]
+        }, field))
+      })
+    }), /* @__PURE__ */ jsx(Controller, {
+      name: `series.${index2}.name`,
+      control,
+      render: ({
+        field
+      }) => /* @__PURE__ */ jsx(TextInput, __spreadValues({
         label: "Name",
         required: true,
         sx: {
           flex: 1
         }
-      }, form.getListInputProps("series", index2, "name"))), /* @__PURE__ */ jsx(TextInput, __spreadValues({
-        label: "Value key",
-        required: true
-      }, form.getListInputProps("series", index2, "y_axis_data_key")))]
+      }, field))
     }), /* @__PURE__ */ jsxs(Group, {
       direction: "row",
       grow: true,
       noWrap: true,
+      children: [/* @__PURE__ */ jsx(Controller, {
+        name: `series.${index2}.y_axis_data_key`,
+        control,
+        render: ({
+          field
+        }) => /* @__PURE__ */ jsx(TextInput, __spreadValues({
+          label: "Value key",
+          required: true,
+          sx: {
+            flex: 1
+          }
+        }, field))
+      }), /* @__PURE__ */ jsx(Controller, {
+        name: `series.${index2}.yAxisIndex`,
+        control,
+        render: (_a) => {
+          var {
+            field: _b
+          } = _a, _c = _b, {
+            value,
+            onChange
+          } = _c, rest = __objRest(_c, [
+            "value",
+            "onChange"
+          ]);
+          var _a2;
+          return /* @__PURE__ */ jsx(Select, __spreadProps(__spreadValues({
+            label: "Y Axis",
+            data: yAxisOptions,
+            disabled: yAxisOptions.length === 0
+          }, rest), {
+            value: (_a2 = value == null ? void 0 : value.toString()) != null ? _a2 : "",
+            onChange: (value2) => {
+              if (!value2) {
+                onChange(0);
+                return;
+              }
+              onChange(Number(value2));
+            },
+            sx: {
+              flex: 1
+            }
+          }));
+        }
+      })]
+    }), type === "bar" && /* @__PURE__ */ jsxs(Group, {
+      direction: "row",
+      grow: true,
       align: "top",
-      children: [type === "bar" && /* @__PURE__ */ jsx(Fragment, {
-        children: /* @__PURE__ */ jsx(TextInput, __spreadValues({
+      children: [/* @__PURE__ */ jsx(Controller, {
+        name: `series.${index2}.stack`,
+        control,
+        render: ({
+          field
+        }) => /* @__PURE__ */ jsx(TextInput, __spreadValues({
           label: "Stack",
-          placeholder: "Stack bars by this ID"
-        }, form.getListInputProps("series", index2, "stack")))
-      }), /* @__PURE__ */ jsx(Select, __spreadValues({
+          placeholder: "Stack bars by this ID",
+          sx: {
+            flexGrow: 1
+          }
+        }, field))
+      }), /* @__PURE__ */ jsx(Controller, {
+        name: `series.${index2}.barWidth`,
+        control,
+        render: ({
+          field
+        }) => /* @__PURE__ */ jsx(TextInput, __spreadValues({
+          label: "Bar Width",
+          sx: {
+            flexGrow: 1
+          }
+        }, field))
+      })]
+    }), /* @__PURE__ */ jsx(Controller, {
+      name: `series.${index2}.label_position`,
+      control,
+      render: ({
+        field
+      }) => /* @__PURE__ */ jsx(Select, __spreadValues({
         label: "Label Position",
         data: labelPositions
-      }, form.getListInputProps("series", index2, "label_position"))), /* @__PURE__ */ jsx(JsonInput, __spreadValues({
-        sx: {
-          label: {
-            width: "100%"
-          }
-        },
-        label: /* @__PURE__ */ jsxs(Group, {
-          position: "apart",
-          children: [/* @__PURE__ */ jsx(Text, {
-            children: "Value Formatter"
-          }), /* @__PURE__ */ jsx(Anchor, {
-            href: "https://numbrojs.com/format.html",
-            target: "_blank",
-            children: "Formats"
-          })]
-        }),
-        placeholder: numbroFormatExample,
-        minRows: 4,
-        maxRows: 12,
-        autosize: true
-      }, form.getListInputProps("series", index2, "y_axis_data_formatter")))]
+      }, field))
     }), /* @__PURE__ */ jsxs(Group, {
       direction: "column",
       grow: true,
+      spacing: 4,
       children: [/* @__PURE__ */ jsx(Text, {
+        size: "sm",
         children: "Color"
-      }), /* @__PURE__ */ jsx(MantineColorSelector, __spreadValues({}, form.getListInputProps("series", index2, "color")))]
+      }), /* @__PURE__ */ jsx(Controller, {
+        name: `series.${index2}.color`,
+        control,
+        render: ({
+          field
+        }) => /* @__PURE__ */ jsx(MantineColorSelector, __spreadValues({}, 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 SeriesField({
+  control,
+  watch,
+  getValues
+}) {
+  const {
+    fields,
+    append,
+    remove
+  } = useFieldArray({
+    control,
+    name: "series"
+  });
+  const watchFieldArray = watch("y_axes");
+  const controlledFields = fields.map((field, index2) => {
+    return __spreadValues(__spreadValues({}, field), watchFieldArray[index2]);
+  });
+  const addSeries = () => append({
+    type: "bar",
+    name: randomId(),
+    showSymbol: false,
+    y_axis_data_key: "value",
+    yAxisIndex: 0,
+    label_position: "top",
+    stack: "",
+    color: "#000"
+  });
+  const yAxisOptions = React.useMemo(() => {
+    return getValues().y_axes.map(({
+      name
+    }, index2) => ({
+      label: name,
+      value: index2.toString()
+    }));
+  }, [getValues]);
+  return /* @__PURE__ */ jsxs(Group, {
+    direction: "column",
+    grow: true,
+    children: [/* @__PURE__ */ jsx(Text, {
+      mt: "xl",
+      mb: 0,
+      children: "Series"
+    }), controlledFields.map((seriesItem, index2) => /* @__PURE__ */ jsx(SeriesItemField, {
+      control,
+      index: index2,
+      remove,
+      seriesItem,
+      yAxisOptions
+    })), /* @__PURE__ */ jsx(Group, {
+      position: "center",
+      mt: "xs",
+      children: /* @__PURE__ */ jsx(Button, {
+        onClick: addSeries,
+        children: "Add a Series"
+      })
+    })]
+  });
+}
+const defaultNumbroFormat = {
+  mantissa: 0,
+  output: "number"
+};
+function NumbroFormatSelector({
+  value,
+  onChange
+}) {
+  const changeOutput = (output) => {
+    onChange(__spreadProps(__spreadValues({}, value), {
+      output
+    }));
+  };
+  const changeMantissa = (mantissa) => {
+    const trimMantissa = mantissa === 0 ? false : value.trimMantissa;
+    onChange(__spreadProps(__spreadValues({}, value), {
+      mantissa,
+      trimMantissa
+    }));
+  };
+  const changeTrimMantissa = (event) => {
+    onChange(__spreadProps(__spreadValues({}, value), {
+      trimMantissa: event.currentTarget.checked
+    }));
+  };
+  return /* @__PURE__ */ jsx(Group, {
+    direction: "column",
+    grow: true,
+    noWrap: true,
+    children: /* @__PURE__ */ jsxs(Group, {
+      direction: "row",
+      grow: true,
+      children: [/* @__PURE__ */ jsx(Select, {
+        label: "Format",
+        data: [{
+          label: "1234",
+          value: "number"
+        }, {
+          label: "99%",
+          value: "percent"
+        }],
+        value: value.output,
+        onChange: changeOutput
+      }), /* @__PURE__ */ jsx(NumberInput, {
+        label: "Mantissa",
+        defaultValue: 0,
+        min: 0,
+        step: 1,
+        max: 4,
+        value: value.mantissa,
+        onChange: changeMantissa
+      }), /* @__PURE__ */ jsx(Switch, {
+        label: "Trim mantissa",
+        checked: value.trimMantissa,
+        onChange: changeTrimMantissa,
+        disabled: value.mantissa === 0
+      })]
+    })
+  });
+}
+function YAxisField({
+  control,
+  index: index2,
+  remove
+}) {
+  return /* @__PURE__ */ jsxs(Group, {
+    direction: "column",
+    grow: true,
+    my: 0,
+    p: "md",
+    pr: 40,
+    sx: {
+      border: "1px solid #eee",
+      position: "relative"
+    },
+    children: [/* @__PURE__ */ jsx(Group, {
+      direction: "row",
+      grow: true,
+      noWrap: true,
+      children: /* @__PURE__ */ jsx(Controller, {
+        name: `y_axes.${index2}.name`,
+        control,
+        render: ({
+          field
+        }) => /* @__PURE__ */ jsx(TextInput, __spreadValues({
+          label: "Name",
+          required: true,
+          sx: {
+            flex: 1
+          }
+        }, field))
+      })
+    }), /* @__PURE__ */ jsx(Group, {
+      direction: "column",
+      grow: true,
+      noWrap: true,
+      children: /* @__PURE__ */ jsx(Controller, {
+        name: `y_axes.${index2}.label_formatter`,
+        control,
+        render: ({
+          field
+        }) => /* @__PURE__ */ jsx(NumbroFormatSelector, __spreadValues({}, field))
+      })
     }), /* @__PURE__ */ jsx(ActionIcon, {
       color: "red",
       variant: "hover",
-      onClick: () => form.removeListItem("series", index2),
+      onClick: () => remove(index2),
       sx: {
         position: "absolute",
         top: 15,
         right: 5
       },
+      disabled: index2 === 0,
       children: /* @__PURE__ */ jsx(Trash, {
         size: 16
       })
     })]
   }, index2);
 }
+function YAxesField({
+  control,
+  watch
+}) {
+  const {
+    fields,
+    append,
+    remove
+  } = useFieldArray({
+    control,
+    name: "y_axes"
+  });
+  const watchFieldArray = watch("y_axes");
+  const controlledFields = fields.map((field, index2) => {
+    return __spreadValues(__spreadValues({}, field), watchFieldArray[index2]);
+  });
+  const addYAxis = () => append({
+    name: "",
+    label_formatter: defaultNumbroFormat
+  });
+  return /* @__PURE__ */ jsxs(Group, {
+    direction: "column",
+    grow: true,
+    children: [/* @__PURE__ */ jsx(Text, {
+      mt: "xl",
+      mb: 0,
+      children: "Y Axes"
+    }), controlledFields.map((field, index2) => /* @__PURE__ */ jsx(YAxisField, {
+      control,
+      index: index2,
+      remove
+    })), /* @__PURE__ */ jsx(Group, {
+      position: "center",
+      mt: "xs",
+      children: /* @__PURE__ */ jsx(Button, {
+        onClick: addYAxis,
+        children: "Add a Y Axis"
+      })
+    })]
+  });
+}
 function withDefaults(series) {
   function setDefaults({
     type,
     name,
     showSymbol,
     y_axis_data_key = "value",
-    y_axis_data_formatter = "",
+    yAxisIndex = 0,
     label_position = "top",
     stack = "1",
-    color: color2 = "black"
+    color: color2 = "black",
+    barWidth = "30"
   }) {
     return {
       type,
       name,
       showSymbol,
       y_axis_data_key,
-      y_axis_data_formatter,
+      yAxisIndex,
       label_position,
       stack,
-      color: color2
+      color: color2,
+      barWidth
     };
   }
   return series.map(setDefaults);
@@ -1995,45 +2299,51 @@ function VizCartesianChartPanel({
   setConf
 }) {
   const _a = conf, {
-    series
+    series,
+    y_axes
   } = _a, restConf = __objRest(_a, [
-    "series"
+    "series",
+    "y_axes"
   ]);
-  const initialValues = React.useMemo(() => {
+  const defaultValues = React.useMemo(() => {
     const _a2 = restConf, {
-      x_axis_name = "",
-      y_axis_name = ""
+      x_axis_name = ""
     } = _a2, rest = __objRest(_a2, [
-      "x_axis_name",
-      "y_axis_name"
+      "x_axis_name"
     ]);
     return __spreadValues({
-      series: formList(withDefaults(series != null ? series : [])),
+      series: withDefaults(series != null ? series : []),
       x_axis_name,
-      y_axis_name
+      y_axes: y_axes != null ? y_axes : [{
+        name: "Y Axis",
+        label_formatter: defaultNumbroFormat
+      }]
     }, rest);
   }, [series, restConf]);
-  const form = useForm$1({
-    initialValues
-  });
-  const addSeries = () => form.addListItem("series", {
-    type: "bar",
-    name: randomId(),
-    showSymbol: false,
-    y_axis_data_key: "value",
-    y_axis_data_formatter: "",
-    label_position: "top",
-    stack: "",
-    color: "#000"
+  React.useEffect(() => {
+    const configMalformed = !_.isEqual(conf, defaultValues);
+    if (configMalformed) {
+      setConf(defaultValues);
+    }
+  }, [conf, defaultValues]);
+  const {
+    control,
+    handleSubmit,
+    watch,
+    formState: {
+      isDirty
+    },
+    getValues
+  } = useForm({
+    defaultValues
   });
-  const changed = React.useMemo(() => !_.isEqual(form.values, initialValues), [form.values, initialValues]);
   return /* @__PURE__ */ jsx(Group, {
     direction: "column",
     mt: "md",
     spacing: "xs",
     grow: true,
     children: /* @__PURE__ */ jsxs("form", {
-      onSubmit: form.onSubmit(setConf),
+      onSubmit: handleSubmit(setConf),
       children: [/* @__PURE__ */ jsxs(Group, {
         position: "apart",
         mb: "lg",
@@ -2047,45 +2357,43 @@ function VizCartesianChartPanel({
           mr: 5,
           variant: "filled",
           color: "blue",
-          disabled: !changed,
+          disabled: !isDirty,
           children: /* @__PURE__ */ jsx(DeviceFloppy, {
             size: 20
           })
         })]
-      }), /* @__PURE__ */ jsx(TextInput, __spreadValues({
-        size: "md",
-        mb: "lg",
-        label: "X Axis Data Key"
-      }, form.getInputProps("x_axis_data_key"))), /* @__PURE__ */ jsxs(Group, {
+      }), /* @__PURE__ */ jsx(Controller, {
+        name: "x_axis_data_key",
+        control,
+        render: ({
+          field
+        }) => /* @__PURE__ */ jsx(TextInput, __spreadValues({
+          size: "md",
+          mb: "lg",
+          label: "X Axis Data Key"
+        }, field))
+      }), /* @__PURE__ */ jsx(Group, {
         direction: "column",
         grow: true,
         noWrap: true,
         mb: "lg",
-        children: [/* @__PURE__ */ jsx(TextInput, __spreadValues({
-          size: "md",
-          label: "X Axis Name"
-        }, form.getInputProps("x_axis_name"))), /* @__PURE__ */ jsx(TextInput, __spreadValues({
-          size: "md",
-          label: "Y Axis Name"
-        }, form.getInputProps("y_axis_name")))]
-      }), /* @__PURE__ */ jsxs(Group, {
-        direction: "column",
-        grow: true,
-        children: [/* @__PURE__ */ jsx(Text, {
-          mt: "xl",
-          mb: 0,
-          children: "Series"
-        }), form.values.series.map((_item, index2) => /* @__PURE__ */ jsx(SeriesItemField, {
-          form,
-          index: index2
-        })), /* @__PURE__ */ jsx(Group, {
-          position: "center",
-          mt: "xs",
-          children: /* @__PURE__ */ jsx(Button, {
-            onClick: addSeries,
-            children: "Add a Series"
-          })
-        })]
+        children: /* @__PURE__ */ jsx(Controller, {
+          name: "x_axis_name",
+          control,
+          render: ({
+            field
+          }) => /* @__PURE__ */ jsx(TextInput, __spreadValues({
+            size: "md",
+            label: "X Axis Name"
+          }, field))
+        })
+      }), /* @__PURE__ */ jsx(YAxesField, {
+        control,
+        watch
+      }), /* @__PURE__ */ jsx(SeriesField, {
+        control,
+        watch,
+        getValues
       })]
     })
   });
@@ -2347,11 +2655,19 @@ function VizStatsPanel({
   const defaultValues = _.merge({}, {
     align: "center",
     size: "100px",
-    template: "",
     weight: "bold",
     color: {
       type: "static",
       staticColor: "red"
+    },
+    content: {
+      prefix: "",
+      data_field: "",
+      formatter: {
+        output: "number",
+        mantissa: 0
+      },
+      postfix: ""
     }
   }, conf);
   const {
@@ -2404,23 +2720,54 @@ function VizStatsPanel({
         },
         children: [/* @__PURE__ */ jsx(Accordion.Item, {
           label: "Content",
-          children: /* @__PURE__ */ jsx(Group, {
+          children: /* @__PURE__ */ jsxs(Group, {
             direction: "column",
             grow: true,
-            children: /* @__PURE__ */ jsx(Controller, {
-              name: "template",
+            children: [/* @__PURE__ */ jsxs(Group, {
+              direction: "row",
+              grow: true,
+              children: [/* @__PURE__ */ jsx(Controller, {
+                name: "content.prefix",
+                control,
+                render: ({
+                  field
+                }) => /* @__PURE__ */ jsx(TextInput, __spreadValues({
+                  label: "Prefix",
+                  sx: {
+                    flexGrow: 1
+                  }
+                }, field))
+              }), /* @__PURE__ */ jsx(Controller, {
+                name: "content.data_field",
+                control,
+                render: ({
+                  field
+                }) => /* @__PURE__ */ jsx(TextInput, __spreadValues({
+                  label: "Data Field",
+                  required: true,
+                  sx: {
+                    flexGrow: 1
+                  }
+                }, field))
+              }), /* @__PURE__ */ jsx(Controller, {
+                name: "content.postfix",
+                control,
+                render: ({
+                  field
+                }) => /* @__PURE__ */ jsx(TextInput, __spreadValues({
+                  label: "Postfix",
+                  sx: {
+                    flexGrow: 1
+                  }
+                }, field))
+              })]
+            }), /* @__PURE__ */ jsx(Controller, {
+              name: "content.formatter",
               control,
               render: ({
                 field
-              }) => /* @__PURE__ */ jsx(TextInput, __spreadValues({
-                placeholder: "Time: ${new Date().toISOString()}",
-                label: "Content Template",
-                required: true,
-                sx: {
-                  flex: 1
-                }
-              }, field))
-            })
+              }) => /* @__PURE__ */ jsx(NumbroFormatSelector, __spreadValues({}, field))
+            })]
           })
         }), /* @__PURE__ */ jsxs(Accordion.Item, {
           label: "Font",
@@ -4006,7 +4353,7 @@ function DashboardActions({
       })
     }), /* @__PURE__ */ jsxs(Group, {
       position: "right",
-      children: [inLayoutMode && /* @__PURE__ */ jsx(Button, {
+      children: [!inUseMode && /* @__PURE__ */ jsx(Button, {
         variant: "default",
         size: "sm",
         onClick: addPanel,
@@ -4090,9 +4437,8 @@ function Dashboard({
     return !_.isEqual(dataSources, dashboard.definition.dataSources);
   }, [dashboard, panels, sqlSnippets, dataSources]);
   const saveDashboardChanges = async () => {
-    const d = _.merge({}, dashboard, {
-      panels
-    }, {
+    const d = __spreadProps(__spreadValues({}, dashboard), {
+      panels,
       definition: {
         sqlSnippets,
         dataSources
@@ -4108,13 +4454,13 @@ function Dashboard({
         x: 0,
         y: Infinity,
         w: 3,
-        h: 4
+        h: 15
       },
       title: `New Panel - ${id}`,
-      description: "description goes here",
+      description: "",
       dataSourceID: "",
       viz: {
-        type: "table",
+        type: "text",
         conf: {}
       }
     };