@drawbridge/components 0.0.77 → 0.1.0

package/dist/dashboard/recharts.mjs

@@ -0,0 +1,596 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { capitalize } from "@drawbridge/drawbridge-utils";
+import { AreaChart, Area, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from "recharts";
+import Empty from "../shared/empty";
+const ChartEmpty = ({ message }) => /* @__PURE__ */ jsx(
+  Empty,
+  {
+    ...{
+      variant: "secondary"
+    },
+    children: /* @__PURE__ */ jsx("p", { children: message || "No data to display" })
+  }
+);
+const fontSize = 14;
+const options = {
+  area: {
+    dot: {
+      r: 4
+    },
+    fillOpacity: 1,
+    type: "monotone"
+  },
+  axisX: {
+    axisLine: false,
+    dataKey: "date",
+    minTickGap: 20,
+    orientation: "bottom",
+    padding: {
+      left: 20
+    },
+    tick: {
+      fontSize
+    },
+    tickLine: false
+  },
+  axisY: {
+    axisLine: false,
+    mirror: true,
+    orientation: "left",
+    tick: {
+      fontSize
+    },
+    tickLine: false
+  },
+  chart: {
+    margin: {
+      bottom: 0,
+      left: 0,
+      right: 0,
+      top: 0
+    }
+  },
+  colors: {
+    actions: "rgba( 0, 0, 0, 0.6 )",
+    affiliates: "rgba( 0, 0, 0, 0.3 )",
+    brands: "rgba( 0, 0, 0, 0.5 )",
+    campaigns: "rgba( 0, 0, 0, 0.7 )",
+    connections: "rgba( 0, 0, 0, 0.4 )",
+    count: "rgba( 0, 0, 0, 0.8 )",
+    discount: "rgba( 0, 0, 0, 0.4 )",
+    entries: "rgba( 0, 0, 0, 0.8 )",
+    events: "rgba( 0, 0, 0, 0.5 )",
+    fee: "rgba( 0, 0, 0, 0.4 )",
+    files: "rgba( 0, 0, 0, 0.6 )",
+    gross: "rgba( 0, 0, 0, 0.8 )",
+    members: "rgba( 0, 0, 0, 0.5 )",
+    net: "rgba( 0, 0, 0, 0.4 )",
+    orders: "rgba( 0, 0, 0, 0.7 )",
+    pages: "rgba( 0, 0, 0, 0.3 )",
+    pageviews: "rgba( 0, 0, 0, 0.5 )",
+    qrcodes: "rgba( 0, 0, 0, 0.5 )",
+    shortcodes: "rgba( 0, 0, 0, 0.5 )",
+    storage: "rgba( 0, 0, 0, 0.4 )",
+    workflows: "rgba( 0, 0, 0, 0.6 )"
+  },
+  container: {
+    className: "m-0 justify-start",
+    height: "100%",
+    width: "100%"
+  },
+  gradient: {
+    x1: 0,
+    x2: 0,
+    y1: 0,
+    y2: 1
+  },
+  grid: {
+    strokeDasharray: "3 3",
+    vertical: false
+  },
+  legend: {
+    height: 50,
+    verticalAlign: "top",
+    wrapperStyle: {
+      fontSize,
+      cursor: "pointer"
+    }
+  }
+};
+const labels = {
+  pageviews: "Page views",
+  qrcodes: "QR codes",
+  shortcodes: "Short codes"
+};
+const label = (name) => labels[name] || capitalize(name);
+const area = (props, color) => /* @__PURE__ */ jsx(
+  Area,
+  {
+    ...{
+      ...props,
+      ...options.area,
+      stroke: color
+    }
+  }
+);
+const gradient = (props, color) => /* @__PURE__ */ jsxs(
+  "linearGradient",
+  {
+    ...{
+      ...props,
+      ...options.gradient
+    },
+    children: [
+      /* @__PURE__ */ jsx(
+        "stop",
+        {
+          ...{
+            offset: "5%",
+            stopColor: color,
+            stopOpacity: 0.4
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "stop",
+        {
+          ...{
+            offset: "95%",
+            stopColor: color,
+            stopOpacity: 0
+          }
+        }
+      )
+    ]
+  }
+);
+const ChartBar = ({ data, empty }) => {
+  if (!(data == null ? void 0 : data.length)) {
+    return /* @__PURE__ */ jsx(ChartEmpty, { ...empty });
+  }
+  ;
+  return /* @__PURE__ */ jsx(
+    ResponsiveContainer,
+    {
+      ...options.container,
+      children: /* @__PURE__ */ jsxs(
+        BarChart,
+        {
+          ...{
+            ...options.chart,
+            data
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              CartesianGrid,
+              {
+                ...options.grid
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              XAxis,
+              {
+                ...{
+                  axisLine: false,
+                  dataKey: "name",
+                  interval: 0,
+                  tick: {
+                    fontSize
+                  },
+                  tickLine: false
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              YAxis,
+              {
+                ...options.axisY
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Tooltip,
+              {
+                ...{
+                  formatter: (value) => [value, ""],
+                  separator: ""
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Bar,
+              {
+                ...{
+                  dataKey: "value",
+                  fill: "rgba( 0, 0, 0, 0.7 )",
+                  maxBarSize: 60,
+                  radius: [4, 4, 0, 0]
+                }
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+const ChartLine = ({
+  data,
+  datasets = [
+    "events",
+    "pageviews",
+    "qrcodes",
+    "shortcodes"
+  ],
+  empty,
+  legend = true
+}) => {
+  const [active, setActive] = useState(datasets);
+  if (!(data == null ? void 0 : data.some((point) => datasets.some((key) => Number(point == null ? void 0 : point[key]))))) {
+    return /* @__PURE__ */ jsx(ChartEmpty, { ...empty });
+  }
+  ;
+  const handleLegendClick = (key) => {
+    if (active.includes(key)) {
+      setActive(active.filter((el) => el !== key));
+    } else {
+      setActive((prev) => [...prev, key]);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    ResponsiveContainer,
+    {
+      ...options.container,
+      children: /* @__PURE__ */ jsxs(
+        AreaChart,
+        {
+          ...{
+            ...options.chart,
+            data
+          },
+          children: [
+            /* @__PURE__ */ jsxs("defs", { children: [
+              datasets.includes("actions") && gradient(
+                {
+                  id: "color-actions"
+                },
+                options.colors.actions
+              ),
+              datasets.includes("affiliates") && gradient(
+                {
+                  id: "color-affiliates"
+                },
+                options.colors.affiliates
+              ),
+              datasets.includes("brands") && gradient(
+                {
+                  id: "color-brands"
+                },
+                options.colors.brands
+              ),
+              datasets.includes("campaigns") && gradient(
+                {
+                  id: "color-campaigns"
+                },
+                options.colors.campaigns
+              ),
+              datasets.includes("connections") && gradient(
+                {
+                  id: "color-connections"
+                },
+                options.colors.connections
+              ),
+              datasets.includes("count") && gradient(
+                {
+                  id: "color-count"
+                },
+                options.colors.count
+              ),
+              datasets.includes("discount") && gradient(
+                {
+                  id: "color-discount"
+                },
+                options.colors.discount
+              ),
+              datasets.includes("entries") && gradient(
+                {
+                  id: "color-entries"
+                },
+                options.colors.entries
+              ),
+              datasets.includes("events") && gradient(
+                {
+                  id: "color-events"
+                },
+                options.colors.events
+              ),
+              datasets.includes("fee") && gradient(
+                {
+                  id: "color-fee"
+                },
+                options.colors.fee
+              ),
+              datasets.includes("files") && gradient(
+                {
+                  id: "color-files"
+                },
+                options.colors.files
+              ),
+              datasets.includes("gross") && gradient(
+                {
+                  id: "color-gross"
+                },
+                options.colors.gross
+              ),
+              datasets.includes("members") && gradient(
+                {
+                  id: "color-members"
+                },
+                options.colors.members
+              ),
+              datasets.includes("net") && gradient(
+                {
+                  id: "color-net"
+                },
+                options.colors.net
+              ),
+              datasets.includes("orders") && gradient(
+                {
+                  id: "color-orders"
+                },
+                options.colors.orders
+              ),
+              datasets.includes("pages") && gradient(
+                {
+                  id: "color-pages"
+                },
+                options.colors.pages
+              ),
+              datasets.includes("pageviews") && gradient(
+                {
+                  id: "color-pageviews"
+                },
+                options.colors.pageviews
+              ),
+              datasets.includes("qrcodes") && gradient(
+                {
+                  id: "color-qrcodes"
+                },
+                options.colors.qrcodes
+              ),
+              datasets.includes("shortcodes") && gradient(
+                {
+                  id: "color-shortcodes"
+                },
+                options.colors.shortcodes
+              ),
+              datasets.includes("storage") && gradient(
+                {
+                  id: "color-storage"
+                },
+                options.colors.storage
+              ),
+              datasets.includes("workflows") && gradient(
+                {
+                  id: "color-workflows"
+                },
+                options.colors.workflows
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              CartesianGrid,
+              {
+                ...options.grid
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              XAxis,
+              {
+                ...options.axisX
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              YAxis,
+              {
+                ...options.axisY
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Tooltip,
+              {
+                ...{
+                  formatter: (value, name) => [
+                    value,
+                    label(name)
+                  ]
+                }
+              }
+            ),
+            legend && /* @__PURE__ */ jsx(
+              Legend,
+              {
+                ...{
+                  formatter: (name) => label(name),
+                  onClick: ({ dataKey }) => handleLegendClick(dataKey),
+                  ...options.legend
+                }
+              }
+            ),
+            datasets.includes("actions") && area(
+              {
+                dataKey: "actions",
+                fill: "url(#color-actions)",
+                hide: !active.includes("actions")
+              },
+              options.colors.actions
+            ),
+            datasets.includes("affiliates") && area(
+              {
+                dataKey: "affiliates",
+                fill: "url(#color-affiliates)",
+                hide: !active.includes("affiliates")
+              },
+              options.colors.affiliates
+            ),
+            datasets.includes("brands") && area(
+              {
+                dataKey: "brands",
+                fill: "url(#color-brands)",
+                hide: !active.includes("brands")
+              },
+              options.colors.brands
+            ),
+            datasets.includes("campaigns") && area(
+              {
+                dataKey: "campaigns",
+                fill: "url(#color-campaigns)",
+                hide: !active.includes("campaigns")
+              },
+              options.colors.campaigns
+            ),
+            datasets.includes("connections") && area(
+              {
+                dataKey: "connections",
+                fill: "url(#color-connections)",
+                hide: !active.includes("connections")
+              },
+              options.colors.connections
+            ),
+            datasets.includes("count") && area(
+              {
+                dataKey: "count",
+                fill: "url(#color-count)",
+                hide: !active.includes("count")
+              },
+              options.colors.count
+            ),
+            datasets.includes("discount") && area(
+              {
+                dataKey: "discount",
+                fill: "url(#color-discount)",
+                hide: !active.includes("discount")
+              },
+              options.colors.discount
+            ),
+            datasets.includes("entries") && area(
+              {
+                dataKey: "entries",
+                fill: "url(#color-entries)",
+                hide: !active.includes("entries")
+              },
+              options.colors.entries
+            ),
+            datasets.includes("events") && area(
+              {
+                dataKey: "events",
+                fill: "url(#color-events)",
+                hide: !active.includes("events")
+              },
+              options.colors.events
+            ),
+            datasets.includes("fee") && area(
+              {
+                dataKey: "fee",
+                fill: "url(#color-fee)",
+                hide: !active.includes("fee")
+              },
+              options.colors.fee
+            ),
+            datasets.includes("files") && area(
+              {
+                dataKey: "files",
+                fill: "url(#color-files)",
+                hide: !active.includes("files")
+              },
+              options.colors.files
+            ),
+            datasets.includes("gross") && area(
+              {
+                dataKey: "gross",
+                fill: "url(#color-gross)",
+                hide: !active.includes("gross")
+              },
+              options.colors.gross
+            ),
+            datasets.includes("members") && area(
+              {
+                dataKey: "members",
+                fill: "url(#color-members)",
+                hide: !active.includes("members")
+              },
+              options.colors.members
+            ),
+            datasets.includes("net") && area(
+              {
+                dataKey: "net",
+                fill: "url(#color-net)",
+                hide: !active.includes("net")
+              },
+              options.colors.net
+            ),
+            datasets.includes("orders") && area(
+              {
+                dataKey: "orders",
+                fill: "url(#color-orders)",
+                hide: !active.includes("orders")
+              },
+              options.colors.orders
+            ),
+            datasets.includes("pages") && area(
+              {
+                dataKey: "pages",
+                fill: "url(#color-pages)",
+                hide: !active.includes("pages")
+              },
+              options.colors.pages
+            ),
+            datasets.includes("pageviews") && area(
+              {
+                dataKey: "pageviews",
+                fill: "url(#color-pageviews)",
+                hide: !active.includes("pageviews")
+              },
+              options.colors.pageviews
+            ),
+            datasets.includes("qrcodes") && area(
+              {
+                dataKey: "qrcodes",
+                fill: "url(#color-qrcodes)",
+                hide: !active.includes("qrcodes")
+              },
+              options.colors.qrcodes
+            ),
+            datasets.includes("shortcodes") && area(
+              {
+                dataKey: "shortcodes",
+                fill: "url(#color-shortcodes)",
+                hide: !active.includes("shortcodes")
+              },
+              options.colors.shortcodes
+            ),
+            datasets.includes("storage") && area(
+              {
+                dataKey: "storage",
+                fill: "url(#color-storage)",
+                hide: !active.includes("storage")
+              },
+              options.colors.storage
+            ),
+            datasets.includes("workflows") && area(
+              {
+                dataKey: "workflows",
+                fill: "url(#color-workflows)",
+                hide: !active.includes("workflows")
+              },
+              options.colors.workflows
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  ChartBar,
+  ChartLine
+};