@ammarkhalidfarooq/dashboard-package 0.5.39 → 0.6.0

package/dist/RenderChartCard.es.js

@@ -0,0 +1,667 @@
+import { Box, Button, Menu, MenuItem, Grid, Card, CardContent, Typography, IconButton } from '@mui/material';
+import React from 'react';
+import ReactApexChart from 'react-apexcharts';
+import { useTheme } from '@mui/material/styles';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { MoreHoriz } from '@mui/icons-material';
+
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+function _arrayWithHoles(r) {
+  if (Array.isArray(r)) return r;
+}
+function _defineProperty(e, r, t) {
+  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: true,
+    configurable: true,
+    writable: true
+  }) : e[r] = t, e;
+}
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = true,
+      o = false;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l) ; else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = true, n = r;
+    } finally {
+      try {
+        if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
+    }
+    return a;
+  }
+}
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function ownKeys(e, r) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
+}
+function _objectSpread2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), true).forEach(function (r) {
+      _defineProperty(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+    });
+  }
+  return e;
+}
+function _slicedToArray(r, e) {
+  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
+}
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r);
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _typeof(o) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+    return typeof o;
+  } : function (o) {
+    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+  }, _typeof(o);
+}
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
+}
+
+var RevenueChart = function RevenueChart(_ref) {
+  var metric = _ref.metric,
+    data = _ref.data,
+    series = _ref.series,
+    categories = _ref.categories,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 350 : _ref$height,
+    _ref$stacked = _ref.stacked,
+    stacked = _ref$stacked === void 0 ? false : _ref$stacked,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? "area" : _ref$type,
+    _ref$id = _ref.id,
+    id = _ref$id === void 0 ? "revenue-chart" : _ref$id,
+    colors = _ref.colors,
+    _ref$showLegend = _ref.showLegend,
+    showLegend = _ref$showLegend === void 0 ? true : _ref$showLegend;
+  var theme = useTheme();
+  var isRadial = type === 'donut' || type === 'pie';
+
+  // Base options common to all charts
+  var baseOptions = {
+    chart: {
+      id: id,
+      type: type,
+      toolbar: {
+        show: false
+      },
+      sparkline: {
+        enabled: false
+      },
+      animations: {
+        enabled: false
+      }
+    },
+    colors: colors || [theme.palette.primary.main, '#4B4BC2', '#7E7EE6', '#A3A3F0', '#C8C8FA'],
+    tooltip: {
+      theme: 'light',
+      y: {
+        formatter: function formatter(value) {
+          return (metric === null || metric === void 0 ? void 0 : metric.toLowerCase()) === 'revenue' ? "$".concat((value || 0).toLocaleString()) : value || 0;
+        }
+      }
+    }
+  };
+  var radialOptions = _objectSpread2(_objectSpread2({}, baseOptions), {}, {
+    labels: categories || [],
+    stroke: {
+      width: 0
+    },
+    dataLabels: {
+      enabled: true
+    },
+    legend: {
+      show: showLegend,
+      position: 'bottom',
+      horizontalAlign: 'center'
+    },
+    plotOptions: {
+      pie: {
+        donut: {
+          size: '70%',
+          labels: {
+            show: true,
+            total: {
+              show: true,
+              label: 'Total',
+              formatter: function formatter(w) {
+                var sum = w.globals.seriesTotals.reduce(function (a, b) {
+                  return a + b;
+                }, 0);
+                return metric === 'Revenue' ? "$".concat(Math.round(sum).toLocaleString()) : Math.round(sum).toLocaleString();
+              }
+            }
+          }
+        }
+      }
+    }
+  });
+  var linearOptions = _objectSpread2(_objectSpread2({}, baseOptions), {}, {
+    chart: _objectSpread2(_objectSpread2({}, baseOptions.chart), {}, {
+      stacked: stacked
+    }),
+    stroke: {
+      curve: 'smooth',
+      width: type === 'bar' ? 0 : 2
+    },
+    fill: {
+      type: type === 'line' ? 'solid' : 'gradient',
+      opacity: type === 'line' ? 0 : 1,
+      gradient: type === 'line' ? undefined : {
+        shadeIntensity: 1,
+        opacityFrom: 0.8,
+        opacityTo: 0.4,
+        stops: [0, 100]
+      }
+    },
+    xaxis: {
+      categories: categories || [],
+      axisBorder: {
+        show: false
+      },
+      axisTicks: {
+        show: false
+      },
+      tickAmount: 5,
+      labels: {
+        rotate: 0,
+        rotateAlways: false,
+        hideOverlappingLabels: true,
+        style: {
+          colors: '#A1A1A8',
+          fontSize: '12px'
+        },
+        formatter: function formatter(val) {
+          if (!val || typeof val !== 'string') return val;
+          var date = new Date(val);
+          if (isNaN(date.getTime())) return val;
+          return date.toLocaleDateString('en-US', {
+            month: 'short',
+            day: 'numeric'
+          });
+        }
+      }
+    },
+    yaxis: {
+      show: true,
+      labels: {
+        style: {
+          colors: '#A1A1A8',
+          fontSize: '12px'
+        },
+        formatter: function formatter(value) {
+          return (metric === null || metric === void 0 ? void 0 : metric.toLowerCase()) === 'revenue' ? "$".concat((value || 0).toLocaleString()) : value || 0;
+        }
+      }
+    },
+    grid: {
+      show: true,
+      borderColor: '#f1f1f1',
+      strokeDashArray: 4,
+      position: 'back'
+    },
+    dataLabels: {
+      enabled: false
+    },
+    legend: {
+      show: showLegend && (stacked || series && series.length > 1),
+      position: 'top',
+      horizontalAlign: 'left'
+    },
+    plotOptions: {
+      bar: {
+        borderRadius: 4,
+        columnWidth: '60%'
+      }
+    }
+  });
+  var chartOptions = isRadial ? radialOptions : linearOptions;
+
+  // Ensure series is in the correct format for the chart type
+  var chartSeries = [];
+  if (isRadial) {
+    var _series$;
+    // For donut/pie, series must be a simple array of numbers
+    var processedData = Array.isArray(data) ? data.map(function (v) {
+      return _typeof(v) === 'object' && v !== null ? v.value : v;
+    }) : [];
+    chartSeries = processedData.length > 0 ? processedData : (series === null || series === void 0 || (_series$ = series[0]) === null || _series$ === void 0 ? void 0 : _series$.data) || [];
+  } else {
+    // For bar/line/area, series must be an array of objects [{ name: '', data: [] }]
+    var _processedData = Array.isArray(data) ? data.map(function (v) {
+      return _typeof(v) === 'object' && v !== null ? v.value : v;
+    }) : [];
+    chartSeries = Array.isArray(series) ? series : [{
+      name: metric || "Value",
+      data: _processedData
+    }];
+  }
+  return /*#__PURE__*/jsx(ReactApexChart, {
+    options: chartOptions,
+    series: chartSeries,
+    type: type,
+    height: height,
+    width: "100%"
+  }, "".concat(id, "-").concat(type, "-").concat(chartSeries.length));
+};
+
+var MetricSelector = function MetricSelector(_ref) {
+  var metric = _ref.metric,
+    onMetricChange = _ref.onMetricChange,
+    _ref$options = _ref.options,
+    options = _ref$options === void 0 ? ['Revenue', 'Donations'] : _ref$options,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? "Metric" : _ref$label;
+  var _React$useState = React.useState(null),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    anchorEl = _React$useState2[0],
+    setAnchorEl = _React$useState2[1];
+  var open = Boolean(anchorEl);
+  var handleClick = function handleClick(event) {
+    setAnchorEl(event.currentTarget);
+  };
+  var handleClose = function handleClose(value) {
+    if (typeof value === 'string') {
+      onMetricChange(value);
+    }
+    setAnchorEl(null);
+  };
+  return /*#__PURE__*/jsxs(Box, {
+    sx: {
+      display: 'flex',
+      gap: 1
+    },
+    children: [/*#__PURE__*/jsxs(Button, {
+      id: "metric-button",
+      "aria-controls": open ? 'metric-menu' : undefined,
+      "aria-haspopup": "true",
+      "aria-expanded": open ? 'true' : undefined,
+      onClick: handleClick,
+      variant: "outlined",
+      sx: {
+        borderRadius: '8px',
+        borderColor: '#E9E9EB',
+        color: '#000',
+        textTransform: 'none',
+        fontWeight: 600,
+        px: 2,
+        height: '40px',
+        '&:hover': {
+          borderColor: 'primary.main',
+          bgcolor: 'rgba(99, 99, 230, 0.04)'
+        }
+      },
+      children: [label, ": ", metric]
+    }), /*#__PURE__*/jsx(Menu, {
+      id: "metric-menu",
+      anchorEl: anchorEl,
+      open: open,
+      onClose: function onClose() {
+        return handleClose();
+      },
+      MenuListProps: {
+        'aria-labelledby': 'metric-button'
+      },
+      PaperProps: {
+        sx: {
+          borderRadius: '8px',
+          mt: 1,
+          boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
+          minWidth: '150px'
+        }
+      },
+      children: options.map(function (option) {
+        return /*#__PURE__*/jsx(MenuItem, {
+          onClick: function onClick() {
+            return handleClose(option);
+          },
+          sx: {
+            fontWeight: metric === option ? 700 : 400
+          },
+          children: option
+        }, option);
+      })
+    })]
+  });
+};
+
+var RenderChartCard = function RenderChartCard(_ref) {
+  var item = _ref.item,
+    index = _ref.index,
+    _ref$isPrimary = _ref.isPrimary,
+    isPrimary = _ref$isPrimary === void 0 ? false : _ref$isPrimary,
+    _ref$isPremium = _ref.isPremium,
+    isPremium = _ref$isPremium === void 0 ? false : _ref$isPremium,
+    metric = _ref.metric,
+    setMetric = _ref.setMetric,
+    _ref$md = _ref.md,
+    md = _ref$md === void 0 ? 4 : _ref$md,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? "area" : _ref$type;
+  return /*#__PURE__*/jsx(Grid, {
+    item: true,
+    xs: 12,
+    md: md,
+    sx: {
+      display: "flex",
+      paddingTop: "0px !important"
+    },
+    children: /*#__PURE__*/jsx(Card, {
+      sx: {
+        width: "100%",
+        display: "flex",
+        flexDirection: "column",
+        boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
+        borderRadius: 4,
+        border: "1px solid #f0f0f0"
+      },
+      children: /*#__PURE__*/jsxs(CardContent, {
+        sx: {
+          p: item.exportMode ? 2 : 3,
+          flexGrow: 1,
+          display: "flex",
+          flexDirection: "column"
+        },
+        children: [/*#__PURE__*/jsxs(Box, {
+          sx: {
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "flex-start",
+            mb: item.exportMode ? 2 : isPremium ? 3 : 2
+          },
+          children: [isPremium ? /*#__PURE__*/jsxs(Box, {
+            sx: {
+              textAlign: "left"
+            },
+            children: [/*#__PURE__*/jsx(Typography, {
+              sx: {
+                color: "#000000",
+                fontWeight: 700,
+                fontSize: "18px",
+                mb: 0.2
+              },
+              children: item.label
+            }), /*#__PURE__*/jsx(Typography, {
+              variant: "caption",
+              sx: {
+                color: "rgba(0, 0, 0, 0.4)",
+                fontWeight: 400,
+                display: "block",
+                mb: 1.5
+              },
+              children: item.subtitle || "Last 30 days · daily aggregation"
+            }), /*#__PURE__*/jsxs(Box, {
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                gap: 1.5
+              },
+              children: [item.value && /*#__PURE__*/jsx(Typography, {
+                sx: {
+                  fontWeight: 700,
+                  color: "#000000",
+                  fontSize: "28px"
+                },
+                children: _typeof(item.value) === 'object' && item.value !== null ? item.value.value !== undefined ? item.value.value : JSON.stringify(item.value) : item.value
+              }), (item.trend || "18%") && /*#__PURE__*/jsxs(Box, {
+                sx: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 0.5,
+                  bgcolor: "#8df3be9a",
+                  color: "#054835ff",
+                  px: 1,
+                  py: 0.5,
+                  borderRadius: "100px",
+                  fontSize: "12px",
+                  fontWeight: 600
+                },
+                children: [/*#__PURE__*/jsx("span", {
+                  children: "\u25B2"
+                }), item.trend || "18% vs last month"]
+              })]
+            })]
+          }) : /*#__PURE__*/jsxs(Box, {
+            sx: {
+              textAlign: "left"
+            },
+            children: [/*#__PURE__*/jsx(Typography, {
+              variant: "subtitle2",
+              sx: {
+                color: "#000000",
+                fontWeight: 600,
+                textTransform: "uppercase",
+                letterSpacing: "0.5px",
+                mb: 0.5
+              },
+              children: item.label
+            }), item.value && /*#__PURE__*/jsx(Typography, {
+              variant: "subtitle2",
+              sx: {
+                fontWeight: 600,
+                color: "#000000",
+                mb: 0.5
+              },
+              children: _typeof(item.value) === 'object' && item.value !== null ? item.value.value !== undefined ? item.value.value : JSON.stringify(item.value) : item.value
+            }), item.subValue && /*#__PURE__*/jsx(Typography, {
+              variant: "subtitle2",
+              sx: {
+                color: "#000000",
+                fontWeight: 600
+              },
+              children: _typeof(item.subValue) === 'object' && item.subValue !== null ? JSON.stringify(item.subValue) : item.subValue
+            })]
+          }), /*#__PURE__*/jsx(Box, {
+            sx: {
+              display: "flex",
+              gap: 1,
+              alignItems: "center"
+            },
+            children: item.hideControls ? item.series && /*#__PURE__*/jsx(Box, {
+              sx: {
+                display: item.exportMode ? "flex" : {
+                  xs: "none",
+                  sm: "flex"
+                },
+                gap: 2,
+                alignItems: "center"
+              },
+              children: [{
+                label: "Paid Ads",
+                color: "#6366F1"
+              }, {
+                label: "Organic",
+                color: "#10B981"
+              }, {
+                label: "Email",
+                color: "#06B6D4"
+              }].map(function (leg) {
+                return /*#__PURE__*/jsxs(Box, {
+                  sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 0.5
+                  },
+                  children: [/*#__PURE__*/jsx(Box, {
+                    sx: {
+                      width: 8,
+                      height: 8,
+                      borderRadius: "50%",
+                      bgcolor: leg.color
+                    }
+                  }), /*#__PURE__*/jsx(Typography, {
+                    sx: {
+                      fontSize: "12px",
+                      color: "rgba(0,0,0,0.6)",
+                      fontWeight: 500
+                    },
+                    children: leg.label
+                  })]
+                }, leg.label);
+              })
+            }) : /*#__PURE__*/jsxs(Fragment, {
+              children: [item.showSelector && /*#__PURE__*/jsx(MetricSelector, {
+                metric: metric,
+                onMetricChange: setMetric,
+                options: ["Revenue", "Donations"]
+              }), /*#__PURE__*/jsx(IconButton, {
+                sx: {
+                  border: "1px solid #E9E9EB",
+                  borderRadius: "8px",
+                  color: "#000",
+                  height: "40px",
+                  width: "40px",
+                  "&:hover": {
+                    borderColor: "primary.main",
+                    bgcolor: "rgba(99, 99, 230, 0.04)"
+                  }
+                },
+                children: /*#__PURE__*/jsx(MoreHoriz, {
+                  sx: {
+                    fontSize: "1.2rem"
+                  }
+                })
+              })]
+            })
+          })]
+        }), /*#__PURE__*/jsxs(Box, {
+          sx: {
+            flexGrow: 1,
+            minHeight: isPrimary ? "250px" : "200px"
+          },
+          children: [/*#__PURE__*/jsx(RevenueChart, {
+            id: "".concat(item.label, "-").concat(index),
+            metric: item.label.includes("Rate") || item.label.includes("Performance") || item.label.includes("source") || item.label === "URL" ? "Percent" : item.stacked ? item.label.includes("Traffic") ? "Visitors" : "Donors" : metric,
+            data: item.data,
+            series: item.series,
+            categories: item.categories,
+            height: item.height || (isPrimary ? 250 : 200),
+            stacked: item.stacked,
+            type: type || item.type || "area",
+            colors: item.colors,
+            showLegend: !item.hideControls
+          }), item.hideControls && item.series && /*#__PURE__*/jsx(Box, {
+            sx: {
+              display: {
+                xs: "flex",
+                sm: "none"
+              },
+              justifyContent: "center",
+              gap: 2,
+              flexWrap: "wrap",
+              mt: 1.5
+            },
+            children: [{
+              label: "Paid Ads",
+              color: "#6366F1"
+            }, {
+              label: "Organic",
+              color: "#10B981"
+            }, {
+              label: "Email",
+              color: "#06B6D4"
+            }].map(function (leg) {
+              return /*#__PURE__*/jsxs(Box, {
+                sx: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 0.5
+                },
+                children: [/*#__PURE__*/jsx(Box, {
+                  sx: {
+                    width: 8,
+                    height: 8,
+                    borderRadius: "50%",
+                    bgcolor: leg.color
+                  }
+                }), /*#__PURE__*/jsx(Typography, {
+                  sx: {
+                    fontSize: "11px",
+                    color: "rgba(0,0,0,0.6)",
+                    fontWeight: 500,
+                    marginTop: {
+                      xs: "1px",
+                      sm: 0
+                    }
+                  },
+                  children: leg.label
+                })]
+              }, leg.label);
+            })
+          })]
+        }), item.footer && /*#__PURE__*/jsxs(Box, {
+          sx: {
+            display: "flex",
+            justifyContent: "space-between",
+            mt: 2,
+            pt: 2,
+            borderTop: "1px solid #f0f0f0"
+          },
+          children: [/*#__PURE__*/jsx(Typography, {
+            variant: "caption",
+            sx: {
+              color: "#606062",
+              fontWeight: 600
+            },
+            children: item.footer.left
+          }), /*#__PURE__*/jsx(Typography, {
+            variant: "caption",
+            sx: {
+              color: "#606062",
+              fontWeight: 600
+            },
+            children: item.footer.right
+          })]
+        })]
+      })
+    })
+  }, item.label + index);
+};
+
+export { RenderChartCard as default };
+//# sourceMappingURL=RenderChartCard.es.js.map