@tenancy.nz/feature-ui 1.0.1 → 1.0.2

package/dist/cjs/components/AnalyticsSection.cjs

@@ -3,207 +3,159 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var jsxRuntime = require('react/jsx-runtime');
-require('react');
+var React = require('react');
 var ui = require('@tenancy.nz/ui');
 var AnalyticsBox = require('./AnalyticsBox.cjs');
 var EnquiriesDoughnutChart = require('./EnquiriesDoughnutChart.cjs');
 
-function AnalyticsSection({
-  viewingsCount,
-  bookingsCount,
-  attendeesCount,
-  cancellationsCount,
-  applicationsCount,
-  averageRent,
-  textUsage,
-  tradeMeEnquiriesCount,
-  bookMeEnquiriesCount,
-  manualEnquiryCount,
-  agreementsCount,
-  agreementsFinalisedCount,
-  filterDaysCount
-}) {
-  const isXlUp = ui.useMediaQuery((theme) => theme.breakpoints.up("xl"));
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    ui.Box,
-    {
-      display: "flex",
-      align: "stretch",
-      direction: { xs: "column-reverse", mlg: "row" },
-      gap: "27px",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { width: "100%", maxWidth: { xs: "100%", mob: "340px", xl: "463px" }, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Paper, { style: { width: "100%", position: "relative", height: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { mt: "20px", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsx(
-          EnquiriesDoughnutChart.default,
-          {
-            tradeMeEnquiriesCount,
-            bookMeEnquiriesCount,
-            manualEnquiryCount
-          }
-        ) }) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { width: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { display: "flex", direction: "row", width: "100%", gap: 6, children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { flex: 3, children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { display: "flex", gap: 6, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                AnalyticsBox.default,
-                {
-                  label: "Viewings",
-                  amount: viewingsCount,
-                  width: "100%",
-                  height: isXlUp ? "157px" : "125px"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                AnalyticsBox.default,
-                {
-                  label: "Bookings",
-                  amount: bookingsCount,
-                  width: "100%",
-                  height: isXlUp ? "157px" : "125px"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                AnalyticsBox.default,
-                {
-                  label: "Attendees",
-                  amount: attendeesCount,
-                  width: "100%",
-                  border: "3px solid #6FD3C0",
-                  height: isXlUp ? "157px" : "125px"
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { display: "flex", width: "100%", gap: 6, mt: 6, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                AnalyticsBox.default,
-                {
-                  label: "Converted Properties",
-                  amount: agreementsCount,
-                  width: "100%",
-                  height: isXlUp ? "157px" : "125px",
-                  text: /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { as: "span", maxWidth: "276px", children: [
-                    "Properties that have had a viewing in the last",
-                    " ",
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      ui.Text,
-                      {
-                        as: "span",
-                        display: "inline",
-                        weight: "700",
-                        fontSize: "inherit",
-                        children: filterDaysCount
-                      }
-                    ),
-                    " ",
-                    "days where an agreement has been",
-                    " ",
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      ui.Text,
-                      {
-                        as: "span",
-                        display: "inline",
-                        weight: "700",
-                        fontSize: "inherit",
-                        children: "created"
-                      }
-                    )
-                  ] })
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                AnalyticsBox.default,
-                {
-                  label: "Converted Properties",
-                  amount: agreementsFinalisedCount,
-                  width: "100%",
-                  height: isXlUp ? "157px" : "125px",
-                  text: /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { as: "span", maxWidth: "276px", children: [
-                    "Properties that have had a viewing in the last",
-                    " ",
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      ui.Text,
-                      {
-                        as: "span",
-                        display: "inline",
-                        weight: "700",
-                        fontSize: "inherit",
-                        children: filterDaysCount
-                      }
-                    ),
-                    " ",
-                    "days where an agreement has been",
-                    " ",
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      ui.Text,
-                      {
-                        as: "span",
-                        display: "inline",
-                        weight: "700",
-                        fontSize: "inherit",
-                        children: "finalised"
-                      }
-                    )
-                  ] })
-                }
-              )
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { flex: 2, children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { display: "flex", gap: 6, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                AnalyticsBox.default,
-                {
-                  label: "Cancellations",
-                  amount: cancellationsCount,
-                  width: "100%",
-                  border: "3px solid #ED0D8D",
-                  height: isXlUp ? "157px" : "125px"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                AnalyticsBox.default,
-                {
-                  label: "Applications",
-                  amount: applicationsCount,
-                  width: "100%",
-                  border: "3px solid #F5C440",
-                  height: isXlUp ? "157px" : "125px"
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { display: "flex", gap: 6, mt: 6, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                AnalyticsBox.default,
-                {
-                  label: /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-                    "Average",
-                    /* @__PURE__ */ jsxRuntime.jsx("br", {}),
-                    " Rent"
-                  ] }),
-                  amount: averageRent,
-                  width: "100%",
-                  height: isXlUp ? "157px" : "125px"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                AnalyticsBox.default,
-                {
-                  label: /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-                    "Text Usage",
-                    /* @__PURE__ */ jsxRuntime.jsx("br", {}),
-                    " Total"
-                  ] }),
-                  amount: textUsage,
-                  width: "100%",
-                  height: isXlUp ? "157px" : "125px"
-                }
-              )
-            ] })
-          ] })
-        ] }) })
-      ]
+function AnalyticsSection(_ref) {
+  var viewingsCount = _ref.viewingsCount,
+    bookingsCount = _ref.bookingsCount,
+    attendeesCount = _ref.attendeesCount,
+    cancellationsCount = _ref.cancellationsCount,
+    applicationsCount = _ref.applicationsCount,
+    averageRent = _ref.averageRent,
+    textUsage = _ref.textUsage,
+    tradeMeEnquiriesCount = _ref.tradeMeEnquiriesCount,
+    bookMeEnquiriesCount = _ref.bookMeEnquiriesCount,
+    manualEnquiryCount = _ref.manualEnquiryCount,
+    agreementsCount = _ref.agreementsCount,
+    agreementsFinalisedCount = _ref.agreementsFinalisedCount,
+    filterDaysCount = _ref.filterDaysCount;
+  var isXlUp = ui.useMediaQuery(function (theme) {
+    return theme.breakpoints.up("xl");
+  });
+  return /* @__PURE__ */React.createElement(ui.Box, {
+    display: "flex",
+    align: "stretch",
+    direction: {
+      xs: "column-reverse",
+      mlg: "row"
+    },
+    gap: "27px"
+  }, /* @__PURE__ */React.createElement(ui.Box, {
+    width: "100%",
+    maxWidth: {
+      xs: "100%",
+      mob: "340px",
+      xl: "463px"
     }
-  );
+  }, /* @__PURE__ */React.createElement(ui.Paper, {
+    style: {
+      width: "100%",
+      position: "relative",
+      height: "100%"
+    }
+  }, /* @__PURE__ */React.createElement(ui.Box, {
+    mt: "20px",
+    height: "100%"
+  }, /* @__PURE__ */React.createElement(EnquiriesDoughnutChart.default, {
+    tradeMeEnquiriesCount: tradeMeEnquiriesCount,
+    bookMeEnquiriesCount: bookMeEnquiriesCount,
+    manualEnquiryCount: manualEnquiryCount
+  })))), /* @__PURE__ */React.createElement(ui.Box, {
+    width: "100%"
+  }, /* @__PURE__ */React.createElement(ui.Box, {
+    display: "flex",
+    direction: "row",
+    width: "100%",
+    gap: 6
+  }, /* @__PURE__ */React.createElement(ui.Box, {
+    flex: 3
+  }, /* @__PURE__ */React.createElement(ui.Box, {
+    display: "flex",
+    gap: 6
+  }, /* @__PURE__ */React.createElement(AnalyticsBox.default, {
+    label: "Viewings",
+    amount: viewingsCount,
+    width: "100%",
+    height: isXlUp ? "157px" : "125px"
+  }), /* @__PURE__ */React.createElement(AnalyticsBox.default, {
+    label: "Bookings",
+    amount: bookingsCount,
+    width: "100%",
+    height: isXlUp ? "157px" : "125px"
+  }), /* @__PURE__ */React.createElement(AnalyticsBox.default, {
+    label: "Attendees",
+    amount: attendeesCount,
+    width: "100%",
+    border: "3px solid #6FD3C0",
+    height: isXlUp ? "157px" : "125px"
+  })), /* @__PURE__ */React.createElement(ui.Box, {
+    display: "flex",
+    width: "100%",
+    gap: 6,
+    mt: 6
+  }, /* @__PURE__ */React.createElement(AnalyticsBox.default, {
+    label: "Converted Properties",
+    amount: agreementsCount,
+    width: "100%",
+    height: isXlUp ? "157px" : "125px",
+    text: /* @__PURE__ */React.createElement(ui.Box, {
+      as: "span",
+      maxWidth: "276px"
+    }, "Properties that have had a viewing in the last", " ", /* @__PURE__ */React.createElement(ui.Text, {
+      as: "span",
+      display: "inline",
+      weight: "700",
+      fontSize: "inherit"
+    }, filterDaysCount), " ", "days where an agreement has been", " ", /* @__PURE__ */React.createElement(ui.Text, {
+      as: "span",
+      display: "inline",
+      weight: "700",
+      fontSize: "inherit"
+    }, "created"))
+  }), /* @__PURE__ */React.createElement(AnalyticsBox.default, {
+    label: "Converted Properties",
+    amount: agreementsFinalisedCount,
+    width: "100%",
+    height: isXlUp ? "157px" : "125px",
+    text: /* @__PURE__ */React.createElement(ui.Box, {
+      as: "span",
+      maxWidth: "276px"
+    }, "Properties that have had a viewing in the last", " ", /* @__PURE__ */React.createElement(ui.Text, {
+      as: "span",
+      display: "inline",
+      weight: "700",
+      fontSize: "inherit"
+    }, filterDaysCount), " ", "days where an agreement has been", " ", /* @__PURE__ */React.createElement(ui.Text, {
+      as: "span",
+      display: "inline",
+      weight: "700",
+      fontSize: "inherit"
+    }, "finalised"))
+  }))), /* @__PURE__ */React.createElement(ui.Box, {
+    flex: 2
+  }, /* @__PURE__ */React.createElement(ui.Box, {
+    display: "flex",
+    gap: 6
+  }, /* @__PURE__ */React.createElement(AnalyticsBox.default, {
+    label: "Cancellations",
+    amount: cancellationsCount,
+    width: "100%",
+    border: "3px solid #ED0D8D",
+    height: isXlUp ? "157px" : "125px"
+  }), /* @__PURE__ */React.createElement(AnalyticsBox.default, {
+    label: "Applications",
+    amount: applicationsCount,
+    width: "100%",
+    border: "3px solid #F5C440",
+    height: isXlUp ? "157px" : "125px"
+  })), /* @__PURE__ */React.createElement(ui.Box, {
+    display: "flex",
+    gap: 6,
+    mt: 6
+  }, /* @__PURE__ */React.createElement(AnalyticsBox.default, {
+    label: /* @__PURE__ */React.createElement("span", null, "Average", /* @__PURE__ */React.createElement("br", null), " Rent"),
+    amount: averageRent,
+    width: "100%",
+    height: isXlUp ? "157px" : "125px"
+  }), /* @__PURE__ */React.createElement(AnalyticsBox.default, {
+    label: /* @__PURE__ */React.createElement("span", null, "Text Usage", /* @__PURE__ */React.createElement("br", null), " Total"),
+    amount: textUsage,
+    width: "100%",
+    height: isXlUp ? "157px" : "125px"
+  }))))));
 }
 
 exports.default = AnalyticsSection;

package/dist/cjs/components/BookingChart.cjs

@@ -3,13 +3,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var jsxRuntime = require('react/jsx-runtime');
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
 var React = require('react');
 var ui = require('@tenancy.nz/ui');
 var chart = require('primereact/chart');
 var BookingChart_styled = require('./BookingChart.styled.cjs');
 
-const defaultOptions = {
+var defaultOptions = {
   scaleFontColor: "black",
   legend: {
     display: false
@@ -22,103 +22,105 @@ const defaultOptions = {
         size: 12,
         family: "Montserrat, sans-serif"
       },
-      display: (ctx) => ctx.dataset.data[ctx.dataIndex] > 0
+      display: function display(ctx) {
+        return ctx.dataset.data[ctx.dataIndex] > 0;
+      }
     }
   },
   scales: {
-    xAxes: [
-      {
-        gridLines: {
-          labelString: "Date",
-          display: false
-        },
-        ticks: {
-          fontSize: 13,
-          family: "Montserrat, sans-serif",
-          fontWeight: "bold"
-        },
-        stacked: true
-      }
-    ],
-    yAxes: [
-      {
-        scaleLabel: {
-          display: true,
-          labelString: "Total bookings",
-          fontFamily: "Montserrat, sans-serif",
-          fontSize: 13,
-          fontStyle: "600"
-        },
-        ticks: {
-          min: 0,
-          stepSize: 5,
-          fontSize: 13,
-          fontWeight: 500
-        },
-        gridLines: {
-          display: false
-        },
-        stacked: true
-      }
-    ]
+    xAxes: [{
+      gridLines: {
+        labelString: "Date",
+        display: false
+      },
+      ticks: {
+        fontSize: 13,
+        family: "Montserrat, sans-serif",
+        fontWeight: "bold"
+      },
+      stacked: true
+    }],
+    yAxes: [{
+      scaleLabel: {
+        display: true,
+        labelString: "Total bookings",
+        fontFamily: "Montserrat, sans-serif",
+        fontSize: 13,
+        fontStyle: "600"
+      },
+      ticks: {
+        min: 0,
+        stepSize: 5,
+        fontSize: 13,
+        fontWeight: 500
+      },
+      gridLines: {
+        display: false
+      },
+      stacked: true
+    }]
   }
 };
-function BookingChart({
-  data,
-  labels,
-  mode = "day",
-  options = {},
-  onModeChange = void 0
-}) {
-  const legends = React.useMemo(
-    () => data.map(({ label, backgroundColor }) => [label, backgroundColor]).filter(
-      ([label], i, items) => items.findIndex(([l]) => l === label) === i
-    ),
-    [data]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { display: "flex", direction: "column", gap: "16px", width: "100%", children: [
-    legends.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(BookingChart_styled.StyledBookingChartStack, { children: legends.map(([label, backgroundColor]) => /* @__PURE__ */ jsxRuntime.jsx(BookingChart_styled.StyledBookingChartLegend, { color: backgroundColor, children: label }, label)) }),
-    /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { width: "100%", overflow: "hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
-      chart.Chart,
-      {
-        type: "bar",
-        data: {
-          labels,
-          datasets: data
-        },
-        options: { ...defaultOptions, ...options }
-      }
-    ) }),
-    onModeChange && /* @__PURE__ */ jsxRuntime.jsxs(BookingChart_styled.StyledBookingChartStack, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        BookingChart_styled.StyledBookingChartButton,
-        {
-          onClick: onModeChange,
-          active: mode === "day",
-          value: "day",
-          children: "Day"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        BookingChart_styled.StyledBookingChartButton,
-        {
-          onClick: onModeChange,
-          active: mode === "week",
-          value: "week",
-          children: "Week"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        BookingChart_styled.StyledBookingChartButton,
-        {
-          onClick: onModeChange,
-          active: mode === "month",
-          value: "month",
-          children: "Month"
-        }
-      )
-    ] })
-  ] });
+function BookingChart(_ref) {
+  var data = _ref.data,
+    labels = _ref.labels,
+    _ref$mode = _ref.mode,
+    mode = _ref$mode === void 0 ? "day" : _ref$mode,
+    _ref$options = _ref.options,
+    options = _ref$options === void 0 ? {} : _ref$options,
+    _ref$onModeChange = _ref.onModeChange,
+    onModeChange = _ref$onModeChange === void 0 ? void 0 : _ref$onModeChange;
+  var legends = React.useMemo(function () {
+    return data.map(function (_ref2) {
+      var label = _ref2.label,
+        backgroundColor = _ref2.backgroundColor;
+      return [label, backgroundColor];
+    }).filter(function (_ref3, i, items) {
+      var _ref4 = _rollupPluginBabelHelpers.slicedToArray(_ref3, 1),
+        label = _ref4[0];
+      return items.findIndex(function (_ref5) {
+        var _ref6 = _rollupPluginBabelHelpers.slicedToArray(_ref5, 1),
+          l = _ref6[0];
+        return l === label;
+      }) === i;
+    });
+  }, [data]);
+  return /* @__PURE__ */React.createElement(ui.Box, {
+    display: "flex",
+    direction: "column",
+    gap: "16px",
+    width: "100%"
+  }, legends.length > 0 && /* @__PURE__ */React.createElement(BookingChart_styled.StyledBookingChartStack, null, legends.map(function (_ref7) {
+    var _ref8 = _rollupPluginBabelHelpers.slicedToArray(_ref7, 2),
+      label = _ref8[0],
+      backgroundColor = _ref8[1];
+    return /* @__PURE__ */React.createElement(BookingChart_styled.StyledBookingChartLegend, {
+      key: label,
+      color: backgroundColor
+    }, label);
+  })), /* @__PURE__ */React.createElement(ui.Box, {
+    width: "100%",
+    overflow: "hidden"
+  }, /* @__PURE__ */React.createElement(chart.Chart, {
+    type: "bar",
+    data: {
+      labels: labels,
+      datasets: data
+    },
+    options: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, defaultOptions), options)
+  })), onModeChange && /* @__PURE__ */React.createElement(BookingChart_styled.StyledBookingChartStack, null, /* @__PURE__ */React.createElement(BookingChart_styled.StyledBookingChartButton, {
+    onClick: onModeChange,
+    active: mode === "day",
+    value: "day"
+  }, "Day"), /* @__PURE__ */React.createElement(BookingChart_styled.StyledBookingChartButton, {
+    onClick: onModeChange,
+    active: mode === "week",
+    value: "week"
+  }, "Week"), /* @__PURE__ */React.createElement(BookingChart_styled.StyledBookingChartButton, {
+    onClick: onModeChange,
+    active: mode === "month",
+    value: "month"
+  }, "Month")));
 }
 
 exports.default = BookingChart;