@ammarkhalidfarooq/dashboard-package 0.6.122 → 0.6.124

package/dist/index.es.js

@@ -1,7 +1,7 @@
 import React, { Suspense, lazy, useState, useRef, useEffect, useMemo } from 'react';
-import { Box, Button, Menu, MenuItem, Grid, Card, CardContent, Typography, IconButton, ThemeProvider, CircularProgress, Avatar, LinearProgress, Stack, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, Skeleton } from '@mui/material';
+import { Box, Button, Menu, MenuItem, useTheme, useMediaQuery, Grid, Card, CardContent, Typography, IconButton, ThemeProvider, CircularProgress, Avatar, LinearProgress, Stack, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, Skeleton } from '@mui/material';
 import { MoreHoriz, TrendingDown, TrendingUp, MoreVert, Check, InfoOutlined, Settings, PeopleAltOutlined, RequestQuoteOutlined, PaidOutlined, PersonOutlined, IndeterminateCheckBoxOutlined, FavoriteOutlined, SearchOutlined, HighlightOff, Email } from '@mui/icons-material';
-import { createTheme, useTheme } from '@mui/material/styles';
+import { createTheme } from '@mui/material/styles';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import Grid$1 from '@mui/material/Grid';
 import Box$1 from '@mui/material/Box';
@@ -462,8 +462,9 @@ var RevenueChart = function RevenueChart(_ref) {
     _ref$showLegend = _ref.showLegend,
     showLegend = _ref$showLegend === void 0 ? true : _ref$showLegend,
     _ref$isAmount = _ref.isAmount,
-    isAmount = _ref$isAmount === void 0 ? false : _ref$isAmount;
-  var theme = useTheme();
+    isAmount = _ref$isAmount === void 0 ? false : _ref$isAmount,
+    _ref$xAxisTickAmount = _ref.xAxisTickAmount,
+    xAxisTickAmount = _ref$xAxisTickAmount === void 0 ? 5 : _ref$xAxisTickAmount;
   var isRadial = type === 'donut' || type === 'pie';
   var isCurrency = isAmount || (metric === null || metric === void 0 ? void 0 : metric.toLowerCase()) === 'revenue';
   var isPercent = (metric === null || metric === void 0 ? void 0 : metric.toLowerCase()) === 'percent';
@@ -488,7 +489,7 @@ var RevenueChart = function RevenueChart(_ref) {
         enabled: false
       }
     },
-    colors: colors || [theme.palette.primary.main, '#4B4BC2', '#7E7EE6', '#A3A3F0', '#C8C8FA'],
+    colors: colors || ['#4F46E5', '#4B4BC2', '#7E7EE6', '#A3A3F0', '#C8C8FA'],
     tooltip: {
       theme: 'light',
       y: {
@@ -559,7 +560,7 @@ var RevenueChart = function RevenueChart(_ref) {
       axisTicks: {
         show: false
       },
-      tickAmount: 5,
+      tickAmount: xAxisTickAmount,
       labels: {
         rotate: 0,
         rotateAlways: false,
@@ -657,6 +658,8 @@ var RenderChartCard = function RenderChartCard(_ref) {
     cardSx = _ref$cardSx === void 0 ? {} : _ref$cardSx,
     _ref$contentSx = _ref.contentSx,
     contentSx = _ref$contentSx === void 0 ? {} : _ref$contentSx;
+  var theme = useTheme();
+  var isMobile = useMediaQuery(theme.breakpoints.down("sm"));
   var daysLabel = "".concat(numberOfDays, " day").concat(numberOfDays === 1 ? "" : "s");
   var trendText = item.trend || "18%";
   var trendColor = getTrendColor(trendText, {
@@ -812,7 +815,7 @@ var RenderChartCard = function RenderChartCard(_ref) {
               },
               children: [{
                 label: "Paid Ads",
-                color: "#6366F1"
+                color: "#4F46E5"
               }, {
                 label: "Organic",
                 color: "#10B981"
@@ -884,7 +887,8 @@ var RenderChartCard = function RenderChartCard(_ref) {
             stacked: item.stacked,
             type: type || item.type || "area",
             colors: item.colors,
-            showLegend: !item.hideControls
+            showLegend: !item.hideControls,
+            xAxisTickAmount: isMobile ? 3 : 5
           }), item.hideControls && item.series && /*#__PURE__*/jsx(Box, {
             sx: {
               display: {
@@ -898,7 +902,7 @@ var RenderChartCard = function RenderChartCard(_ref) {
             },
             children: [{
               label: "Paid Ads",
-              color: "#6366F1"
+              color: "#4F46E5"
             }, {
               label: "Organic",
               color: "#10B981"
@@ -17925,7 +17929,7 @@ var OverallSection = function OverallSection(_ref) {
         series: series,
         categories: categories,
         stacked: true,
-        colors: ["#6366F1", "#10B981", "#06B6D4"],
+        colors: ["#4F46E5", "#10B981", "#06B6D4"],
         hideControls: true,
         stroke: {
           curve: "smooth",
@@ -17948,7 +17952,7 @@ var OverallSection = function OverallSection(_ref) {
         series: _series,
         categories: _categories,
         stacked: true,
-        colors: ["#6366F1", "#10B981", "#06B6D4"],
+        colors: ["#4F46E5", "#10B981", "#06B6D4"],
         hideControls: true
       });
     } else if (Array.isArray(netData) && netData.length > 0) {
@@ -17980,7 +17984,7 @@ var OverallSection = function OverallSection(_ref) {
         series: _series2,
         categories: _categories2,
         stacked: true,
-        colors: ["#6366F1", "#10B981", "#06B6D4"],
+        colors: ["#4F46E5", "#10B981", "#06B6D4"],
         hideControls: true
       });
     } else if (Array.isArray(donorsData) && donorsData.length > 0) {
@@ -18012,7 +18016,7 @@ var OverallSection = function OverallSection(_ref) {
         series: _series3,
         categories: _categories3,
         stacked: true,
-        colors: ["#6366F1", "#10B981", "#06B6D4"],
+        colors: ["#4F46E5", "#10B981", "#06B6D4"],
         hideControls: true
       });
     } else if (Array.isArray(roasData) && roasData.length > 0) {
@@ -18044,7 +18048,7 @@ var OverallSection = function OverallSection(_ref) {
         series: _series4,
         categories: _categories4,
         stacked: true,
-        colors: ["#6366F1", "#10B981", "#06B6D4"],
+        colors: ["#4F46E5", "#10B981", "#06B6D4"],
         hideControls: true
       });
     } else if (Array.isArray(conversionData) && conversionData.length > 0) {
@@ -18076,7 +18080,7 @@ var OverallSection = function OverallSection(_ref) {
         series: _series5,
         categories: _categories5,
         stacked: true,
-        colors: ["#6366F1", "#10B981", "#06B6D4"],
+        colors: ["#4F46E5", "#10B981", "#06B6D4"],
         hideControls: true
       });
     } else if (Array.isArray(avgData) && avgData.length > 0) {
@@ -19881,7 +19885,7 @@ var EmailSection = function EmailSection(_ref) {
             data: hasEmailOverview && openRateTrend.data.length > 0 ? openRateTrend.data : [0]
           }],
           categories: hasEmailOverview && openRateTrend.categories.length > 0 ? openRateTrend.categories : ["—"],
-          colors: ["rgb(99, 99, 230)"],
+          colors: ["#4F46E5"],
           yAxisMax: computeYAxisMax(openRateTrend.data, 5),
           yAxisTickAmount: 3
         })