@cashub/ui 0.22.8 → 0.22.9

package/src/chart/DoughnutChart.js

@@ -0,0 +1,82 @@
+import { useContext, useMemo, useState } from 'react';
+import { 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';
+
+const DoughnutChart = ({ height = 300, data, ...props }) => {
+  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;
+            },
+          },
+        },
+      },
+    };
+  }, [legendContainerId, theme.fontOnPrimary]);
+
+  return (
+    <>
+      <div>
+        <Doughnut
+          height={height}
+          data={data}
+          options={defaultOptions}
+          plugins={[htmlLegendPlugin]}
+          {...props}
+        />
+      </div>
+
+      <div id={legendContainerId}></div>
+    </>
+  );
+};
+
+export default DoughnutChart;

package/src/chart/LineChart.js

@@ -0,0 +1,114 @@
+import { useContext, useMemo } from 'react';
+import { ThemeContext } from 'styled-components';
+import { Line, defaults } from 'react-chartjs-2';
+import customTooltip from './utils/customTooltip';
+
+const LineChart = ({ height = 300, data, options = {}, ...props }) => {
+  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(() => {
+    return {
+      suggestedMax: options.suggestedMax ? options.suggestedMax : 10,
+      tooltipTitlePrefix: '',
+      tooltipLabelPrefix: '',
+    };
+  }, [options]);
+
+  if (options.tooltips) {
+    const tooltipsOptions = options.tooltips;
+    customOptions.tooltipTitlePrefix = tooltipsOptions.titlePrefix || '';
+    customOptions.tooltipLabelPrefix = tooltipsOptions.labelPrefix || '';
+  }
+
+  const defaultOptions = useMemo(() => {
+    return {
+      responsive: true,
+      maintainAspectRatio: false,
+      aspectRatio: 1,
+      plugins: {
+        legend: {
+          display: false,
+        },
+        tooltip: {
+          enabled: false,
+          intersect: false,
+          filter(context) {
+            return context.datasetIndex === 0 && context.label !== 'null';
+          },
+          callbacks: {
+            title(context) {
+              const content = context[0]
+                ? context[0].label.match(/(.{1,20})/g)
+                : '';
+
+              return `${customOptions.tooltipTitlePrefix}${content}`;
+            },
+            label(context) {
+              const content =
+                context.dataset.data[context.dataIndex].toString();
+
+              return `${customOptions.tooltipLabelPrefix}${content}`;
+            },
+            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;
+            },
+          },
+        },
+      },
+      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;
+            },
+          },
+        },
+      },
+    };
+  }, [customOptions, theme.fontOnPrimary]);
+
+  return (
+    <Line height={height} data={data} options={defaultOptions} {...props} />
+  );
+};
+
+export default LineChart;

package/src/chart/SingleBarChart.js

@@ -0,0 +1,27 @@
+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: ${({ percentage }) => percentage}%;
+    border-radius: var(--border-radius);
+    top: 0;
+    bottom: 0;
+
+    ${backgroundColor}
+  }
+
+  ${({ marginTop }) => marginTop && 'margin-top: var(--spacing-s)'}
+`;
+
+export default SingleBarChart;

package/src/chart/__stories__/BarChart.stories.js

@@ -0,0 +1,54 @@
+import BarChart from '../BarChart';
+
+const metadata = {
+  title: 'Chart/BarChart',
+  component: BarChart,
+  argTypes: {
+    data: {
+      description: 'chart data',
+    },
+    options: {
+      description: "It can set options for chart, it's optional",
+    },
+  },
+};
+
+const Template = (args) => {
+  const chart = {
+    datasets: [
+      {
+        backgroundColor: '#597EF7',
+        borderWidth: 0,
+        data: [1, 1, 1, 5000, 1],
+        maxBarThickness: 50,
+        minBarLength: 1,
+      },
+      {
+        backgroundColor: '#597EF7',
+        borderWidth: 0,
+        maxBarThickness: 50,
+        minBarLength: 1,
+      },
+    ],
+    labels: ['TEST', 'test_220503', 'TEST2', 'shenny_Enterprise', 'qqq'],
+  };
+  const options = {
+    maxBarNumber: 5,
+    onlyFirstTooltips: true,
+    stacked: true,
+  };
+
+  return (
+    <>
+      <BarChart {...args} data={chart} options={options} />
+    </>
+  );
+};
+
+const Default = Template.bind({});
+Default.args = {
+  height: 300,
+};
+
+export default metadata;
+export { Default };

package/src/chart/__stories__/DoughnutChart.stories.js

@@ -0,0 +1,33 @@
+import DoughnutChart from '../DoughnutChart';
+
+const metadata = {
+  title: 'Chart/DoughnutChart',
+  component: DoughnutChart,
+  argTypes: {
+    data: {
+      description: 'chart data',
+    },
+  },
+};
+
+const Template = (args) => {
+  const chart = {
+    datasets: [
+      {
+        backgroundColor: ['#597EF7', '#11D8CD'],
+        data: [-5004, 5004],
+      },
+    ],
+    labels: ['Balance', 'Used'],
+  };
+
+  return <DoughnutChart {...args} data={chart} />;
+};
+
+const Default = Template.bind({});
+Default.args = {
+  height: 300,
+};
+
+export default metadata;
+export { Default };

package/src/chart/__stories__/LineChart.stories.js

@@ -0,0 +1,73 @@
+import LineChart from '../LineChart';
+
+const metadata = {
+  title: 'Chart/LineChart',
+  component: LineChart,
+  argTypes: {
+    data: {
+      description: 'chart data',
+    },
+    options: {
+      description: "It can set options for chart, it's optional",
+    },
+  },
+};
+
+const Template = (args) => {
+  const chart = {
+    datasets: [
+      {
+        backgroundColor: 'rgba(89, 126, 247, 0.2)',
+        borderColor: '#597EF7',
+        borderWidth: 2,
+        data: [
+          0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+          0, 0, 0, 0, 0, 0, 0,
+        ],
+        fill: true,
+        pointBackgroundColor: '#13142e',
+        pointBorderWidth: 4,
+      },
+    ],
+    labels: [
+      '2022-05-28',
+      '2022-05-29',
+      '2022-05-30',
+      '2022-05-31',
+      '2022-06-01',
+      '2022-06-02',
+      '2022-06-03',
+      '2022-06-04',
+      '2022-06-05',
+      '2022-06-06',
+      '2022-06-07',
+      '2022-06-08',
+      '2022-06-09',
+      '2022-06-10',
+      '2022-06-11',
+      '2022-06-12',
+      '2022-06-13',
+      '2022-06-14',
+      '2022-06-15',
+      '2022-06-16',
+      '2022-06-17',
+    ],
+  };
+  const options = {
+    suggestedMax: 10,
+  };
+
+  return (
+    <>
+      <LineChart {...args} data={chart} options={options} />
+    </>
+  );
+};
+
+const Default = Template.bind({});
+Default.args = {
+  height: 300,
+};
+
+export default metadata;
+export { Default };

package/src/chart/__stories__/SingleBarChart.stories.js

@@ -0,0 +1,22 @@
+import SingleBarChart from '../SingleBarChart';
+
+const metadata = {
+  title: 'Chart/SingleBarChart',
+  component: SingleBarChart,
+};
+
+const Template = (args) => {
+  return <SingleBarChart {...args} />;
+};
+
+const Default = Template.bind({});
+Default.args = {
+  percentage: 50,
+  success: false,
+  warning: false,
+  danger: false,
+  marginTop: false,
+};
+
+export default metadata;
+export { Default };

package/src/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/src/chart/utils/customTooltip.js

@@ -0,0 +1,108 @@
+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) => {
+        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/src/chart/utils/htmlLegendPlugin.js

@@ -0,0 +1,88 @@
+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;
+
+      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/src/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/src/chart/utils/padEmptyChartBar.js

@@ -0,0 +1,37 @@
+// 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;
+      data.datasets[0].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/src/container/FlexContainer.js

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+const FlexContainer = styled.div`
+  display: flex;
+
+  ${({ marginBottom }) => marginBottom && 'margin-bottom: var(--spacing-l)'};
+
+  ${({ wrap }) => wrap && 'flex-wrap: wrap'};
+
+  ${({ alignCenter }) => alignCenter && 'align-items: center;'}
+`;
+
+export default FlexContainer;