@cashub/ui 0.14.2 → 0.14.4

package/chart/DoughnutChart.js

@@ -11,6 +11,10 @@ var _styledComponents = require("styled-components");
 
 var _reactChartjs = require("react-chartjs-2");
 
+var _lodash = _interopRequireDefault(require("lodash.uniqueid"));
+
+var _htmlLegendPlugin = _interopRequireDefault(require("./utils/htmlLegendPlugin"));
+
 var _customTooltip = _interopRequireDefault(require("./utils/customTooltip"));
 
 var _jsxRuntime = require("react/jsx-runtime");
@@ -25,6 +29,18 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -35,6 +51,10 @@ var DoughnutChart = function DoughnutChart(_ref) {
       data = _ref.data,
       props = _objectWithoutProperties(_ref, _excluded);
 
+  var _useState = (0, _react.useState)((0, _lodash.default)('legend-container-')),
+      _useState2 = _slicedToArray(_useState, 1),
+      legendContainerId = _useState2[0];
+
   var theme = (0, _react.useContext)(_styledComponents.ThemeContext); // fix: read value from theme
 
   _reactChartjs.defaults.font.family = theme.fontFamily;
@@ -47,15 +67,27 @@ var DoughnutChart = function DoughnutChart(_ref) {
       maintainAspectRatio: false,
       aspectRatio: 1,
       plugins: {
+        htmlLegend: {
+          containerID: legendContainerId
+        },
         legend: {
-          position: 'bottom',
-          labels: {
-            padding: 24
-          }
+          display: false
         },
         tooltip: {
           enabled: false,
           callbacks: {
+            title: function title(context) {
+              return context[0] ? context[0].label.match(/(.{1,20})/g) : '';
+            },
+            label: function label(context) {
+              var label = context.dataset.data[context.dataIndex];
+
+              if (context.dataset.customLabel) {
+                return context.dataset.customLabel[context.dataIndex].toString();
+              }
+
+              return label.toString();
+            },
             labelTextColor: function labelTextColor(context) {
               var color = context.dataset.color;
 
@@ -73,12 +105,19 @@ var DoughnutChart = function DoughnutChart(_ref) {
         }
       }
     };
-  }, [theme.fontOnPrimary]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactChartjs.Doughnut, _objectSpread({
-    height: height,
-    data: data,
-    options: defaultOptions
-  }, props));
+  }, [legendContainerId, theme.fontOnPrimary]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactChartjs.Doughnut, _objectSpread({
+        height: height,
+        data: data,
+        options: defaultOptions,
+        plugins: [_htmlLegendPlugin.default]
+      }, props))
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      id: legendContainerId
+    })]
+  });
 };
 
 var _default = DoughnutChart;

package/chart/utils/customTooltip.js

@@ -73,6 +73,7 @@ var customTooltip = function customTooltip(theme) {
     tooltipEl.style.fontSize = theme.fontBody1;
     tooltipEl.style.display = 'block';
     tooltipEl.style.position = 'absolute';
+    tooltipEl.style.boxShadow = theme.boxShadow;
 
     var _tooltipModel$labelTe = _slicedToArray(tooltipModel.labelTextColors, 1);
 

package/chart/utils/htmlLegendPlugin.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _reactChartjs = require("react-chartjs-2");
+
+var htmlLegendPlugin = {
+  id: 'htmlLegend',
+  afterUpdate: function afterUpdate(chart, args, options) {
+    var ul = getOrCreateLegendList(chart, options.containerID); // Remove old legend items
+
+    while (ul.firstChild) {
+      ul.firstChild.remove();
+    } // Reuse the built-in legendItems generator
+
+
+    var items = chart.options.plugins.legend.labels.generateLabels(chart);
+    items.forEach(function (item) {
+      var li = document.createElement('li');
+      li.style.alignItems = 'center';
+      li.style.cursor = 'pointer';
+      li.style.display = 'flex';
+      li.style.flexDirection = 'row';
+      li.style.marginLeft = '16px';
+      li.style.marginTop = '16px';
+      li.style.color = _reactChartjs.defaults.color;
+
+      li.onclick = function () {
+        var type = chart.config.type;
+
+        if (type === 'pie' || type === 'doughnut') {
+          // Pie and doughnut charts only have a single dataset and visibility is per item
+          chart.toggleDataVisibility(item.index);
+        } else {
+          chart.setDatasetVisibility(item.datasetIndex, !chart.isDatasetVisible(item.datasetIndex));
+        }
+
+        chart.update();
+      }; // Color box
+
+
+      var boxSpan = document.createElement('span');
+      boxSpan.style.background = item.fillStyle;
+      boxSpan.style.borderColor = item.strokeStyle;
+      boxSpan.style.borderWidth = "".concat(item.lineWidth, "px");
+      boxSpan.style.borderStyle = 'solid';
+      boxSpan.style.display = 'inline-block';
+      boxSpan.style.height = '16px';
+      boxSpan.style.marginRight = '8px';
+      boxSpan.style.width = '32px'; // Text
+
+      var textContainer = document.createElement('p');
+      textContainer.style.color = item.fontColor;
+      textContainer.style.margin = 0;
+      textContainer.style.padding = 0;
+      textContainer.style.wordBreak = 'break-all';
+      textContainer.style.textDecoration = item.hidden ? 'line-through' : '';
+      var text = document.createTextNode(item.text);
+      textContainer.appendChild(text);
+      li.appendChild(boxSpan);
+      li.appendChild(textContainer);
+      ul.appendChild(li);
+    });
+  }
+};
+
+var getOrCreateLegendList = function getOrCreateLegendList(chart, id) {
+  var legendContainer = document.getElementById(id);
+  var listContainer = legendContainer.querySelector('ul');
+
+  if (!listContainer) {
+    listContainer = document.createElement('ul');
+    listContainer.style.display = 'flex';
+    listContainer.style.flexDirection = 'row';
+    listContainer.style.flexWrap = 'wrap';
+    listContainer.style.justifyContent = 'center';
+    listContainer.style.margin = 0;
+    listContainer.style.padding = 0;
+    legendContainer.appendChild(listContainer);
+  }
+
+  return listContainer;
+};
+
+var _default = htmlLegendPlugin;
+exports.default = _default;

package/chart/utils/index.js

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "customTooltip", {
     return _customTooltip.default;
   }
 });
+Object.defineProperty(exports, "htmlLegendPlugin", {
+  enumerable: true,
+  get: function get() {
+    return _htmlLegendPlugin.default;
+  }
+});
 Object.defineProperty(exports, "padEmptyChartBar", {
   enumerable: true,
   get: function get() {
@@ -20,4 +26,6 @@ var _customTooltip = _interopRequireDefault(require("./customTooltip"));
 
 var _padEmptyChartBar = _interopRequireDefault(require("./padEmptyChartBar"));
 
+var _htmlLegendPlugin = _interopRequireDefault(require("./htmlLegendPlugin"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cashub/ui",
-  "version": "0.14.2",
+  "version": "0.14.4",
   "private": false,
   "author": "CASHUB Team",
   "description": "CASHUB UI components library",

package/table/Table.js

@@ -304,7 +304,7 @@ var BodyTR = _styledComponents.default.tr(_templateObject4 || (_templateObject4
   return noData && (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        height: 168px;\n\n        > td {\n          &:first-child:before {\n            display: none;\n          }\n        }\n      "])));
 }));
 
-var TableDataCell = _styledComponents.default.td(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  height: 48px;\n  background: ", ";\n  padding: 0 var(--spacing-xs);\n  max-width: 0px;\n  text-align: ", ";\n  vertical-align: middle;\n  border-top: var(--border-width) solid transparent;\n  border-bottom: var(--border-width) solid transparent;\n  transition: border-color 0.3s;\n\n  &:first-child {\n    border-left: var(--border-width) solid transparent;\n    border-top-left-radius: var(--border-radius-l);\n    border-bottom-left-radius: var(--border-radius-l);\n    padding-left: var(--spacing);\n  }\n\n  &:last-child {\n    border-right: var(--border-width) solid transparent;\n    border-top-right-radius: var(--border-radius-l);\n    border-bottom-right-radius: var(--border-radius-l);\n    padding-right: var(--spacing);\n  }\n\n  > span {\n    display: inline-block;\n    width: 100%;\n    padding: 0 2px;\n    overflow: hidden;\n    white-space: pre;\n    text-overflow: ellipsis;\n  }\n\n  ", "\n\n  ", "\n"])), function (_ref8) {
+var TableDataCell = _styledComponents.default.td(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  height: 48px;\n  background: ", ";\n  padding: 0 var(--spacing-xs);\n  max-width: 0px;\n  text-align: ", ";\n  vertical-align: middle;\n  border-top: var(--border-width) solid transparent;\n  border-bottom: var(--border-width) solid transparent;\n  transition: border-color 0.3s;\n\n  &:first-child {\n    border-left: var(--border-width) solid transparent;\n    border-top-left-radius: var(--border-radius-l);\n    border-bottom-left-radius: var(--border-radius-l);\n    padding-left: var(--spacing);\n  }\n\n  &:last-child {\n    border-right: var(--border-width) solid transparent;\n    border-top-right-radius: var(--border-radius-l);\n    border-bottom-right-radius: var(--border-radius-l);\n    padding-right: var(--spacing);\n  }\n\n  > span {\n    display: inline-block;\n    width: 100%;\n    overflow: hidden;\n    white-space: pre;\n    text-overflow: ellipsis;\n  }\n\n  ", "\n\n  ", "\n"])), function (_ref8) {
   var backgroundReverse = _ref8.backgroundReverse;
   return backgroundReverse ? 'var(--color-background1)' : 'var(--color-background2)';
 }, function (_ref9) {

package/table/subComponent/BaseTableHeadCell.js

@@ -9,7 +9,7 @@ exports.default = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -17,18 +17,18 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var BaseTableHeadCell = _styledComponents.default.th(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  font-size: var(--font-body1);\n  font-weight: var(--font-bold);\n  width: ", ";\n  padding: var(--spacing-s) var(--spacing-xs);\n\n  > div {\n    display: flex;\n\n    > span {\n      max-width: calc(100% - 0.5rem - 1rem);\n      padding-right: var(--spacing-xs);\n      overflow: hidden;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n    }\n  }\n\n  ", "\n\n  ", "\n"])), function (_ref) {
+var BaseTableHeadCell = _styledComponents.default.th(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  font-size: var(--font-body1);\n  font-weight: var(--font-bold);\n  width: ", ";\n  padding: var(--spacing-s) var(--spacing-xs);\n\n  > div {\n    display: flex;\n\n    > span {\n      overflow: hidden;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n    }\n  }\n\n  ", "\n\n  ", "\n"])), function (_ref) {
   var width = _ref.width;
   return width || 'auto';
 }, function (_ref2) {
   var sortable = _ref2.sortable;
-  return sortable && 'cursor: pointer;';
+  return sortable && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        cursor: pointer;\n\n        > div > span {\n          max-width: calc(100% - 1rem);\n          padding-right: var(--spacing-xs);\n        }\n      "])));
 }, function (_ref3) {
   var align = _ref3.align;
 
   switch (align) {
     case 'center':
-      return (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          > div {\n            justify-content: center;\n          }\n        "])));
+      return (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          > div {\n            justify-content: center;\n          }\n        "])));
 
     default:
       break;

package/table/subComponent/TableHeadCell.js

@@ -15,6 +15,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var TableHeadCell = (0, _styledComponents.default)(_BaseTableHeadCell.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  max-width: 0px;\n\n  &:first-child {\n    padding-left: var(--spacing);\n  }\n\n  &:last-child {\n    padding-right: var(--spacing);\n  }\n"])));
+var TableHeadCell = (0, _styledComponents.default)(_BaseTableHeadCell.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &:first-child {\n    padding-left: var(--spacing);\n  }\n\n  &:last-child {\n    padding-right: var(--spacing);\n  }\n"])));
 var _default = TableHeadCell;
 exports.default = _default;