@cashub/ui-elv 1.0.0

package/chart/DoughnutChart.js

@@ -0,0 +1,118 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _styledComponents = _interopRequireWildcard(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 _centerTextPlugin = _interopRequireDefault(require("./utils/centerTextPlugin"));
+var _jsxRuntime = require("react/jsx-runtime");
+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; }
+const DoughnutChart = _ref => {
+  let {
+    height = 300,
+    data,
+    showCenterText = false,
+    centerTextTitle,
+    ...props
+  } = _ref;
+  const [legendContainerId] = (0, _react.useState)((0, _lodash.default)('legend-container-'));
+  const theme = (0, _react.useContext)(_styledComponents.ThemeContext);
+
+  // fix: read value from theme
+  _reactChartjs.defaults.font.family = theme.fontFamily;
+  _reactChartjs.defaults.font.size = 16;
+  _reactChartjs.defaults.color = theme.fontOnBg;
+  _reactChartjs.defaults.plugins.tooltip.external = (0, _customTooltip.default)(theme);
+  const defaultOptions = (0, _react.useMemo)(() => {
+    return {
+      responsive: true,
+      maintainAspectRatio: false,
+      aspectRatio: 1,
+      plugins: {
+        htmlLegend: {
+          containerID: legendContainerId
+        },
+        legend: {
+          display: false
+        },
+        tooltip: {
+          enabled: false,
+          callbacks: {
+            title(context) {
+              return context[0] ? context[0].label.match(/(.{1,20})/g) : '';
+            },
+            label(context) {
+              const label = context.dataset.data[context.dataIndex];
+              if (context.dataset.customLabel) {
+                return context.dataset.customLabel[context.dataIndex].toString();
+              }
+              return label.toString();
+            },
+            labelTextColor(context) {
+              const {
+                color
+              } = context.dataset;
+              if (!color) {
+                return theme.fontOnPrimary;
+              }
+              if (color && Array.isArray(color)) {
+                return color[context.dataIndex % color.length];
+              }
+              return color;
+            }
+          }
+        },
+        centerText: {
+          display: showCenterText,
+          title: centerTextTitle
+        }
+      }
+    };
+  }, [legendContainerId, theme.fontOnPrimary, showCenterText, centerTextTitle]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactChartjs.Doughnut, {
+        height: height,
+        data: data,
+        options: defaultOptions,
+        plugins: [_htmlLegendPlugin.default, _centerTextPlugin.default],
+        ...props
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(LegendWrapper, {
+      id: legendContainerId
+    })]
+  });
+};
+const LegendWrapper = _styledComponents.default.div`
+  .custom-legend-tooltip {
+    position: relative;
+  }
+
+  .custom-legend-tooltip:hover::after {
+    content: attr(data-tooltip);
+    position: absolute;
+    top: calc(1rem + var(--spacing-xs));
+    left: 50%;
+    transform: translateX(-50%);
+    border: 1px solid var(--border-color);
+    color: var(--font-on-background);
+    background: var(--color-background2);
+    box-shadow: var(--box-shadow);
+    border-radius: calc(var(--border-radius) / 2);
+    padding: var(--spacing-xs);
+    font-size: var(--font-body1);
+    font-weight: var(--font-normal);
+    text-align: center;
+    width: max-content;
+    max-width: 50vw;
+  }
+`;
+var _default = exports.default = DoughnutChart;

package/chart/LineChart.js

@@ -0,0 +1,146 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _styledComponents = require("styled-components");
+var _reactChartjs = require("react-chartjs-2");
+var _customTooltip = _interopRequireDefault(require("./utils/customTooltip"));
+var _yAxisTopTitlePlugin = _interopRequireDefault(require("./utils/yAxisTopTitlePlugin"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const LineChart = _ref => {
+  let {
+    height = 300,
+    data,
+    options = {},
+    ...props
+  } = _ref;
+  const theme = (0, _react.useContext)(_styledComponents.ThemeContext);
+
+  // fix: read value from theme
+  _reactChartjs.defaults.font.family = theme.fontFamily;
+  _reactChartjs.defaults.font.size = 16;
+  _reactChartjs.defaults.color = theme.fontOnBg;
+  _reactChartjs.defaults.plugins.tooltip.external = (0, _customTooltip.default)(theme);
+  const customOptions = (0, _react.useMemo)(() => {
+    const {
+      yAxisTopTitle
+    } = options;
+    return {
+      suggestedMax: options.suggestedMax ? options.suggestedMax : 10,
+      tooltipTitlePrefix: '',
+      tooltipLabelPrefix: '',
+      tooltipLabelPostfix: '',
+      showLegend: options.showLegend === undefined ? false : options.showLegend,
+      yAxisTopTitle: yAxisTopTitle ? yAxisTopTitle : ''
+    };
+  }, [options]);
+  if (options.tooltips) {
+    const tooltipsOptions = options.tooltips;
+    customOptions.tooltipTitlePrefix = tooltipsOptions.titlePrefix || '';
+    customOptions.tooltipLabelPrefix = tooltipsOptions.labelPrefix || '';
+    customOptions.tooltipLabelPostfix = tooltipsOptions.labelPostfix || '';
+  }
+  const defaultOptions = (0, _react.useMemo)(() => {
+    return {
+      responsive: true,
+      maintainAspectRatio: false,
+      aspectRatio: 1,
+      interaction: {
+        mode: 'nearest',
+        intersect: false
+      },
+      plugins: {
+        legend: {
+          display: customOptions.showLegend
+        },
+        tooltip: {
+          enabled: false,
+          intersect: false,
+          filter(context) {
+            return context.label !== 'null';
+          },
+          callbacks: {
+            title(context) {
+              const content = context[0] ? context[0].label.match(/(.{1,20})/g) : '';
+              return `${customOptions.tooltipTitlePrefix}${content}`;
+            },
+            label(context) {
+              const datasetLabel = context.dataset.label || '';
+              const tooltipLabel = context.dataset.tooltipLabels?.[context.dataIndex];
+              if (tooltipLabel !== undefined) {
+                return datasetLabel ? `${datasetLabel}: ${tooltipLabel}` : `${tooltipLabel}`;
+              }
+              const content = context.dataset.data[context.dataIndex].toString();
+              return datasetLabel ? `${datasetLabel}: ${customOptions.tooltipLabelPrefix}${content}${customOptions.tooltipLabelPostfix}` : `${customOptions.tooltipLabelPrefix}${content}${customOptions.tooltipLabelPostfix}`;
+            },
+            labelColor(context) {
+              const {
+                borderColor
+              } = context.dataset;
+              return {
+                borderColor,
+                backgroundColor: borderColor
+              };
+            },
+            labelTextColor(context) {
+              const {
+                color
+              } = context.dataset;
+              if (!color) {
+                return theme.fontOnPrimary;
+              }
+              if (color && Array.isArray(color)) {
+                return color[context.dataIndex % color.length];
+              }
+              return color;
+            }
+          }
+        },
+        yAxisTopTitle: {
+          title: customOptions.yAxisTopTitle
+        }
+      },
+      scales: {
+        x: {
+          grid: {
+            display: false,
+            drawBorder: false
+          }
+        },
+        y: {
+          beginAtZero: true,
+          suggestedMax: customOptions.suggestedMax,
+          grid: {
+            display: false,
+            drawBorder: false
+          },
+          ticks: {
+            callback(value) {
+              if (value % 1 === 0) {
+                return value;
+              }
+              return null;
+            }
+          }
+        }
+      },
+      layout: {
+        padding: {
+          top: 32
+        }
+      }
+    };
+  }, [customOptions, theme.fontOnPrimary]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactChartjs.Line, {
+    height: height,
+    data: data,
+    options: defaultOptions,
+    plugins: [_yAxisTopTitlePlugin.default],
+    ...props
+  });
+};
+var _default = exports.default = LineChart;

package/chart/SingleBarChart.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _backgroundColor = _interopRequireDefault(require("../styles/mixin/backgroundColor"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const SingleBarChart = _styledComponents.default.div.attrs(() => ({
+  primary: true
+}))`
+  position: relative;
+  width: 100%;
+  height: 1rem;
+  border-radius: var(--border-radius);
+  background: var(--color-background3);
+
+  &::before {
+    position: absolute;
+    content: '';
+    width: ${_ref => {
+  let {
+    percentage
+  } = _ref;
+  return percentage;
+}}%;
+    border-radius: var(--border-radius);
+    top: 0;
+    bottom: 0;
+
+    ${_backgroundColor.default}
+  }
+
+  ${_ref2 => {
+  let {
+    marginTop
+  } = _ref2;
+  return marginTop && 'margin-top: var(--spacing-s)';
+}}
+`;
+var _default = exports.default = SingleBarChart;

package/chart/index.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  BarChart: true,
+  DoughnutChart: true,
+  LineChart: true,
+  SingleBarChart: true
+};
+Object.defineProperty(exports, "BarChart", {
+  enumerable: true,
+  get: function () {
+    return _BarChart.default;
+  }
+});
+Object.defineProperty(exports, "DoughnutChart", {
+  enumerable: true,
+  get: function () {
+    return _DoughnutChart.default;
+  }
+});
+Object.defineProperty(exports, "LineChart", {
+  enumerable: true,
+  get: function () {
+    return _LineChart.default;
+  }
+});
+Object.defineProperty(exports, "SingleBarChart", {
+  enumerable: true,
+  get: function () {
+    return _SingleBarChart.default;
+  }
+});
+var _BarChart = _interopRequireDefault(require("./BarChart"));
+var _DoughnutChart = _interopRequireDefault(require("./DoughnutChart"));
+var _LineChart = _interopRequireDefault(require("./LineChart"));
+var _SingleBarChart = _interopRequireDefault(require("./SingleBarChart"));
+var _utils = require("./utils");
+Object.keys(_utils).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _utils[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _utils[key];
+    }
+  });
+});
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/chart/utils/centerTextPlugin.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _reactChartjs = require("react-chartjs-2");
+const centerTextPlugin = {
+  id: 'centerText',
+  beforeDraw: chart => {
+    const {
+      options,
+      data
+    } = chart.config;
+    const config = options.plugins.centerText;
+    if (!config || !config.display) {
+      return;
+    }
+    const {
+      ctx,
+      chartArea: {
+        top,
+        width,
+        height
+      }
+    } = chart;
+    ctx.save();
+
+    // calculate center position
+    const centerX = width / 2;
+    const centerY = height / 2 + top;
+
+    // font settings
+    const {
+      font,
+      color
+    } = _reactChartjs.defaults;
+    const {
+      family,
+      size,
+      lineHeight
+    } = font;
+    const offset = size * lineHeight / 2;
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.fillStyle = color;
+    const {
+      title
+    } = config;
+    if (title) {
+      ctx.font = `bold ${size}px ${family}`;
+      ctx.fillText(title, centerX, centerY - offset);
+    }
+    const total = data.datasets[0].data.reduce((total, current) => {
+      return total + current;
+    }, 0);
+    ctx.font = `${size}px ${family}`;
+    ctx.fillText(total.toLocaleString(), centerX, centerY + (title ? offset : 0));
+    ctx.restore();
+  }
+};
+var _default = exports.default = centerTextPlugin;

package/chart/utils/customTooltip.js

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+const customTooltip = theme => {
+  // optimize: render in react way
+  return function (context) {
+    // Tooltip Element
+    let tooltipEl = document.getElementById('chartjs-tooltip');
+
+    // Create element on first render
+    if (!tooltipEl) {
+      tooltipEl = document.createElement('div');
+      tooltipEl.id = 'chartjs-tooltip';
+      tooltipEl.innerHTML = '<table></table>';
+      document.body.appendChild(tooltipEl);
+    }
+
+    // Hide tooltip, if no tooltip or no data
+    const tooltipModel = context.tooltip;
+    if (!tooltipModel || !tooltipModel.dataPoints || !tooltipModel.dataPoints[0] || tooltipModel.opacity === 0) {
+      tooltipEl.style.display = 'none';
+      return;
+    }
+
+    // Set caret Position
+    tooltipEl.classList.remove('above', 'below', 'no-transform');
+    if (tooltipModel.yAlign) {
+      tooltipEl.classList.add(tooltipModel.yAlign);
+    } else {
+      tooltipEl.classList.add('no-transform');
+    }
+
+    // Set Text
+    if (tooltipModel.body) {
+      const titleLines = tooltipModel.title || [];
+      const bodyLines = tooltipModel.body.map(bodyItem => {
+        return bodyItem.lines || [];
+      });
+      let innerHtml = '<thead>';
+      titleLines.forEach(title => {
+        innerHtml += `<tr><th>${title}</th></tr>`;
+      });
+      innerHtml += '</thead><tbody>';
+      bodyLines.forEach(body => {
+        if (Array.isArray(body)) {
+          body.forEach(line => {
+            innerHtml += `<tr><td>${line}</td></tr>`;
+          });
+        } else {
+          innerHtml += `<tr><td>${body}</td></tr>`;
+        }
+      });
+      innerHtml += '</tbody>';
+      const tableRoot = tooltipEl.querySelector('table');
+      tableRoot.innerHTML = innerHtml;
+    }
+
+    // `this` will be the overall tooltip
+    const position = context.chart.canvas.getBoundingClientRect();
+
+    // Display, position, and set styles for font
+    tooltipEl.style.fontFamily = theme.fontFamily;
+    tooltipEl.style.fontSize = theme.fontBody1;
+    tooltipEl.style.display = 'block';
+    tooltipEl.style.position = 'absolute';
+    tooltipEl.style.boxShadow = theme.boxShadow;
+    [tooltipEl.style.color] = tooltipModel.labelTextColors;
+    tooltipEl.style.background = tooltipModel.labelColors[0].backgroundColor;
+    tooltipEl.style.borderRadius = theme.borderRadius;
+    tooltipEl.style.textAlign = 'center';
+    tooltipEl.style.padding = `${theme.spacerXS} ${theme.spacerS}`;
+    tooltipEl.style.pointerEvents = 'none';
+
+    // determine position is left or right
+    if (tooltipModel.caretX + tooltipEl.offsetWidth <= this._chart.width) {
+      tooltipEl.style.borderTopLeftRadius = 0;
+      tooltipEl.style.left = `${position.left + window.pageXOffset + tooltipModel.caretX + 8}px`;
+    } else {
+      tooltipEl.style.borderTopRightRadius = 0;
+      tooltipEl.style.left = `${position.left + window.pageXOffset + tooltipModel.caretX - tooltipModel.width - 16 * 2}px`;
+    }
+
+    // determine position is top or bottom
+    if (tooltipModel.caretY + tooltipEl.offsetHeight <= this._chart.height) {
+      tooltipEl.style.top = `${position.top + window.pageYOffset + tooltipModel.caretY + 8}px`;
+    } else {
+      tooltipEl.style.top = `${position.top + window.pageYOffset + tooltipModel.caretY - tooltipModel.width - 16 * 2}px`;
+    }
+  };
+};
+var _default = exports.default = customTooltip;

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");
+const htmlLegendPlugin = {
+  id: 'htmlLegend',
+  afterUpdate(chart, args, options) {
+    const ul = getOrCreateLegendList(chart, options.containerID);
+
+    // Remove old legend items
+    while (ul.firstChild) {
+      ul.firstChild.remove();
+    }
+
+    // Reuse the built-in legendItems generator
+    const items = chart.options.plugins.legend.labels.generateLabels(chart);
+    items.forEach(item => {
+      const 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;
+      const [dataset] = chart.data.datasets;
+      const description = dataset.descriptions ? dataset.descriptions[item.index] : '';
+      if (description) {
+        li.setAttribute('data-tooltip', description);
+        li.classList.add('custom-legend-tooltip');
+      }
+      li.onclick = () => {
+        const {
+          type
+        } = chart.config;
+        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
+      const boxSpan = document.createElement('span');
+      boxSpan.style.background = item.fillStyle;
+      boxSpan.style.borderColor = item.strokeStyle;
+      boxSpan.style.borderWidth = `${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
+      const 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' : '';
+      const text = document.createTextNode(item.text);
+      textContainer.appendChild(text);
+      li.appendChild(boxSpan);
+      li.appendChild(textContainer);
+      ul.appendChild(li);
+    });
+  }
+};
+const getOrCreateLegendList = (chart, id) => {
+  const legendContainer = document.getElementById(id);
+  let 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 = exports.default = htmlLegendPlugin;

package/chart/utils/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "customTooltip", {
+  enumerable: true,
+  get: function () {
+    return _customTooltip.default;
+  }
+});
+Object.defineProperty(exports, "htmlLegendPlugin", {
+  enumerable: true,
+  get: function () {
+    return _htmlLegendPlugin.default;
+  }
+});
+Object.defineProperty(exports, "padEmptyChartBar", {
+  enumerable: true,
+  get: function () {
+    return _padEmptyChartBar.default;
+  }
+});
+var _customTooltip = _interopRequireDefault(require("./customTooltip"));
+var _padEmptyChartBar = _interopRequireDefault(require("./padEmptyChartBar"));
+var _htmlLegendPlugin = _interopRequireDefault(require("./htmlLegendPlugin"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/chart/utils/padEmptyChartBar.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+// make chart bar seem like align left by pad empty bar at the end
+const padEmptyChartBar = {
+  id: 'padEmptyChartBar',
+  length: -1,
+  // pad empty chart bar when data less than max bar number
+  beforeUpdate(chart) {
+    this.length = -1;
+    const {
+      data,
+      options
+    } = chart.config._config;
+    const validLabels = data.labels.filter(label => label !== null);
+    const {
+      maxBarNumber
+    } = options.plugins.padEmptyChartBar;
+    for (let index = validLabels.length; index < maxBarNumber; index += 1) {
+      this.length = this.length === -1 ? index : this.length;
+      data.labels[index] = null;
+      const [datasets] = data.datasets;
+      if (datasets) {
+        datasets.data[index] = 0;
+      }
+    }
+  },
+  // prevent padded empty chart bar to be drawn
+  afterUpdate(chart) {
+    const {
+      data,
+      options
+    } = chart.config._config;
+    const {
+      maxBarNumber
+    } = options.plugins.padEmptyChartBar;
+    if (this.length === -1) {
+      // restore draw function
+      for (let index = 0; index < maxBarNumber; index += 1) {
+        // delete data.datasets[0]._meta[data.index].data[i].draw;
+      }
+    } else {
+      // prevents new charts to be drawn
+      for (let index = this.length; index < data.maxBarNumber; index += 1) {
+        data.datasets[0]._meta[data.index].data[index].draw = () => {};
+      }
+    }
+  }
+};
+var _default = exports.default = padEmptyChartBar;