@xfers/design-system 2.3.1 → 2.4.0

package/dist/components/Chart/index.js

@@ -0,0 +1,105 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var chart_js_1 = require("chart.js");
+var react_chartjs_2_1 = require("react-chartjs-2");
+chart_js_1.Chart.register(chart_js_1.CategoryScale, chart_js_1.LinearScale, chart_js_1.PointElement, chart_js_1.LineElement, chart_js_1.Tooltip, chart_js_1.Legend, chart_js_1.Filler);
+var CustomChart = function (_a) {
+    var xValues = _a.xValues, yValues = _a.yValues, dataPrefix = _a.dataPrefix, _b = _a.height, height = _b === void 0 ? 267 : _b;
+    var chartRef = react_1.useRef(null);
+    var _c = react_1.useState({
+        datasets: []
+    }), chartData = _c[0], setChartData = _c[1];
+    var data = {
+        labels: xValues,
+        datasets: [
+            {
+                data: yValues
+            }
+        ]
+    };
+    var prefix = dataPrefix || '';
+    react_1.useEffect(function () {
+        var chart = chartRef.current;
+        if (!chart) {
+            return;
+        }
+        var context = chart.ctx;
+        var gradient = context.createLinearGradient(0, 0, 0, 200);
+        gradient.addColorStop(0, 'rgba(47, 141, 238, 0.09)');
+        gradient.addColorStop(1, 'rgba(47, 141, 238, 0)');
+        var chartData = __assign(__assign({}, data), { datasets: data.datasets.map(function (dataset) { return (__assign(__assign({}, dataset), { backgroundColor: gradient, fill: true, borderColor: '#2E8DEE', pointRadius: 0 })); }) });
+        setChartData(chartData);
+    }, []);
+    var options = {
+        maintainAspectRatio: false,
+        plugins: {
+            legend: {
+                display: false,
+                labels: {
+                    font: {
+                        family: "'Inter', 'Arial', sans-serif"
+                    }
+                }
+            },
+            tooltip: {
+                intersect: false,
+                padding: 15,
+                displayColors: false,
+                titleAlign: 'center',
+                bodyAlign: 'center',
+                titleFont: {
+                    size: 14
+                },
+                bodyFont: {
+                    size: 14
+                },
+                callbacks: {
+                    label: function (data) {
+                        var label = data.dataset.label || '';
+                        if (data.parsed.y !== null) {
+                            label += "" + prefix + data.parsed.y;
+                        }
+                        return label;
+                    }
+                }
+            }
+        },
+        scales: {
+            x: {
+                ticks: {
+                    color: 'rgba(0, 0, 0, 0.4)'
+                },
+                grid: {
+                    display: false
+                }
+            },
+            y: {
+                ticks: {
+                    maxTicksLimit: 3,
+                    padding: 20,
+                    color: 'rgba(0, 0, 0, 0.4)',
+                    callback: function (label) { return "" + prefix + label; }
+                },
+                grid: {
+                    display: false,
+                    drawBorder: false
+                }
+            }
+        }
+    };
+    return (react_1.default.createElement(react_chartjs_2_1.Chart, { id: "chart", ref: chartRef, type: "line", data: chartData, options: options, height: height }));
+};
+exports.default = CustomChart;
+//# sourceMappingURL=index.js.map

package/dist/components/Chart/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Chart/index.tsx"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -25,6 +25,8 @@ var BadgeIcon_1 = require("src/components/BadgeIcon");
 Object.defineProperty(exports, "BadgeIcon", { enumerable: true, get: function () { return BadgeIcon_1.default; } });
 var Card_1 = require("src/components/Card");
 Object.defineProperty(exports, "Card", { enumerable: true, get: function () { return Card_1.default; } });
+var Chart_1 = require("src/components/Chart");
+Object.defineProperty(exports, "Chart", { enumerable: true, get: function () { return Chart_1.default; } });
 var Carousel_1 = require("src/components/Carousel");
 Object.defineProperty(exports, "Carousel", { enumerable: true, get: function () { return Carousel_1.default; } });
 var Dropdown_1 = require("src/components/Dropdown");

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/types/components/Chart/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+declare type ChartProps = {
+    xValues: number[] | string[];
+    yValues: number[];
+    dataPrefix?: string;
+    height?: number;
+};
+declare const CustomChart: ({ xValues, yValues, dataPrefix, height }: ChartProps) => JSX.Element;
+export default CustomChart;

package/dist/types/index.d.ts

@@ -4,6 +4,7 @@ export { default as ActionCard } from 'src/components/ActionCard';
 export { default as Accordion } from 'src/components/Accordion';
 export { default as BadgeIcon } from 'src/components/BadgeIcon';
 export { default as Card } from 'src/components/Card';
+export { default as Chart } from 'src/components/Chart';
 export { default as Carousel } from 'src/components/Carousel';
 export { default as Dropdown } from 'src/components/Dropdown';
 export { default as DynamicSelect } from 'src/components/DynamicSelect';