@cashub/ui-elv 1.0.2 → 1.0.4

package/esm/chart/BarChart.js

@@ -0,0 +1,147 @@
+import { useContext, useMemo } from 'react';
+import { ThemeContext } from 'styled-components';
+import { Bar, defaults } from 'react-chartjs-2';
+import customTooltip from './utils/customTooltip';
+import customTooltipLifecyclePlugin from './utils/customTooltipLifecyclePlugin';
+import padEmptyChartBar from './utils/padEmptyChartBar';
+import yAxisTopTitlePlugin from './utils/yAxisTopTitlePlugin';
+import xAxisLabelTooltipPlugin from './utils/xAxisLabelTooltipPlugin';
+import { jsx as _jsx } from "react/jsx-runtime";
+const BarChart = _ref => {
+  let {
+    height = 300,
+    data,
+    options = {},
+    ...props
+  } = _ref;
+  const theme = useContext(ThemeContext);
+
+  // fix: read value from theme
+  defaults.font.family = theme.fontFamily;
+  defaults.font.size = 16;
+  defaults.color = theme.fontOnBg;
+  defaults.plugins.tooltip.external = customTooltip(theme);
+  const customOptions = useMemo(() => {
+    const {
+      yAxisTopTitle,
+      tooltips = {}
+    } = options;
+    return {
+      onlyFirstTooltips: options.onlyFirstTooltips === undefined ? true : options.onlyFirstTooltips,
+      maxBarNumber: options.maxBarNumber === undefined ? 5 : options.maxBarNumber,
+      stacked: options.stacked === undefined ? true : options.stacked,
+      suggestedMax: options.suggestedMax === undefined ? 10 : options.suggestedMax,
+      showLegend: options.showLegend === undefined ? false : options.showLegend,
+      rotateLabel: options.rotateLabel === undefined ? true : options.rotateLabel,
+      yAxisTopTitle: yAxisTopTitle ? yAxisTopTitle : '',
+      tooltipLabelPostfix: tooltips.labelPostfix || '',
+      showFullLabelOnHover: options.showFullLabelOnHover === undefined ? false : options.showFullLabelOnHover
+    };
+  }, [options]);
+  const defaultOptions = useMemo(() => {
+    return {
+      responsive: true,
+      maintainAspectRatio: false,
+      aspectRatio: 1,
+      interaction: {
+        mode: 'nearest',
+        intersect: false
+      },
+      plugins: {
+        padEmptyChartBar: {
+          maxBarNumber: customOptions.maxBarNumber
+        },
+        legend: {
+          position: 'bottom',
+          display: customOptions.showLegend
+        },
+        tooltip: {
+          enabled: false,
+          intersect: false,
+          filter(context) {
+            return !customOptions.onlyFirstTooltips || context.datasetIndex === 0 && context.label !== 'null';
+          },
+          callbacks: {
+            title(context) {
+              return context[0] ? context[0].label.match(/(.{1,20})/g) : '';
+            },
+            label(context) {
+              const tooltipLabel = context.dataset.tooltipLabels?.[context.dataIndex];
+              if (tooltipLabel !== undefined) {
+                return `${context.dataset.label}: ${tooltipLabel}`;
+              }
+              const label = context.dataset.data[context.dataIndex];
+              if (context.dataset.customLabel) {
+                return context.dataset.customLabel[context.dataIndex].toString();
+              }
+              return `${context.dataset.label}: ${label.toString()}${customOptions.tooltipLabelPostfix}`;
+            },
+            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
+        },
+        xAxisLabelTooltip: {
+          enabled: customOptions.showFullLabelOnHover
+        }
+      },
+      scales: {
+        x: {
+          stacked: customOptions.stacked,
+          grid: {
+            display: false,
+            drawBorder: false
+          },
+          ticks: {
+            minRotation: customOptions.rotateLabel ? 15 : 0,
+            callback(value) {
+              const label = this.getLabelForValue(value);
+              return label && label.length > 11 ? `${label.substr(0, 11)}...` : label;
+            }
+          }
+        },
+        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__*/_jsx(Bar, {
+    height: height,
+    data: data,
+    options: defaultOptions,
+    plugins: [padEmptyChartBar, yAxisTopTitlePlugin, xAxisLabelTooltipPlugin, customTooltipLifecyclePlugin],
+    ...props
+  });
+};
+export default BarChart;

package/esm/chart/DoughnutChart.js

@@ -0,0 +1,110 @@
+import { useContext, useMemo, useState } from 'react';
+import styled, { ThemeContext } from 'styled-components';
+import { Doughnut, defaults } from 'react-chartjs-2';
+import uniqueId from 'lodash.uniqueid';
+import htmlLegendPlugin from './utils/htmlLegendPlugin';
+import customTooltip from './utils/customTooltip';
+import customTooltipLifecyclePlugin from './utils/customTooltipLifecyclePlugin';
+import centerTextPlugin from './utils/centerTextPlugin';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const DoughnutChart = _ref => {
+  let {
+    height = 300,
+    data,
+    showCenterText = false,
+    centerTextTitle,
+    ...props
+  } = _ref;
+  const [legendContainerId] = useState(uniqueId('legend-container-'));
+  const theme = useContext(ThemeContext);
+
+  // fix: read value from theme
+  defaults.font.family = theme.fontFamily;
+  defaults.font.size = 16;
+  defaults.color = theme.fontOnBg;
+  defaults.plugins.tooltip.external = customTooltip(theme);
+  const defaultOptions = 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__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("div", {
+      children: /*#__PURE__*/_jsx(Doughnut, {
+        height: height,
+        data: data,
+        options: defaultOptions,
+        plugins: [htmlLegendPlugin, centerTextPlugin, customTooltipLifecyclePlugin],
+        ...props
+      })
+    }), /*#__PURE__*/_jsx(LegendWrapper, {
+      id: legendContainerId
+    })]
+  });
+};
+const LegendWrapper = styled.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;
+  }
+`;
+export default DoughnutChart;

package/esm/chart/LineChart.js

@@ -0,0 +1,140 @@
+import { useContext, useMemo } from 'react';
+import { ThemeContext } from 'styled-components';
+import { Line, defaults } from 'react-chartjs-2';
+import customTooltip from './utils/customTooltip';
+import customTooltipLifecyclePlugin from './utils/customTooltipLifecyclePlugin';
+import yAxisTopTitlePlugin from './utils/yAxisTopTitlePlugin';
+import { jsx as _jsx } from "react/jsx-runtime";
+const LineChart = _ref => {
+  let {
+    height = 300,
+    data,
+    options = {},
+    ...props
+  } = _ref;
+  const theme = useContext(ThemeContext);
+
+  // fix: read value from theme
+  defaults.font.family = theme.fontFamily;
+  defaults.font.size = 16;
+  defaults.color = theme.fontOnBg;
+  defaults.plugins.tooltip.external = customTooltip(theme);
+  const customOptions = 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 = 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__*/_jsx(Line, {
+    height: height,
+    data: data,
+    options: defaultOptions,
+    plugins: [yAxisTopTitlePlugin, customTooltipLifecyclePlugin],
+    ...props
+  });
+};
+export default LineChart;

package/esm/chart/SingleBarChart.js

@@ -0,0 +1,35 @@
+import styled from 'styled-components';
+import backgroundColor from '../styles/mixin/backgroundColor';
+const SingleBarChart = styled.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}
+  }
+
+  ${_ref2 => {
+  let {
+    marginTop
+  } = _ref2;
+  return marginTop && 'margin-top: var(--spacing-s)';
+}}
+`;
+export default SingleBarChart;

package/esm/chart/index.js

@@ -0,0 +1,5 @@
+export { default as BarChart } from './BarChart';
+export { default as DoughnutChart } from './DoughnutChart';
+export { default as LineChart } from './LineChart';
+export { default as SingleBarChart } from './SingleBarChart';
+export * from './utils';

package/esm/chart/utils/centerTextPlugin.js

@@ -0,0 +1,56 @@
+import { defaults } from '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
+    } = 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();
+  }
+};
+export default centerTextPlugin;

package/esm/chart/utils/customTooltip.js

@@ -0,0 +1,84 @@
+import { CUSTOM_TOOLTIP_ID, getOrCreateTooltipEl } from './tooltipElement';
+const customTooltip = theme => {
+  // optimize: render in react way
+  return function (context) {
+    // Tooltip Element
+    const tooltipEl = getOrCreateTooltipEl(CUSTOM_TOOLTIP_ID);
+    if (!tooltipEl.querySelector('table')) {
+      tooltipEl.innerHTML = '<table></table>';
+    }
+
+    // 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`;
+    }
+  };
+};
+export default customTooltip;

package/esm/chart/utils/customTooltipLifecyclePlugin.js

@@ -0,0 +1,16 @@
+import { CUSTOM_TOOLTIP_ID, hideTooltipEl } from './tooltipElement';
+
+// customTooltip.js renders #chartjs-tooltip outside React's tree (appended to
+// document.body), so it needs an explicit hook to hide it when the chart's
+// container resizes or the chart instance is destroyed - otherwise the last
+// rendered tooltip is left floating, detached from the (moved/gone) chart.
+const customTooltipLifecyclePlugin = {
+  id: 'customTooltipLifecycle',
+  resize() {
+    hideTooltipEl(CUSTOM_TOOLTIP_ID);
+  },
+  afterDestroy() {
+    hideTooltipEl(CUSTOM_TOOLTIP_ID);
+  }
+};
+export default customTooltipLifecyclePlugin;

package/esm/chart/utils/htmlLegendPlugin.js

@@ -0,0 +1,83 @@
+import { defaults } from '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 = 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;
+};
+export default htmlLegendPlugin;

package/esm/chart/utils/index.js

@@ -0,0 +1,3 @@
+export { default as customTooltip } from './customTooltip';
+export { default as padEmptyChartBar } from './padEmptyChartBar';
+export { default as htmlLegendPlugin } from './htmlLegendPlugin';