@cashub/ui 0.48.0 → 0.48.2

package/chart/LineChart.js

@@ -8,6 +8,7 @@ var _react = require("react");
 var _styledComponents = require("styled-components");
 var _reactChartjs = require("react-chartjs-2");
 var _customTooltip = _interopRequireDefault(require("./utils/customTooltip"));
+var _yAxisTopTitlePlugin = _interopRequireDefault(require("./utils/yAxisTopTitlePlugin"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const LineChart = _ref => {
@@ -25,17 +26,23 @@ const LineChart = _ref => {
   _reactChartjs.defaults.color = theme.fontOnBg;
   _reactChartjs.defaults.plugins.tooltip.external = (0, _customTooltip.default)(theme);
   const customOptions = (0, _react.useMemo)(() => {
+    const {
+      yAxisTopTitle
+    } = options;
     return {
       suggestedMax: options.suggestedMax ? options.suggestedMax : 10,
       tooltipTitlePrefix: '',
       tooltipLabelPrefix: '',
-      showLegend: options.showLegend === undefined ? false : options.showLegend
+      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 = (0, _react.useMemo)(() => {
     return {
@@ -59,7 +66,7 @@ const LineChart = _ref => {
             },
             label(context) {
               const content = context.dataset.data[context.dataIndex].toString();
-              return `${customOptions.tooltipLabelPrefix}${content}`;
+              return `${customOptions.tooltipLabelPrefix}${content}${customOptions.tooltipLabelPostfix}`;
             },
             labelColor(context) {
               const {
@@ -83,6 +90,9 @@ const LineChart = _ref => {
               return color;
             }
           }
+        },
+        yAxisTopTitle: {
+          title: customOptions.yAxisTopTitle
         }
       },
       scales: {
@@ -108,6 +118,11 @@ const LineChart = _ref => {
             }
           }
         }
+      },
+      layout: {
+        padding: {
+          top: 32
+        }
       }
     };
   }, [customOptions, theme.fontOnPrimary]);
@@ -115,6 +130,7 @@ const LineChart = _ref => {
     height: height,
     data: data,
     options: defaultOptions,
+    plugins: [_yAxisTopTitlePlugin.default],
     ...props
   });
 };

package/chart/utils/yAxisTopTitlePlugin.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _reactChartjs = require("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
+    } = _reactChartjs.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();
+  }
+};
+var _default = exports.default = yAxisTopTitlePlugin;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cashub/ui",
-  "version": "0.48.0",
+  "version": "0.48.2",
   "private": false,
   "author": "CasHUB Team",
   "description": "CasHUB UI components library",

package/select/subComponent/SelectedMultipleText.js

@@ -48,6 +48,7 @@ const SelectedMultipleText = _ref => {
   });
 };
 const Text = _styledComponents.default.span`
+  color: var(--font-on-background);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;