@cashub/ui 0.14.3 → 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.3",
+  "version": "0.14.4",
   "private": false,
   "author": "CASHUB Team",
   "description": "CASHUB UI components library",