@ammarkhalidfarooq/dashboard-package 0.5.38 → 0.5.40

package/README.md

@@ -8,8 +8,16 @@ A reusable React Dashboard component library.
 npm install @ammarkhalidfarooq/dashboard-package
 ```
 
+Peer dependencies are required in your app:
+
+- `react`, `react-dom`
+- `@mui/material`, `@mui/icons-material`, `@emotion/react`, `@emotion/styled`
+- `apexcharts`, `react-apexcharts`
+
 ## Usage
 
+### Full Dashboard
+
 ```jsx
 import React from "react";
 import { Dashboard } from "@ammarkhalidfarooq/dashboard-package";
@@ -21,6 +29,90 @@ const App = () => {
 export default App;
 ```
 
+### RenderChartCard (tree-shakeable)
+
+Import only the chart card bundle — avoids pulling in the full dashboard:
+
+```jsx
+import RenderChartCard from "@ammarkhalidfarooq/dashboard-package/RenderChartCard";
+```
+
+Or import from the main entry:
+
+```jsx
+import { RenderChartCard } from "@ammarkhalidfarooq/dashboard-package";
+```
+
+**Example:**
+
+```jsx
+import { useState } from "react";
+import Grid from "@mui/material/Grid";
+import RenderChartCard from "@ammarkhalidfarooq/dashboard-package/RenderChartCard";
+
+const chartItem = {
+  label: "Revenue per Visitor",
+  value: "$5.12",
+  subtitle: "Last 30 days · daily aggregation",
+  trend: "18% vs last month",
+  data: [3000, 4500, 4200, 5800, 5200, 7100, 8500, 9200, 5000],
+  categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"],
+};
+
+const App = () => {
+  const [metric, setMetric] = useState("Revenue");
+
+  return (
+    <Grid container spacing={3}>
+      <RenderChartCard
+        item={chartItem}
+        index={0}
+        isPremium
+        md={6}
+        metric={metric}
+        setMetric={setMetric}
+      />
+    </Grid>
+  );
+};
+
+export default App;
+```
+
+**Props:**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `item` | `object` | — | Chart config (see below) |
+| `index` | `number` | — | Unique index for the chart |
+| `isPrimary` | `boolean` | `false` | Uses a taller chart area |
+| `isPremium` | `boolean` | `false` | Premium card layout with trend badge |
+| `metric` | `string` | — | Active metric label (e.g. `"Revenue"`) |
+| `setMetric` | `function` | — | Metric change handler |
+| `md` | `number` | `4` | Grid column width on `md` breakpoint |
+| `type` | `string` | `"area"` | Chart type (`"area"`, `"bar"`, `"donut"`, etc.) |
+
+**`item` shape (common fields):**
+
+```js
+{
+  label: "Revenue per Visitor",       // Card title
+  value: "$5.12",                     // Main metric value
+  subtitle: "Last 30 days",           // Optional subtitle (premium layout)
+  trend: "18% vs last month",         // Optional trend badge (premium layout)
+  data: [3000, 4500, 4200],           // Single-series chart data
+  categories: ["Jan", "Feb", "Mar"],  // X-axis labels
+  series: [{ name: "Paid Ads", data: [...] }], // Multi-series (optional)
+  stacked: false,                     // Stack series (optional)
+  showSelector: false,                // Show metric dropdown (optional)
+  hideControls: false,                // Hide menu / show legend only (optional)
+  height: 250,                        // Chart height override (optional)
+  type: "area",                       // Per-card chart type override (optional)
+  colors: ["#6366F1", "#10B981"],     // Custom chart colors (optional)
+  footer: { left: "Total", right: "$12k" }, // Optional footer row
+}
+```
+
 ## Development
 
 To preview the component locally:
@@ -35,4 +127,4 @@ To build the package:
 npm run build
 ```
 
-The build outputs both ESM and CommonJS bundles in the `dist` folder.
+The build outputs ESM and CommonJS bundles in the `dist` folder, including a separate `RenderChartCard` bundle for tree-shaking.