@homefile/components-v2 2.36.29 → 2.37.0

package/dist/components/propertyTiles/charts/areaCharts/TrendindAreaChart.d.ts

@@ -0,0 +1,2 @@
+import { TrendingLineChartI } from '../../../../interfaces';
+export declare const TrendingAreaChart: ({ data }: TrendingLineChartI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/propertyTiles/charts/areaCharts/TrendindAreaChart.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Stack, Text } from '@chakra-ui/react';
+import { AreaChart, XAxis, YAxis, CartesianGrid, Tooltip, Area, } from 'recharts';
+import { cursorStyle, yAxisStyle, TrendingAreaChartHeader, } from '../../../../components';
+import { colors } from '../../../../theme/colors';
+export const TrendingAreaChart = ({ data = [] }) => {
+    return (_jsxs(Stack, { spacing: "base", bg: "neutral.white", p: "base", children: [_jsx(TrendingAreaChartHeader, {}), _jsxs(AreaChart, { width: 300, height: 200, data: data, margin: {
+                    left: -25,
+                    bottom: -10,
+                }, children: [_jsx("defs", { children: _jsxs("linearGradient", { id: "area-gradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: colors.blue[3] }), _jsx("stop", { offset: "100%", stopColor: colors.lightBlue[3] })] }) }), _jsx(CartesianGrid, { horizontalCoordinatesGenerator: () => [100], verticalCoordinatesGenerator: (props) => {
+                            const w = props.width + 35;
+                            const step = w / 5;
+                            return [step, step * 2, step * 3, step * 4];
+                        }, stroke: colors.lightBlue[2] }), _jsx(XAxis, { dataKey: "month", style: yAxisStyle }), _jsx(YAxis, { style: yAxisStyle }), _jsx(Tooltip, { content: CustomTooltip, cursor: cursorStyle }), _jsx(Area, { type: "monotone", dataKey: "value", fill: "url(#area-gradient)", strokeWidth: 1, strokeOpacity: 0.1 })] })] }));
+};
+const CustomTooltip = ({ active, payload }) => {
+    if (active && payload && payload.length) {
+        return (_jsx(Box, { bg: "violet.1", p: "2", borderRadius: "md", boxShadow: "md", children: _jsx(Text, { color: "neutral.white", fontWeight: "bold", fontSize: "xs", children: `$ ${payload[0].value}k` }) }));
+    }
+    return null;
+};

package/dist/components/propertyTiles/charts/areaCharts/TrendingAreaChartHeader.d.ts

@@ -0,0 +1 @@
+export declare const TrendingAreaChartHeader: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/propertyTiles/charts/areaCharts/TrendingAreaChartHeader.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { ChartLegend } from '../../../../components';
+import { Flex, Text } from '@chakra-ui/react';
+export const TrendingAreaChartHeader = () => {
+    const now = new Date();
+    const month = now.toLocaleString('en-US', { month: 'short' }).toUpperCase();
+    const year = now.getFullYear();
+    return (_jsxs(Flex, { gap: "base", justify: "space-between", children: [_jsx(Text, { fontSize: "xs", children: `${month} ${year}` }), _jsx(ChartLegend, { color: "blue.3", label: t('propertyTiles.charts.value'), textTransform: "uppercase", fontSize: "xxs" })] }));
+};

package/dist/components/propertyTiles/charts/areaCharts/index.d.ts

@@ -0,0 +1,2 @@
+export * from './TrendindAreaChart';
+export * from './TrendingAreaChartHeader';

package/dist/components/propertyTiles/charts/areaCharts/index.js

@@ -0,0 +1,2 @@
+export * from './TrendindAreaChart';
+export * from './TrendingAreaChartHeader';

package/dist/components/propertyTiles/charts/index.d.ts

@@ -1 +1,2 @@
+export * from './areaCharts';
 export * from './lineCharts';

package/dist/components/propertyTiles/charts/index.js

@@ -1 +1,2 @@
+export * from './areaCharts';
 export * from './lineCharts';

package/dist/mocks/propertyTiles/charts.d.ts

@@ -1 +1,2 @@
 export declare const lineChartData: Record<string, string | number>[];
+export declare const areaChartData: Record<string, string | number>[];

package/dist/mocks/propertyTiles/charts.js

@@ -24,3 +24,50 @@ export const lineChartData = [
         balance: 4000,
     },
 ];
+export const areaChartData = [
+    {
+        month: 'J',
+        value: 2000,
+    },
+    {
+        month: 'F',
+        value: 2100,
+    },
+    {
+        month: 'M',
+        value: 2000,
+    },
+    {
+        month: 'A',
+        value: 2300,
+    },
+    {
+        month: 'M',
+        value: 2400,
+    },
+    {
+        month: 'J',
+        value: 2200,
+    },
+    {
+        month: 'J',
+        value: 2200,
+    },
+    { month: 'A', value: 2500 },
+    {
+        month: 'S',
+        value: 2100,
+    },
+    {
+        month: 'O',
+        value: 2400,
+    },
+    {
+        month: 'N',
+        value: 2500,
+    },
+    {
+        month: 'D',
+        value: 2600,
+    },
+];

package/dist/stories/propertyTiles/TrendingAreaChart.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { TrendingLineChartI } from '../../interfaces';
+declare const _default: Meta;
+export default _default;
+export declare const TrendingAreaChartComponent: (args: TrendingLineChartI) => import("react/jsx-runtime").JSX.Element;

package/dist/stories/propertyTiles/TrendingAreaChart.stories.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '@chakra-ui/react';
+import { TrendingAreaChart } from '../../components';
+import { areaChartData as data } from '../../mocks';
+export default {
+    title: 'Components/PropertyTiles/Charts',
+    component: TrendingAreaChart,
+    args: {
+        data,
+    },
+};
+export const TrendingAreaChartComponent = (args) => {
+    return (_jsx(Box, { w: ['full', 'fit-content'], p: "base", bg: "lightGreen.1", children: _jsx(TrendingAreaChart, Object.assign({}, args)) }));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homefile/components-v2",
-  "version": "2.36.29",
+  "version": "2.37.0",
   "author": "Homefile",
   "license": "UNLICENSED",
   "typings": "dist/index.d.ts",