@sis-cc/dotstatsuite-visions 12.55.0 → 13.0.0

package/dist/Button/Button.js

@@ -0,0 +1,50 @@
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import * as R from 'ramda';
+import cx from 'classnames';
+import Button$1 from '@mui/material/Button';
+import makeStyles from '@mui/styles/makeStyles';
+
+const useStyles = makeStyles((theme) => {
+  const color1 = R.path(["palette", "highlight", "hl1"], theme) || theme.palette.primary.dark;
+  return {
+    defaultSelected: {
+      backgroundColor: theme.palette.action.hover,
+      "&:hover": {
+        backgroundColor: `${theme.palette.action.selected} !important`
+      }
+    },
+    sisccRoot: {
+      "&:hover": {
+        color: theme.palette.getContrastText(color1),
+        backgroundColor: R.path(["palette", "highlight", "hl1"], theme) || theme.palette.primary.dark,
+        ...R.path(["mixins", "toggleButton", "hover"])(theme)
+      }
+    },
+    sisccSelected: {
+      color: theme.palette.getContrastText(color1),
+      backgroundColor: color1,
+      ...R.path(["mixins", "toggleButton", "selected"])(theme)
+    }
+  };
+});
+const Button = React.forwardRef(
+  function Button2({ className, selected, alternative = "default", ...props }, ref) {
+    const classes = useStyles();
+    return /* @__PURE__ */ jsx(
+      Button$1,
+      {
+        className: cx(className, R.prop(`${alternative}Root`)(classes), {
+          [R.prop(`${alternative}Selected`)(classes)]: selected
+        }),
+        "aria-pressed": selected,
+        ref,
+        ...R.omit(["indicator", "textColor", "selectionFollowsFocus"], props),
+        children: props.children
+      }
+    );
+  }
+);
+
+export { Button };
+//# sourceMappingURL=Button.js.map

package/dist/Button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sources":["../../src/Button/Button.jsx"],"sourcesContent":["import React from 'react';\nimport * as R from 'ramda';\nimport cx from 'classnames';\nimport MuiButton from '@mui/material/Button';\nimport makeStyles from '@mui/styles/makeStyles';\n\nconst useStyles = makeStyles(theme => {\n  const color1 = R.path(['palette', 'highlight', 'hl1'], theme) || theme.palette.primary.dark;\n\n  return {\n    defaultSelected: {\n      backgroundColor: theme.palette.action.hover,\n      '&:hover': {\n        backgroundColor: `${theme.palette.action.selected} !important`,\n      },\n    },\n    sisccRoot: {\n      '&:hover': {\n        color: theme.palette.getContrastText(color1),\n        backgroundColor:\n          R.path(['palette', 'highlight', 'hl1'], theme) || theme.palette.primary.dark,\n        ...R.path(['mixins', 'toggleButton', 'hover'])(theme),\n      },\n    },\n    sisccSelected: {\n      color: theme.palette.getContrastText(color1),\n      backgroundColor: color1,\n      ...R.path(['mixins', 'toggleButton', 'selected'])(theme),\n    },\n  };\n});\n\nexport const Button = React.forwardRef(\n  function Button({ className, selected, alternative = 'default', ...props }, ref) {\n    const classes = useStyles();\n    return (\n      <MuiButton\n        className={cx(className, R.prop(`${alternative}Root`)(classes), {\n          [R.prop(`${alternative}Selected`)(classes)]: selected,\n        })}\n        aria-pressed={selected}\n        ref={ref}\n        {...R.omit(['indicator', 'textColor', 'selectionFollowsFocus'], props)}\n      >\n        {props.children}\n      </MuiButton>\n    );\n  },\n);\n"],"names":["Button","MuiButton"],"mappings":";;;;;;;AAMA,MAAM,SAAA,GAAY,WAAW,CAAA,KAAA,KAAS;AACpC,EAAA,MAAM,MAAA,GAAS,CAAA,CAAE,IAAA,CAAK,CAAC,SAAA,EAAW,WAAA,EAAa,KAAK,CAAA,EAAG,KAAK,CAAA,IAAK,KAAA,CAAM,OAAA,CAAQ,OAAA,CAAQ,IAAA;AAEvF,EAAA,OAAO;AAAA,IACL,eAAA,EAAiB;AAAA,MACf,eAAA,EAAiB,KAAA,CAAM,OAAA,CAAQ,MAAA,CAAO,KAAA;AAAA,MACtC,SAAA,EAAW;AAAA,QACT,eAAA,EAAiB,CAAA,EAAG,KAAA,CAAM,OAAA,CAAQ,OAAO,QAAQ,CAAA,WAAA;AAAA;AACnD,KACF;AAAA,IACA,SAAA,EAAW;AAAA,MACT,SAAA,EAAW;AAAA,QACT,KAAA,EAAO,KAAA,CAAM,OAAA,CAAQ,eAAA,CAAgB,MAAM,CAAA;AAAA,QAC3C,eAAA,EACE,CAAA,CAAE,IAAA,CAAK,CAAC,SAAA,EAAW,WAAA,EAAa,KAAK,CAAA,EAAG,KAAK,CAAA,IAAK,KAAA,CAAM,OAAA,CAAQ,OAAA,CAAQ,IAAA;AAAA,QAC1E,GAAG,EAAE,IAAA,CAAK,CAAC,UAAU,cAAA,EAAgB,OAAO,CAAC,CAAA,CAAE,KAAK;AAAA;AACtD,KACF;AAAA,IACA,aAAA,EAAe;AAAA,MACb,KAAA,EAAO,KAAA,CAAM,OAAA,CAAQ,eAAA,CAAgB,MAAM,CAAA;AAAA,MAC3C,eAAA,EAAiB,MAAA;AAAA,MACjB,GAAG,EAAE,IAAA,CAAK,CAAC,UAAU,cAAA,EAAgB,UAAU,CAAC,CAAA,CAAE,KAAK;AAAA;AACzD,GACF;AACF,CAAC,CAAA;AAEM,MAAM,SAAS,KAAA,CAAM,UAAA;AAAA,EAC1B,SAASA,OAAAA,CAAO,EAAE,SAAA,EAAW,QAAA,EAAU,cAAc,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,GAAA,EAAK;AAC/E,IAAA,MAAM,UAAU,SAAA,EAAU;AAC1B,IAAA,uBACE,GAAA;AAAA,MAACC,QAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,EAAA,CAAG,SAAA,EAAW,CAAA,CAAE,IAAA,CAAK,GAAG,WAAW,CAAA,IAAA,CAAM,CAAA,CAAE,OAAO,CAAA,EAAG;AAAA,UAC9D,CAAC,EAAE,IAAA,CAAK,CAAA,EAAG,WAAW,CAAA,QAAA,CAAU,CAAA,CAAE,OAAO,CAAC,GAAG;AAAA,SAC9C,CAAA;AAAA,QACD,cAAA,EAAc,QAAA;AAAA,QACd,GAAA;AAAA,QACC,GAAG,EAAE,IAAA,CAAK,CAAC,aAAa,WAAA,EAAa,uBAAuB,GAAG,KAAK,CAAA;AAAA,QAEpE,QAAA,EAAA,KAAA,CAAM;AAAA;AAAA,KACT;AAAA,EAEJ;AACF;;;;"}

package/dist/ChartsConfig/ChartsConfig.js

@@ -0,0 +1,507 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useMemo, useState, useEffect } from 'react';
+import * as R from 'ramda';
+import Grid from '@mui/material/Grid';
+import { RotateLeft, ArrowForward, ArrowUpward } from '@mui/icons-material';
+import PropTypes from 'prop-types';
+import makeStyles from '@mui/styles/makeStyles';
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
+import InputAdornment from '@mui/material/InputAdornment';
+import { Select } from '../Select/Select.js';
+import TextField from '@mui/material/TextField';
+import IconButton from '@mui/material/IconButton';
+import Checkbox from '@mui/material/Checkbox';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import { w as withBlank } from '../chunks/utils-kslX1mzh.js';
+
+const useStyles$4 = makeStyles((theme) => ({
+  title: R.pathOr({}, ["mixins", "chartsConfig", "title"], theme)
+}));
+const Title = ({ icon, label }) => {
+  const classes = useStyles$4();
+  return /* @__PURE__ */ jsxs(Grid, { container: true, children: [
+    !R.isNil(icon) && icon,
+    /* @__PURE__ */ jsx(Typography, { className: classes.title, inline: "true", children: label })
+  ] });
+};
+Title.propTypes = {
+  label: PropTypes.string,
+  icon: PropTypes.node
+};
+
+const hasUniqUnlabelledOption = R.allPass([
+  R.pipe(R.length, R.equals(1)),
+  R.pipe(R.head, R.prop('label'), R.anyPass([R.isNil, R.isEmpty])),
+]);
+
+const useFocusOptions = (focus = {}, labels = {}) => {
+  const options = useMemo(() => {
+    return R.when(
+      hasUniqUnlabelledOption,
+      R.set(R.lensPath([0, 'label']), R.prop('uniqFocusOption', labels)),
+    )(focus.options);
+  }, [labels, focus.options]);
+
+  const indexedOptions = useMemo(() => {
+    if (!options) return {};
+    return R.indexBy(R.prop('value'), options);
+  }, [options]);
+
+  return [options, indexedOptions];
+};
+
+// adapters for new Select which has not the same API as react-select
+const extractMultipleValue = R.pipe(R.propOr([], 'value'), R.pluck('value'));
+
+const getValue = R.ifElse(R.is(String), R.identity, R.prop('value'));
+
+const useDimensionOptions = properties => {
+  const dimensions = useMemo(() => {
+    return R.pipe(
+      R.pick(['scatterDimension', 'scatterX', 'scatterY', 'symbolDimension', 'stackedDimension']),
+      R.toPairs,
+    )(properties);
+  }, [properties]);
+
+  return [dimensions];
+};
+
+const useStyles$3 = makeStyles(() => ({
+  visibility: {
+    visibility: "hidden"
+  },
+  input: {
+    "&[type=number]::-webkit-inner-spin-button, &[type=number]::-webkit-outer-spin-button": {
+      "-webkit-appearance": "none",
+      margin: 0
+    },
+    "&[type=number]": {
+      "-moz-appearance": "textfield"
+    }
+  }
+}));
+const Input$1 = ({ id, value, onSubmit, onReset, resetLabel, placeholder, ...props }) => {
+  const classes = useStyles$3();
+  const [inputValue, setInputValue] = useState(value || "");
+  useEffect(() => {
+    setInputValue(value);
+  }, [value]);
+  const resetId = `reset-${id}`;
+  const handleBlur = (event) => {
+    if (R.is(Function, onSubmit) && inputValue !== value) {
+      onSubmit(event.target.value);
+    }
+  };
+  const handleReset = () => {
+    if (R.is(Function, onReset)) {
+      onReset();
+    } else {
+      setInputValue(value);
+    }
+  };
+  const onEnterLabel = (event) => {
+    if (event.key === "Enter") {
+      if (R.is(Function, onSubmit)) {
+        onSubmit(event.target.value);
+      }
+    }
+  };
+  const handleChange = (event) => {
+    setInputValue(event.target.value);
+  };
+  const endAdornment = R.is(Function, onReset) || inputValue !== value ? /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      id: resetId,
+      "aria-label": resetLabel,
+      onKeyPress: onEnterLabel,
+      onClick: handleReset,
+      size: "large",
+      children: /* @__PURE__ */ jsx(RotateLeft, { fontSize: "small" })
+    }
+  ) }) : null;
+  return /* @__PURE__ */ jsx(
+    TextField,
+    {
+      inputProps: {
+        className: classes.input
+      },
+      onBlur: handleBlur,
+      margin: "dense",
+      size: "small",
+      variant: "outlined",
+      onKeyPress: onEnterLabel,
+      onChange: handleChange,
+      id,
+      value: inputValue,
+      InputProps: {
+        endAdornment
+      },
+      placeholder: R.is(Number)(placeholder) ? R.toString(placeholder) : placeholder,
+      ...R.omit(["isActive"])(props)
+    }
+  );
+};
+
+const InputProxy = ({
+  minWidth = 220,
+  properties = {},
+  labels = {},
+  pkey,
+  mkey,
+  xs = 12,
+  sm = 12,
+  lg = 12,
+  InputProps = {}
+}) => {
+  if (R.isNil(pkey)) return null;
+  if (!R.has(pkey, properties)) return null;
+  const prop = R.propOr({}, pkey, properties);
+  return /* @__PURE__ */ jsx(Grid, { item: true, xs, sm, lg, style: { minWidth }, children: /* @__PURE__ */ jsx(
+    Input$1,
+    {
+      ...prop,
+      value: R.when(R.isNil, R.always(""))(prop.value),
+      type: "number",
+      label: R.prop(mkey || pkey, labels),
+      fullWidth: true,
+      InputProps: R.mergeRight({ endAdornment: null }, InputProps)
+    }
+  ) });
+};
+
+const Proxy = ({ keys, properties, children }) => {
+  if (!R.any(R.flip(R.has)(properties), keys)) return null;
+
+  return children;
+};
+
+Proxy.propTypes = {
+  children: PropTypes.node,
+  keys: PropTypes.array,
+  properties: PropTypes.object,
+};
+
+const useAxisOptions = (properties, suffix) => {
+  const keys = [`min${suffix}`, `max${suffix}`, `pivot${suffix}`, `step${suffix}`];
+
+  return R.pipe(R.pick(keys), R.keys)(properties);
+};
+
+const useStyles$2 = makeStyles(() => ({
+  visibility: {
+    visibility: "hidden"
+  },
+  input: {
+    "&[type=number]::-webkit-inner-spin-button, &[type=number]::-webkit-outer-spin-button": {
+      "-webkit-appearance": "none",
+      margin: 0
+    },
+    "&[type=number]": {
+      "-moz-appearance": "textfield"
+    }
+  }
+}));
+const Input = ({ id, value, onSubmit, onReset, resetLabel, placeholder, ...props }) => {
+  const classes = useStyles$2();
+  const [inputValue, setInputValue] = useState(value || "");
+  useEffect(() => {
+    setInputValue(value);
+  }, [value]);
+  const resetId = `reset-${id}`;
+  const handleBlur = (event) => {
+    if (R.is(Function, onSubmit) && inputValue !== value) {
+      onSubmit(event.target.value);
+    }
+  };
+  const handleReset = () => {
+    if (R.is(Function, onReset)) {
+      onReset();
+    } else {
+      setInputValue(value);
+    }
+  };
+  const onEnterLabel = (event) => {
+    if (event.key === "Enter") {
+      if (R.is(Function, onSubmit)) {
+        onSubmit(event.target.value);
+      }
+    }
+  };
+  const handleChange = (event) => {
+    setInputValue(event.target.value);
+  };
+  const endAdornment = R.is(Function, onReset) || inputValue !== value ? /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      id: resetId,
+      "aria-label": resetLabel,
+      onKeyPress: onEnterLabel,
+      onClick: handleReset,
+      size: "large",
+      children: /* @__PURE__ */ jsx(RotateLeft, { fontSize: "small" })
+    }
+  ) }) : null;
+  return /* @__PURE__ */ jsx(
+    TextField,
+    {
+      inputProps: {
+        className: classes.input
+      },
+      onBlur: handleBlur,
+      margin: "dense",
+      variant: "outlined",
+      onKeyPress: onEnterLabel,
+      onChange: handleChange,
+      id,
+      value: inputValue,
+      InputProps: {
+        endAdornment
+      },
+      placeholder: R.is(Number)(placeholder) ? R.toString(placeholder) : placeholder,
+      ...R.omit(["isActive"])(props)
+    }
+  );
+};
+
+const useStyles$1 = makeStyles((theme) => ({
+  title: R.pathOr({}, ["mixins", "chartsConfig", "title"], theme)
+}));
+const CustomDataEdit = ({ labels, properties }) => {
+  const classes = useStyles$1();
+  const { title = {}, subtitle = {}, source = {}, logo = {}, copyright = {} } = properties;
+  const resetLabel = R.prop("reset", labels);
+  return /* @__PURE__ */ jsxs(Grid, { "data-testid": "data-edit-test-id", container: true, spacing: 1, children: [
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(Typography, { className: classes.title, children: R.prop("information", labels) }) }),
+    R.prop("isActive", title) && /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, style: { minWidth: 220 }, children: /* @__PURE__ */ jsx(
+      Input,
+      {
+        fullWidth: true,
+        label: R.prop("title", labels),
+        resetLabel,
+        ...R.dissoc("isDefault", title)
+      }
+    ) }),
+    R.prop("isActive", subtitle) && /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, style: { minWidth: 220 }, children: /* @__PURE__ */ jsx(
+      Input,
+      {
+        fullWidth: true,
+        label: R.prop("subtitle", labels),
+        resetLabel,
+        ...R.dissoc("isDefault", subtitle)
+      }
+    ) }),
+    R.prop("isActive", source) && /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, style: { minWidth: 220 }, children: /* @__PURE__ */ jsx(
+      Input,
+      {
+        fullWidth: true,
+        label: R.prop("source", labels),
+        resetLabel,
+        ...R.dissoc("isDefault", source)
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Grid, { item: true, container: true, xs: 12, justifyContent: "space-around", children: R.map((item) => {
+      if (R.pipe(R.prop("isActive"), R.not)(item)) return;
+      const id = R.prop("id")(item);
+      return /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+        FormControlLabel,
+        {
+          control: /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              color: "primary",
+              inputProps: { "aria-label": R.prop(id)(labels) },
+              ...R.omit(["isActive"])(item)
+            }
+          ),
+          label: R.prop(id)(labels)
+        }
+      ) }, id);
+    })([logo, copyright]) })
+  ] });
+};
+const isAllInactive = R.pipe(R.pluck("isActive"), R.all(R.identity), R.not);
+const DataEdit = withBlank(({ isBlank, properties = {} }) => ({
+  isBlank: R.any(R.identity)([isBlank, R.isEmpty(properties), isAllInactive(properties)])
+}))(CustomDataEdit);
+
+const useStyles = makeStyles((theme) => ({
+  greyVariant: {
+    backgroundColor: theme.palette.secondary.dark,
+    color: theme.palette.grey[600]
+  }
+}));
+const ChartsConfig = ({ labels = {}, properties = {} }) => {
+  const classes = useStyles();
+  const [dimensions] = useDimensionOptions(properties);
+  const xKeys = useAxisOptions(properties, "X");
+  const yKeys = useAxisOptions(properties, "Y");
+  const { highlight, baseline } = properties;
+  const [highlightOptions, xhighlightOptions] = useFocusOptions(highlight, labels);
+  const [baselineOptions, xbaselineOptions] = useFocusOptions(baseline, labels);
+  const { stackedMode = {} } = properties;
+  const { options: stackedModeOptions = [] } = stackedMode;
+  const { displayMode = {} } = properties;
+  const { options: displayModeOptions = [] } = displayMode;
+  const dKeys = ["dimensions", "stackedDimension", "scatterDimension", "symbolDimension"];
+  const eKeys = ["title", "subtitle", "source", "logo", "copyright"];
+  if (R.isEmpty(properties)) return null;
+  return /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 3, "data-testid": "charts-config-test-id", children: [
+    /* @__PURE__ */ jsx(Proxy, { keys: dKeys, properties, children: /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, container: true, spacing: 2, children: /* @__PURE__ */ jsxs(Grid, { item: true, xs: 12, container: true, children: [
+      /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(Title, { label: labels.series }) }),
+      /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 1, children: [
+        /* @__PURE__ */ jsx(Proxy, { keys: ["stackedMode"], properties, children: /* @__PURE__ */ jsxs(Grid, { item: true, container: true, spacing: 1, alignItems: "center", style: { minWidth: 320 }, children: [
+          /* @__PURE__ */ jsx(Grid, { item: true, xs: true, children: /* @__PURE__ */ jsx(Typography, { variant: "body2", children: labels.stackedMode }) }),
+          R.map(
+            (option) => /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: option.value === stackedMode.value ? "contained" : "outlined",
+                onClick: () => stackedMode.onChange(option.value),
+                color: "primary",
+                children: /* @__PURE__ */ jsx(Typography, { variant: "body2", children: R.path(["stackedModeOptions", option.value], labels) })
+              }
+            ) }, option.value),
+            stackedModeOptions
+          )
+        ] }) }),
+        R.map(
+          ([key, dimension]) => /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, style: { minWidth: 320 }, children: /* @__PURE__ */ jsx(
+            Select,
+            {
+              ...dimension,
+              onChange: dimension.onChange,
+              label: R.prop(key, labels),
+              value: getValue(dimension.value),
+              items: dimension.options
+            }
+          ) }, key),
+          dimensions
+        )
+      ] }) })
+    ] }) }) }),
+    /* @__PURE__ */ jsxs(Grid, { item: true, xs: 12, container: true, spacing: 2, children: [
+      /* @__PURE__ */ jsx(Proxy, { keys: ["highlight", "baseline"], properties, children: /* @__PURE__ */ jsxs(Grid, { item: true, xs: 12, lg: 8, container: true, alignContent: "flex-start", children: [
+        /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(Title, { label: labels.focus }) }),
+        /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 1, children: [
+          /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, style: { minWidth: 320 }, children: /* @__PURE__ */ jsx(
+            Select,
+            {
+              ...highlight,
+              onChange: (ids) => highlight.onChange(R.props(ids, xhighlightOptions)),
+              value: extractMultipleValue(highlight),
+              items: highlightOptions,
+              isMultiple: true,
+              isClearable: true,
+              label: R.prop("highlight", labels),
+              placeholder: R.prop("select", labels),
+              optionsKey: "highlight"
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, style: { minWidth: 320 }, children: /* @__PURE__ */ jsx(
+            Select,
+            {
+              ...baseline,
+              onChange: (id) => baseline.onChange(
+                R.pipe(R.props([id]), R.without(baseline.value))(xbaselineOptions)
+              ),
+              value: R.pipe(R.propOr([], "value"), R.head, R.prop("value"))(baseline),
+              items: baselineOptions,
+              isClearable: true,
+              label: R.prop("baseline", labels),
+              placeholder: R.prop("select", labels),
+              optionsKey: "baseline"
+            }
+          ) })
+        ] }) })
+      ] }) }),
+      /* @__PURE__ */ jsxs(Grid, { item: true, xs: 12, lg: 4, container: true, alignContent: "flex-start", children: [
+        /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(Title, { label: labels.size }) }),
+        /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 1, children: [
+          /* @__PURE__ */ jsx(
+            InputProxy,
+            {
+              pkey: "width",
+              labels,
+              properties,
+              InputProps: {
+                endAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: "px" })
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            InputProxy,
+            {
+              pkey: "height",
+              labels,
+              properties,
+              InputProps: {
+                endAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: "px" })
+              }
+            }
+          )
+        ] }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(Grid, { item: true, xs: 12, container: true, spacing: 2, children: [
+      /* @__PURE__ */ jsx(Proxy, { keys: xKeys, properties, children: /* @__PURE__ */ jsxs(Grid, { item: true, xs: 12, container: true, className: classes.greyVariant, children: [
+        /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(Title, { label: labels.axisX, icon: /* @__PURE__ */ jsx(ArrowForward, {}) }) }),
+        /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(Grid, { container: true, spacing: 1, children: R.map(
+          (key) => /* @__PURE__ */ jsx(
+            InputProxy,
+            {
+              pkey: key,
+              mkey: R.init(key),
+              lg: 12 / R.length(xKeys),
+              labels,
+              properties
+            },
+            key
+          ),
+          xKeys
+        ) }) })
+      ] }) }),
+      /* @__PURE__ */ jsx(Proxy, { keys: ["freqStep"], properties, children: /* @__PURE__ */ jsxs(Grid, { item: true, xs: 12, container: true, className: classes.greyVariant, children: [
+        /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(Title, { label: labels.axisX, icon: /* @__PURE__ */ jsx(ArrowForward, {}) }) }),
+        /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(Grid, { container: true, spacing: 1, children: /* @__PURE__ */ jsx(InputProxy, { pkey: "freqStep", labels, properties }) }) })
+      ] }) }),
+      /* @__PURE__ */ jsx(Proxy, { keys: yKeys, properties, children: /* @__PURE__ */ jsxs(Grid, { item: true, xs: 12, container: true, className: classes.greyVariant, children: [
+        /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(Title, { label: labels.axisY, icon: /* @__PURE__ */ jsx(ArrowUpward, {}) }) }),
+        /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(Grid, { container: true, spacing: 1, children: R.map(
+          (key) => /* @__PURE__ */ jsx(
+            InputProxy,
+            {
+              pkey: key,
+              mkey: R.init(key),
+              lg: 12 / R.length(yKeys),
+              labels,
+              properties
+            },
+            key
+          ),
+          yKeys
+        ) }) })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx(Proxy, { keys: eKeys, properties, children: /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, container: true, spacing: 2, children: /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, container: true, children: /* @__PURE__ */ jsx(DataEdit, { labels, properties }) }) }) }),
+    /* @__PURE__ */ jsx(Proxy, { keys: ["displayMode"], properties, children: /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, container: true, spacing: 2, children: /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, container: true, children: /* @__PURE__ */ jsxs(Grid, { item: true, container: true, spacing: 1, alignItems: "center", style: { minWidth: 320 }, children: [
+      /* @__PURE__ */ jsx(Grid, { item: true, xs: true, children: /* @__PURE__ */ jsx(Typography, { variant: "body2", children: labels.display }) }),
+      R.map(
+        (option) => /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: option.value === displayMode.value ? "contained" : "outlined",
+            onClick: () => displayMode.onChange(option.value),
+            color: "primary",
+            children: /* @__PURE__ */ jsx(Typography, { variant: "body2", children: R.path(["displayOptions", option.value], labels) })
+          }
+        ) }, option.value),
+        displayModeOptions
+      )
+    ] }) }) }) })
+  ] });
+};
+
+export { ChartsConfig, useStyles };
+//# sourceMappingURL=ChartsConfig.js.map