@cashub/ui 0.49.0-beta.0 → 0.49.0-beta.2

package/src/chart/BarChart.js

@@ -1,158 +0,0 @@
-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

@@ -1,118 +0,0 @@
-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

@@ -1,151 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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

@@ -1,63 +0,0 @@
-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

@@ -1,75 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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';