@devtable/dashboard 1.9.0 → 1.12.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,
@@ -682,56 +676,64 @@ const defaultOption$1 = {
     containLabel: true
   }
 };
-function VizLineBarChart({
+function VizCartesianChart({
   conf,
   data,
   width,
   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 = "top"
+        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: true,
-          position: label_position
+          show: !!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 VizLineBarChart({
         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 VizLineBarChart({
             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
             })}`;
           });
@@ -1542,7 +1558,8 @@ function renderViz(width, height, data, viz) {
     case "sunburst":
       return /* @__PURE__ */ jsx(Sunbrust, __spreadValues({}, props));
     case "line-bar":
-      return /* @__PURE__ */ jsx(VizLineBarChart, __spreadValues({}, props));
+    case "cartesian":
+      return /* @__PURE__ */ jsx(VizCartesianChart, __spreadValues({}, props));
     case "table":
       return /* @__PURE__ */ jsx(VizTable, __spreadValues({}, props));
     case "text":
@@ -1818,11 +1835,10 @@ function MantineColorSelector({
     })]
   });
 }
-const numbroFormatExample = JSON.stringify({
-  output: "percent",
-  mantissa: 2
-}, null, 2);
 const labelPositions = [{
+  label: "off",
+  value: ""
+}, {
   label: "top",
   value: "top"
 }, {
@@ -1862,74 +1878,472 @@ const labelPositions = [{
   label: "insideBottomRight",
   value: "insideBottomRight"
 }];
+function SeriesItemField({
+  control,
+  index: index2,
+  remove,
+  seriesItem,
+  yAxisOptions
+}) {
+  const type = seriesItem.type;
+  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: "column",
+      grow: true,
+      noWrap: true,
+      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
+        }
+      }, 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: [/* @__PURE__ */ jsx(Controller, {
+        name: `series.${index2}.stack`,
+        control,
+        render: ({
+          field
+        }) => /* @__PURE__ */ jsx(TextInput, __spreadValues({
+          label: "Stack",
+          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
+      }, field))
+    }), /* @__PURE__ */ jsxs(Group, {
+      direction: "column",
+      grow: true,
+      spacing: 4,
+      children: [/* @__PURE__ */ jsx(Text, {
+        size: "sm",
+        children: "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: () => 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);
 }
-function VizLineBarChartPanel({
+function VizCartesianChartPanel({
   conf,
   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",
@@ -1943,117 +2357,43 @@ function VizLineBarChartPanel({
           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__ */ jsxs(Group, {
-          direction: "column",
-          grow: true,
-          my: 0,
-          p: "md",
-          pr: 40,
-          sx: {
-            border: "1px solid #eee",
-            position: "relative"
-          },
-          children: [/* @__PURE__ */ jsxs(Group, {
-            direction: "row",
-            grow: true,
-            noWrap: true,
-            children: [/* @__PURE__ */ jsx(TextInput, __spreadValues({
-              label: "Name",
-              required: true,
-              sx: {
-                flex: 1
-              }
-            }, form.getListInputProps("series", index2, "name"))), /* @__PURE__ */ jsx(TextInput, __spreadValues({
-              label: "Stack",
-              placeholder: "Stack bars by this ID"
-            }, form.getListInputProps("series", index2, "stack"))), /* @__PURE__ */ jsx(TextInput, __spreadValues({
-              label: "Value key",
-              required: true
-            }, form.getListInputProps("series", index2, "y_axis_data_key")))]
-          }), /* @__PURE__ */ jsxs(Group, {
-            direction: "row",
-            grow: true,
-            noWrap: true,
-            align: "top",
-            children: [/* @__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")))]
-          }), /* @__PURE__ */ jsxs(Group, {
-            direction: "column",
-            grow: true,
-            children: [/* @__PURE__ */ jsx(Text, {
-              children: "Color"
-            }), /* @__PURE__ */ jsx(MantineColorSelector, __spreadValues({}, form.getListInputProps("series", index2, "color")))]
-          }), /* @__PURE__ */ jsx(ActionIcon, {
-            color: "red",
-            variant: "hover",
-            onClick: () => form.removeListItem("series", index2),
-            sx: {
-              position: "absolute",
-              top: 15,
-              right: 5
-            },
-            children: /* @__PURE__ */ jsx(Trash, {
-              size: 16
-            })
-          })]
-        }, 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
       })]
     })
   });
@@ -2953,9 +3293,9 @@ const types = [{
   label: "Bar Chart (3D)",
   Panel: VizBar3DPanel
 }, {
-  value: "line-bar",
-  label: "Line-Bar Chart",
-  Panel: VizLineBarChartPanel
+  value: "cartesian",
+  label: "Cartesian Chart",
+  Panel: VizCartesianChartPanel
 }, {
   value: "pie",
   label: "Pie Chart",
@@ -4058,9 +4398,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