@cashub/ui 0.48.28 → 0.49.0-beta.0

package/src/callout/index.js

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

package/src/chart/BarChart.js

@@ -0,0 +1,158 @@
+import { useContext, useMemo } from 'react';
+import { ThemeContext } from 'styled-components';
+import { Bar, defaults } from 'react-chartjs-2';
+import customTooltip from './utils/customTooltip';
+import padEmptyChartBar from './utils/padEmptyChartBar';
+import yAxisTopTitlePlugin from './utils/yAxisTopTitlePlugin';
+
+const BarChart = ({ 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(() => {
+    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 || '',
+    };
+  }, [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,
+        },
+      },
+      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 (
+    <Bar
+      height={height}
+      data={data}
+      options={defaultOptions}
+      plugins={[padEmptyChartBar, yAxisTopTitlePlugin]}
+      {...props}
+    />
+  );
+};
+
+export default BarChart;

package/src/chart/DoughnutChart.js

@@ -0,0 +1,118 @@
+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 centerTextPlugin from './utils/centerTextPlugin';
+
+const DoughnutChart = ({
+  height = 300,
+  data,
+  showCenterText = false,
+  centerTextTitle,
+  ...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;
+            },
+          },
+        },
+        centerText: {
+          display: showCenterText,
+          title: centerTextTitle,
+        },
+      },
+    };
+  }, [legendContainerId, theme.fontOnPrimary, showCenterText, centerTextTitle]);
+
+  return (
+    <>
+      <div>
+        <Doughnut
+          height={height}
+          data={data}
+          options={defaultOptions}
+          plugins={[htmlLegendPlugin, centerTextPlugin]}
+          {...props}
+        />
+      </div>
+
+      <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/src/chart/LineChart.js

@@ -0,0 +1,151 @@
+import { useContext, useMemo } from 'react';
+import { ThemeContext } from 'styled-components';
+import { Line, defaults } from 'react-chartjs-2';
+import customTooltip from './utils/customTooltip';
+import yAxisTopTitlePlugin from './utils/yAxisTopTitlePlugin';
+
+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(() => {
+    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 (
+    <Line
+      height={height}
+      data={data}
+      options={defaultOptions}
+      plugins={[yAxisTopTitlePlugin]}
+      {...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,56 @@
+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,
+    yAxisTopTitle: 'MB',
+    tooltips: { labelPostfix: ' MB' },
+  };
+
+  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,63 @@
+import DoughnutChart from '../DoughnutChart';
+
+const metadata = {
+  title: 'Chart/DoughnutChart',
+  component: DoughnutChart,
+  argTypes: {
+    data: {
+      description: 'chart data',
+    },
+    showCenterText: {
+      name: 'Show Center Text',
+      description:
+        'Determines whether to display a custom label and total value in the center of the doughnut chart.',
+      table: {
+        category: 'Custom Plugins',
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+      control: {
+        type: 'boolean',
+      },
+    },
+    centerTextTitle: {
+      name: 'Center Text Title',
+      description:
+        'The custom label displayed above the total value (e.g., "Total", "Inventory"). Only visible when showCenterText is true.',
+      table: {
+        category: 'Custom Plugins',
+        type: { summary: 'string' },
+        defaultValue: { summary: 'Total' },
+      },
+      control: {
+        type: 'text',
+      },
+      if: { arg: 'showCenterText', eq: true },
+    },
+  },
+};
+
+const Template = (args) => {
+  const chart = {
+    datasets: [
+      {
+        backgroundColor: ['#597EF7', '#11D8CD'],
+        descriptions: ['Remaining resources', 'The quantity of resources used'],
+        data: [5004, 5004],
+      },
+    ],
+    labels: ['Balance', 'Used'],
+  };
+
+  return <DoughnutChart {...args} data={chart} />;
+};
+
+const Default = Template.bind({});
+Default.args = {
+  height: 300,
+  showCenterText: true,
+  centerTextTitle: 'Total',
+};
+
+export default metadata;
+export { Default };

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

@@ -0,0 +1,75 @@
+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,
+    yAxisTopTitle: 'MB',
+    tooltips: { labelPostfix: ' MB' },
+  };
+
+  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';