@cashub/ui-elv 1.0.1 → 1.0.3

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';

package/esm/chart/utils/padEmptyChartBar.js

@@ -0,0 +1,47 @@
+// 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 = () => {};
+      }
+    }
+  }
+};
+export default padEmptyChartBar;

package/esm/chart/utils/tooltipElement.js

@@ -0,0 +1,17 @@
+export const CUSTOM_TOOLTIP_ID = 'chartjs-tooltip';
+export const AXIS_TOOLTIP_ID = 'chartjs-axis-tooltip';
+export const getOrCreateTooltipEl = id => {
+  let tooltipEl = document.getElementById(id);
+  if (!tooltipEl) {
+    tooltipEl = document.createElement('div');
+    tooltipEl.id = id;
+    document.body.appendChild(tooltipEl);
+  }
+  return tooltipEl;
+};
+export const hideTooltipEl = id => {
+  const tooltipEl = document.getElementById(id);
+  if (tooltipEl) {
+    tooltipEl.style.display = 'none';
+  }
+};

package/esm/chart/utils/xAxisLabelTooltipPlugin.js

@@ -0,0 +1,101 @@
+import { AXIS_TOOLTIP_ID, getOrCreateTooltipEl, hideTooltipEl } from './tooltipElement';
+const hideTooltip = () => hideTooltipEl(AXIS_TOOLTIP_ID);
+const getTooltipEl = () => {
+  const tooltipEl = getOrCreateTooltipEl(AXIS_TOOLTIP_ID);
+  tooltipEl.style.position = 'absolute';
+  tooltipEl.style.pointerEvents = 'none';
+  tooltipEl.style.zIndex = 80;
+  tooltipEl.style.maxWidth = '50vw';
+  tooltipEl.style.wordBreak = 'break-word';
+  tooltipEl.style.whiteSpace = 'nowrap';
+  tooltipEl.style.textAlign = 'left';
+  tooltipEl.style.border = '1px solid var(--border-color)';
+  tooltipEl.style.color = 'var(--font-on-background)';
+  tooltipEl.style.background = 'var(--color-background2)';
+  tooltipEl.style.boxShadow = 'var(--box-shadow)';
+  tooltipEl.style.borderRadius = 'calc(var(--border-radius) / 2)';
+  tooltipEl.style.padding = 'var(--spacing-xs)';
+  tooltipEl.style.fontSize = 'var(--font-body1)';
+  return tooltipEl;
+};
+
+// approximate hit-box per rendered tick: stable public getPixelForTick() + chartArea,
+// not Chart.js's private _labelItems/_computeLabelItems (undocumented, version-fragile).
+//
+// Ticks are matched via xScale.ticks (the array Chart.js actually renders) rather than
+// chart.data.labels directly, because ticks.autoSkip (on by default) drops entries when
+// labels don't all fit - exactly the case this feature targets. Each rendered tick's
+// `.value` is the original index into chart.data.labels, which getPixelForTick(i) does
+// NOT return (it returns a pixel, and its `i` argument is a position in the possibly-
+// skipped ticks array, not a label index) - so the original label index must be read
+// back off ticks[i].value, not off the loop counter.
+const findHoveredTickIndex = (chart, x, y) => {
+  const xScale = chart.scales.x;
+  if (!xScale) {
+    return -1;
+  }
+  const {
+    ticks
+  } = xScale;
+  if (!ticks || ticks.length === 0) {
+    return -1;
+  }
+  const {
+    chartArea
+  } = chart;
+  if (y < chartArea.bottom || y > xScale.bottom || x < chartArea.left || x > chartArea.right) {
+    return -1;
+  }
+  const halfStep = ticks.length > 1 ? Math.abs(xScale.getPixelForTick(1) - xScale.getPixelForTick(0)) / 2 : (xScale.right - xScale.left) / 2;
+  for (let i = 0; i < ticks.length; i += 1) {
+    const tickPixel = xScale.getPixelForTick(i);
+    if (tickPixel !== null && Math.abs(x - tickPixel) <= halfStep) {
+      return ticks[i].value;
+    }
+  }
+  return -1;
+};
+const xAxisLabelTooltipPlugin = {
+  id: 'xAxisLabelTooltip',
+  afterEvent(chart, args) {
+    const config = chart.config.options.plugins.xAxisLabelTooltip;
+    if (!config || !config.enabled) {
+      hideTooltip();
+      return;
+    }
+    const {
+      event
+    } = args;
+    if (event.type === 'mouseout') {
+      hideTooltip();
+      return;
+    }
+    if (event.type !== 'mousemove') {
+      return;
+    }
+    const index = findHoveredTickIndex(chart, event.x, event.y);
+    const label = index === -1 ? undefined : chart.data.labels[index];
+    if (typeof label !== 'string' || !label) {
+      hideTooltip();
+      return;
+    }
+    const tooltipEl = getTooltipEl();
+    tooltipEl.textContent = label;
+    tooltipEl.style.display = 'block';
+    const canvasRect = chart.canvas.getBoundingClientRect();
+    // index here is the original label index (see findHoveredTickIndex), so the pixel
+    // must come from getPixelForValue(index), not getPixelForTick(index) - the latter
+    // expects a position in the (possibly autoSkip-reduced) ticks array, not a label index.
+    const tickX = chart.scales.x.getPixelForValue(index);
+    tooltipEl.style.transform = 'translateX(-50%)';
+    tooltipEl.style.left = `${canvasRect.left + window.pageXOffset + tickX}px`;
+    tooltipEl.style.top = `${canvasRect.top + window.pageYOffset + chart.chartArea.bottom + 8}px`;
+  },
+  resize() {
+    hideTooltip();
+  },
+  afterDestroy() {
+    hideTooltip();
+  }
+};
+export default xAxisLabelTooltipPlugin;

package/esm/chart/utils/yAxisTopTitlePlugin.js

@@ -0,0 +1,43 @@
+import { defaults } from 'react-chartjs-2';
+const yAxisTopTitlePlugin = {
+  id: 'yAxisTopTitle',
+  afterDraw(chart) {
+    const {
+      options
+    } = chart.config;
+    const config = options.plugins.yAxisTopTitle;
+    if (!config || !config.title) {
+      return;
+    }
+    const {
+      title
+    } = config;
+    const {
+      ctx,
+      chartArea,
+      scales
+    } = chart;
+    const yScale = scales.y;
+    if (!yScale) {
+      return;
+    }
+    ctx.save();
+    const {
+      font,
+      color
+    } = defaults;
+    const {
+      family,
+      size
+    } = font;
+    ctx.font = `bold ${size}px ${family}`;
+    ctx.fillStyle = color;
+    ctx.textAlign = 'left';
+    ctx.textBaseline = 'middle';
+    const x = yScale.left;
+    const y = chartArea.top - 24;
+    ctx.fillText(title, x, y);
+    ctx.restore();
+  }
+};
+export default yAxisTopTitlePlugin;

package/esm/container/FlexContainer.js

@@ -0,0 +1,33 @@
+import styled from 'styled-components';
+const FlexContainer = styled.div`
+  display: flex;
+
+  ${_ref => {
+  let {
+    marginBottom
+  } = _ref;
+  return marginBottom && 'margin-bottom: var(--spacing-l)';
+}};
+
+  ${_ref2 => {
+  let {
+    wrap
+  } = _ref2;
+  return wrap && 'flex-wrap: wrap';
+}};
+
+  ${_ref3 => {
+  let {
+    alignCenter
+  } = _ref3;
+  return alignCenter && 'align-items: center;';
+}}
+
+  ${_ref4 => {
+  let {
+    spaceBetween
+  } = _ref4;
+  return spaceBetween && 'justify-content: space-between;';
+}}
+`;
+export default FlexContainer;

package/esm/container/index.js

@@ -0,0 +1 @@
+export { default as FlexContainer } from './FlexContainer';