@pareto-engineering/design-system 4.9.2 → 4.9.3

package/dist/cjs/a/AreaChart/AreaChart.js

@@ -0,0 +1,176 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _recharts = require("recharts");
+var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
+require("./styles.scss");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// front/packages/design-system/src/ui/a/AreaChart/AreaChart.jsx
+
+// Local Definitions
+
+const baseClassName = _exports.default.base;
+const componentClassName = 'area-chart';
+const AreaChart = _ref => {
+  let {
+    id,
+    className: userClassName,
+    data,
+    title,
+    xKey,
+    yKeys,
+    xLabel,
+    yLabel,
+    colors,
+    filled,
+    height,
+    width
+    // ...otherProps
+  } = _ref;
+  const processedData = data.map(item => {
+    const yValues = yKeys.map(key => item[key]);
+    const lowerBound = Math.min(...yValues);
+    const upperBound = Math.max(...yValues);
+    const margin = (upperBound - lowerBound) * 0.1;
+    return {
+      ...item,
+      bounds: [lowerBound - margin, upperBound + margin]
+    };
+  });
+  const yAxisBounds = () => {
+    const yValues = data.map(item => yKeys.map(key => item[key]));
+    const min = Math.min(...yValues.flat());
+    const max = Math.max(...yValues.flat());
+    const margin = (max - min) * 0.1;
+    return [min - margin, max + margin];
+  };
+  const CustomTooltipContent = _ref2 => {
+    let {
+      active,
+      payload,
+      label
+    } = _ref2;
+    if (active && payload && payload.length) {
+      const newPayload = payload.filter(item => item.name !== 'bounds');
+      return /*#__PURE__*/React.createElement("div", {
+        className: "custom-tooltip"
+      }, /*#__PURE__*/React.createElement("p", {
+        className: "label"
+      }, `${xLabel}: ${label}`), newPayload.map(entry => /*#__PURE__*/React.createElement("p", {
+        className: "label",
+        key: `${entry.name}`,
+        style: {
+          color: entry.color
+        }
+      }, `${entry.name}: ${entry.value}`)));
+    }
+    return null;
+  };
+  const CustomLegend = _ref3 => {
+    let {
+      colorsArray,
+      yKeysArray
+    } = _ref3;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "custom-legend"
+    }, yKeysArray.map((key, index) => /*#__PURE__*/React.createElement("div", {
+      key: key,
+      className: "item"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "line",
+      style: {
+        backgroundColor: colorsArray[index]
+      }
+    }), /*#__PURE__*/React.createElement("span", {
+      className: "text"
+    }, key))));
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' ')
+  }, /*#__PURE__*/React.createElement("h3", null, title), /*#__PURE__*/React.createElement(CustomLegend, {
+    colorsArray: colors,
+    yKeysArray: yKeys
+  }), /*#__PURE__*/React.createElement(_recharts.ResponsiveContainer, {
+    width: width,
+    height: height
+  }, /*#__PURE__*/React.createElement(_recharts.AreaChart, {
+    data: processedData
+  }, /*#__PURE__*/React.createElement(_recharts.CartesianGrid, {
+    strokeDasharray: "3 3"
+  }), /*#__PURE__*/React.createElement(_recharts.XAxis, {
+    dataKey: xKey,
+    label: {
+      value: xLabel,
+      position: 'insideBottom',
+      offset: -5
+    } // Adjusted offset for padding
+    ,
+    axisLine: false,
+    tickLine: false,
+    tickCount: 3
+  }), /*#__PURE__*/React.createElement(_recharts.YAxis, {
+    domain: yAxisBounds,
+    label: {
+      value: yLabel,
+      angle: -90,
+      position: 'insideLeft',
+      offset: 15
+    },
+    axisLine: false,
+    tickLine: false,
+    tickFormatter: value => value.toFixed(2)
+  }), /*#__PURE__*/React.createElement(_recharts.Tooltip, {
+    content: /*#__PURE__*/React.createElement(CustomTooltipContent, null)
+  }), filled && /*#__PURE__*/React.createElement(_recharts.Area, {
+    id: "bounds",
+    type: "linear",
+    dataKey: "bounds",
+    stroke: "none",
+    fill: "var(--hard-ui-main-2)",
+    fillOpacity: 0.4,
+    activeDot: false,
+    dot: false,
+    label: false,
+    isAnimationActive: false
+  }), yKeys.map((key, index) => /*#__PURE__*/React.createElement(_recharts.Area, {
+    id: key,
+    key: key,
+    type: "linear",
+    dataKey: key,
+    stroke: colors[index],
+    fill: "none",
+    connectNulls: true,
+    dot: false,
+    activeDot: {
+      r: 4
+    },
+    isAnimationActive: false
+  })))));
+};
+AreaChart.propTypes = {
+  // eslint-disable-next-line react/forbid-prop-types
+  data: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
+  title: _propTypes.default.string.isRequired,
+  xKey: _propTypes.default.string.isRequired,
+  yKeys: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+  xLabel: _propTypes.default.string,
+  yLabel: _propTypes.default.string,
+  colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+  filled: _propTypes.default.bool,
+  height: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  width: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
+};
+AreaChart.defaultProps = {
+  filled: false,
+  width: '100%',
+  height: 300
+};
+var _default = exports.default = AreaChart;

package/dist/cjs/a/AreaChart/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "AreaChart", {
+  enumerable: true,
+  get: function () {
+    return _AreaChart.default;
+  }
+});
+var _AreaChart = _interopRequireDefault(require("./AreaChart"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/cjs/a/AreaChart/styles.scss

@@ -0,0 +1,89 @@
+@use "@pareto-engineering/bem";
+
+$default-margin: 1rem;
+$default-padding: 1rem;
+$default-box-shadow: 0 .25rem .75rem var(--ui-lines);
+$default-text-font-size: calc(var(--s-1) * 1rem);
+$default-border-radius: .25rem;
+$default-legend-gap: .625rem;
+$default-legend-padding: calc($default-padding * .125) calc($default-padding * .625);
+$default-legend-line-width: 1.25rem;
+$default-legend-line-height: .125rem;
+$default-legend-line-margin-right: .3125rem;
+$default-border-line-width: .0625rem;
+
+.#{bem.$base} {
+  &.area-chart {
+    background-color: var(--background-far);
+    border-radius: var(--theme-default-border-radius);
+    box-shadow: $default-box-shadow;
+    margin: $default-margin 0;
+    padding: $default-padding;
+
+    h3 {
+      color: var(--subtitle);
+      margin: calc($default-margin / 5);
+      text-align: left;
+    }
+
+    .custom-legend {
+      display: flex;
+      gap: $default-legend-gap;
+      justify-content: flex-end;
+      padding-bottom: $default-padding;
+      padding-right: calc($default-padding * .25);
+
+      .item {
+        align-items: center;
+        border: $default-border-line-width solid var(--ui-lines);
+        border-radius: $default-border-radius;
+        display: flex;
+        padding: $default-legend-padding;
+      }
+
+      .line {
+        display: inline-block;
+        height: $default-legend-line-height;
+        margin-right: $default-legend-line-margin-right;
+        width: $default-legend-line-width;
+      }
+
+      .text {
+        color: var(--paragraph);
+        font-size: calc($default-text-font-size * .75);
+      }
+    }
+
+    .custom-tooltip {
+      background-color: var(--background-far);
+      border: $default-border-line-width solid var(--ui-lines);
+      border-radius: $default-border-radius;
+      padding: calc($default-padding * .25);
+
+      .label {
+        color: var(--hard-paragraph);
+        font-size: $default-text-font-size;
+        margin: calc($default-margin * .25);
+      }
+    }
+
+    /* stylelint-disable selector-max-compound-selectors -- nested elements */
+    .recharts-wrapper {
+      .recharts-surface {
+        .recharts-cartesian-grid line {
+          stroke: var(--ui-lines);
+        }
+
+        .recharts-text {
+          fill: var(--soft-paragraph);
+          font-size: calc($default-text-font-size * .75);
+        }
+
+        .recharts-text.recharts-label {
+          fill: var(--paragraph);
+          font-size: $default-text-font-size;
+        }
+      }
+    }
+  }
+}

package/dist/cjs/a/XMLEditor/XMLEditor.js

@@ -44,7 +44,7 @@ const XMLEditor = _ref => {
   (0, _react.useEffect)(() => {
     const startState = _state.EditorState.create({
       doc: config,
-      extensions: [_view.keymap.of([_commands.defaultKeymap, _commands.indentWithTab]), (0, _language.indentOnInput)(), (0, _view.lineNumbers)(), (0, _language.bracketMatching)(), (0, _language.foldGutter)(), (0, _view.drawSelection)(), (0, _view.highlightActiveLine)(), (0, _view.highlightActiveLineGutter)(), (0, _view.highlightSpecialChars)(), (0, _view.dropCursor)(), (0, _view.rectangularSelection)(), (0, _view.crosshairCursor)(), (0, _langXml.xml)(), _common.theme, _state.EditorState.readOnly.of(readOnly), _view.EditorView.updateListener.of(view => {
+      extensions: [_view.keymap.of([_commands.defaultKeymap, _commands.indentWithTab, ..._commands.historyKeymap]), (0, _language.indentOnInput)(), (0, _view.lineNumbers)(), (0, _language.bracketMatching)(), (0, _language.foldGutter)(), (0, _view.drawSelection)(), (0, _view.highlightActiveLine)(), (0, _view.highlightActiveLineGutter)(), (0, _view.highlightSpecialChars)(), (0, _view.dropCursor)(), (0, _view.rectangularSelection)(), (0, _view.crosshairCursor)(), (0, _langXml.xml)(), (0, _commands.history)(), _common.theme, _state.EditorState.readOnly.of(readOnly), _view.EditorView.updateListener.of(view => {
         onChange(view);
         // view.state.doc.toString() to receive the current content in the editor.
       }), _view.EditorView.focusChangeEffect.of((state, focused) => {

package/dist/cjs/a/index.js

@@ -27,6 +27,12 @@ Object.defineProperty(exports, "AppContextProvider", {
     return _AppContext.AppContextProvider;
   }
 });
+Object.defineProperty(exports, "AreaChart", {
+  enumerable: true,
+  get: function () {
+    return _AreaChart.AreaChart;
+  }
+});
 Object.defineProperty(exports, "BlurOverlay", {
   enumerable: true,
   get: function () {
@@ -230,4 +236,5 @@ var _Removable = require("./Removable");
 var _ToggleSwitch = require("./ToggleSwitch");
 var _XMLEditor = require("./XMLEditor");
 var _DatePicker = require("./DatePicker");
-var _Tooltip = require("./Tooltip");
+var _Tooltip = require("./Tooltip");
+var _AreaChart = require("./AreaChart");

package/dist/es/a/AreaChart/AreaChart.js

@@ -0,0 +1,163 @@
+// front/packages/design-system/src/ui/a/AreaChart/AreaChart.jsx
+
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { AreaChart as RechartsAreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
+import styleNames from '@pareto-engineering/bem/exports';
+import "./styles.scss";
+
+// Local Definitions
+
+const baseClassName = styleNames.base;
+const componentClassName = 'area-chart';
+const AreaChart = ({
+  id,
+  className: userClassName,
+  data,
+  title,
+  xKey,
+  yKeys,
+  xLabel,
+  yLabel,
+  colors,
+  filled,
+  height,
+  width
+  // ...otherProps
+}) => {
+  const processedData = data.map(item => {
+    const yValues = yKeys.map(key => item[key]);
+    const lowerBound = Math.min(...yValues);
+    const upperBound = Math.max(...yValues);
+    const margin = (upperBound - lowerBound) * 0.1;
+    return {
+      ...item,
+      bounds: [lowerBound - margin, upperBound + margin]
+    };
+  });
+  const yAxisBounds = () => {
+    const yValues = data.map(item => yKeys.map(key => item[key]));
+    const min = Math.min(...yValues.flat());
+    const max = Math.max(...yValues.flat());
+    const margin = (max - min) * 0.1;
+    return [min - margin, max + margin];
+  };
+  const CustomTooltipContent = ({
+    active,
+    payload,
+    label
+  }) => {
+    if (active && payload && payload.length) {
+      const newPayload = payload.filter(item => item.name !== 'bounds');
+      return /*#__PURE__*/React.createElement("div", {
+        className: "custom-tooltip"
+      }, /*#__PURE__*/React.createElement("p", {
+        className: "label"
+      }, `${xLabel}: ${label}`), newPayload.map(entry => /*#__PURE__*/React.createElement("p", {
+        className: "label",
+        key: `${entry.name}`,
+        style: {
+          color: entry.color
+        }
+      }, `${entry.name}: ${entry.value}`)));
+    }
+    return null;
+  };
+  const CustomLegend = ({
+    colorsArray,
+    yKeysArray
+  }) => /*#__PURE__*/React.createElement("div", {
+    className: "custom-legend"
+  }, yKeysArray.map((key, index) => /*#__PURE__*/React.createElement("div", {
+    key: key,
+    className: "item"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "line",
+    style: {
+      backgroundColor: colorsArray[index]
+    }
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "text"
+  }, key))));
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' ')
+  }, /*#__PURE__*/React.createElement("h3", null, title), /*#__PURE__*/React.createElement(CustomLegend, {
+    colorsArray: colors,
+    yKeysArray: yKeys
+  }), /*#__PURE__*/React.createElement(ResponsiveContainer, {
+    width: width,
+    height: height
+  }, /*#__PURE__*/React.createElement(RechartsAreaChart, {
+    data: processedData
+  }, /*#__PURE__*/React.createElement(CartesianGrid, {
+    strokeDasharray: "3 3"
+  }), /*#__PURE__*/React.createElement(XAxis, {
+    dataKey: xKey,
+    label: {
+      value: xLabel,
+      position: 'insideBottom',
+      offset: -5
+    } // Adjusted offset for padding
+    ,
+    axisLine: false,
+    tickLine: false,
+    tickCount: 3
+  }), /*#__PURE__*/React.createElement(YAxis, {
+    domain: yAxisBounds,
+    label: {
+      value: yLabel,
+      angle: -90,
+      position: 'insideLeft',
+      offset: 15
+    },
+    axisLine: false,
+    tickLine: false,
+    tickFormatter: value => value.toFixed(2)
+  }), /*#__PURE__*/React.createElement(Tooltip, {
+    content: /*#__PURE__*/React.createElement(CustomTooltipContent, null)
+  }), filled && /*#__PURE__*/React.createElement(Area, {
+    id: "bounds",
+    type: "linear",
+    dataKey: "bounds",
+    stroke: "none",
+    fill: "var(--hard-ui-main-2)",
+    fillOpacity: 0.4,
+    activeDot: false,
+    dot: false,
+    label: false,
+    isAnimationActive: false
+  }), yKeys.map((key, index) => /*#__PURE__*/React.createElement(Area, {
+    id: key,
+    key: key,
+    type: "linear",
+    dataKey: key,
+    stroke: colors[index],
+    fill: "none",
+    connectNulls: true,
+    dot: false,
+    activeDot: {
+      r: 4
+    },
+    isAnimationActive: false
+  })))));
+};
+AreaChart.propTypes = {
+  // eslint-disable-next-line react/forbid-prop-types
+  data: PropTypes.arrayOf(PropTypes.object).isRequired,
+  title: PropTypes.string.isRequired,
+  xKey: PropTypes.string.isRequired,
+  yKeys: PropTypes.arrayOf(PropTypes.string).isRequired,
+  xLabel: PropTypes.string,
+  yLabel: PropTypes.string,
+  colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+  filled: PropTypes.bool,
+  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
+AreaChart.defaultProps = {
+  filled: false,
+  width: '100%',
+  height: 300
+};
+export default AreaChart;

package/dist/es/a/AreaChart/index.js

@@ -0,0 +1 @@
+export { default as AreaChart } from "./AreaChart";

package/dist/es/a/AreaChart/styles.scss

@@ -0,0 +1,89 @@
+@use "@pareto-engineering/bem";
+
+$default-margin: 1rem;
+$default-padding: 1rem;
+$default-box-shadow: 0 .25rem .75rem var(--ui-lines);
+$default-text-font-size: calc(var(--s-1) * 1rem);
+$default-border-radius: .25rem;
+$default-legend-gap: .625rem;
+$default-legend-padding: calc($default-padding * .125) calc($default-padding * .625);
+$default-legend-line-width: 1.25rem;
+$default-legend-line-height: .125rem;
+$default-legend-line-margin-right: .3125rem;
+$default-border-line-width: .0625rem;
+
+.#{bem.$base} {
+  &.area-chart {
+    background-color: var(--background-far);
+    border-radius: var(--theme-default-border-radius);
+    box-shadow: $default-box-shadow;
+    margin: $default-margin 0;
+    padding: $default-padding;
+
+    h3 {
+      color: var(--subtitle);
+      margin: calc($default-margin / 5);
+      text-align: left;
+    }
+
+    .custom-legend {
+      display: flex;
+      gap: $default-legend-gap;
+      justify-content: flex-end;
+      padding-bottom: $default-padding;
+      padding-right: calc($default-padding * .25);
+
+      .item {
+        align-items: center;
+        border: $default-border-line-width solid var(--ui-lines);
+        border-radius: $default-border-radius;
+        display: flex;
+        padding: $default-legend-padding;
+      }
+
+      .line {
+        display: inline-block;
+        height: $default-legend-line-height;
+        margin-right: $default-legend-line-margin-right;
+        width: $default-legend-line-width;
+      }
+
+      .text {
+        color: var(--paragraph);
+        font-size: calc($default-text-font-size * .75);
+      }
+    }
+
+    .custom-tooltip {
+      background-color: var(--background-far);
+      border: $default-border-line-width solid var(--ui-lines);
+      border-radius: $default-border-radius;
+      padding: calc($default-padding * .25);
+
+      .label {
+        color: var(--hard-paragraph);
+        font-size: $default-text-font-size;
+        margin: calc($default-margin * .25);
+      }
+    }
+
+    /* stylelint-disable selector-max-compound-selectors -- nested elements */
+    .recharts-wrapper {
+      .recharts-surface {
+        .recharts-cartesian-grid line {
+          stroke: var(--ui-lines);
+        }
+
+        .recharts-text {
+          fill: var(--soft-paragraph);
+          font-size: calc($default-text-font-size * .75);
+        }
+
+        .recharts-text.recharts-label {
+          fill: var(--paragraph);
+          font-size: $default-text-font-size;
+        }
+      }
+    }
+  }
+}

package/dist/es/a/XMLEditor/XMLEditor.js

@@ -4,7 +4,7 @@ import { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { EditorState } from '@codemirror/state';
 import { EditorView, keymap, lineNumbers, drawSelection, dropCursor, highlightActiveLine, highlightActiveLineGutter, highlightSpecialChars, crosshairCursor, rectangularSelection } from '@codemirror/view';
-import { defaultKeymap, indentWithTab } from '@codemirror/commands';
+import { defaultKeymap, indentWithTab, history, historyKeymap } from '@codemirror/commands';
 import { indentOnInput, bracketMatching, foldGutter } from '@codemirror/language';
 import { xml } from '@codemirror/lang-xml';
 import styleNames from '@pareto-engineering/bem/exports';
@@ -33,7 +33,7 @@ const XMLEditor = ({
   useEffect(() => {
     const startState = EditorState.create({
       doc: config,
-      extensions: [keymap.of([defaultKeymap, indentWithTab]), indentOnInput(), lineNumbers(), bracketMatching(), foldGutter(), drawSelection(), highlightActiveLine(), highlightActiveLineGutter(), highlightSpecialChars(), dropCursor(), rectangularSelection(), crosshairCursor(), xml(), theme, EditorState.readOnly.of(readOnly), EditorView.updateListener.of(view => {
+      extensions: [keymap.of([defaultKeymap, indentWithTab, ...historyKeymap]), indentOnInput(), lineNumbers(), bracketMatching(), foldGutter(), drawSelection(), highlightActiveLine(), highlightActiveLineGutter(), highlightSpecialChars(), dropCursor(), rectangularSelection(), crosshairCursor(), xml(), history(), theme, EditorState.readOnly.of(readOnly), EditorView.updateListener.of(view => {
         onChange(view);
         // view.state.doc.toString() to receive the current content in the editor.
       }), EditorView.focusChangeEffect.of((state, focused) => {

package/dist/es/a/index.js

@@ -27,4 +27,5 @@ export { Removable } from "./Removable";
 export { ToggleSwitch } from "./ToggleSwitch";
 export { XMLEditor } from "./XMLEditor";
 export { DatePicker } from "./DatePicker";
-export { Tooltip } from "./Tooltip";
+export { Tooltip } from "./Tooltip";
+export { AreaChart } from "./AreaChart";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "4.9.2",
+  "version": "4.9.3",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -59,7 +59,7 @@
     "@lexical/selection": "0.12.2",
     "@lexical/table": "0.12.2",
     "@lexical/utils": "0.12.2",
-    "@pareto-engineering/assets": "^4.9.0",
+    "@pareto-engineering/assets": "^4.9.3",
     "@pareto-engineering/bem": "^4.8.1",
     "@pareto-engineering/styles": "^4.2.0",
     "@pareto-engineering/utils": "^4.0.0",
@@ -79,8 +79,9 @@
     "react-helmet-async": "^1.3.0",
     "react-relay": "^15.0.0",
     "react-router-dom": "^5.3.4",
+    "recharts": "^2.13.3",
     "relay-test-utils": "^15.0.0"
   },
   "browserslist": "> 2%",
-  "gitHead": "d7034652bbfb7fa7362d9cedaa04ae23fc8323ad"
+  "gitHead": "d69af6b2eea2c7f0897d665c3d13e3dda118e293"
 }