@tenancy.nz/feature-ui 1.4.11 → 1.5.1

package/dist/esm/components/doughnut-chart.js

@@ -0,0 +1,120 @@
+import { objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
+import React from 'react';
+import { uid } from 'react-uid';
+import Stack from '@mui/material/Stack';
+import { Heading, Box } from '@tenancy.nz/ui';
+import { Chart } from 'primereact/chart.js';
+import ChartLegend from './ChartLegend.js';
+
+function DoughnutChart(_ref) {
+  var data = _ref.data,
+    _ref$heading = _ref.heading,
+    heading = _ref$heading === void 0 ? void 0 : _ref$heading,
+    _ref$chartProps = _ref.chartProps,
+    chartProps = _ref$chartProps === void 0 ? {} : _ref$chartProps,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "164px" : _ref$size;
+  if (!Array.isArray(data) || data.length === 0) {
+    return null;
+  }
+  var chartLabels = data.map(function (d) {
+    return d.title;
+  });
+  var chartValues = data.map(function (d) {
+    return d.count;
+  });
+  var chartColors = data.map(function (d) {
+    return d.color;
+  });
+  return /* @__PURE__ */React.createElement(Stack, {
+    sx: {
+      position: "relative"
+    },
+    alignItems: "center",
+    gap: 4
+  }, heading && /* @__PURE__ */React.createElement(Heading, {
+    as: "h4",
+    color: "primary"
+  }, heading), /* @__PURE__ */React.createElement(Stack, {
+    flexDirection: {
+      sm: "row"
+    },
+    gap: 12,
+    alignItems: "center"
+  }, /* @__PURE__ */React.createElement(Box, {
+    width: size,
+    height: size,
+    overflow: "hidden",
+    position: "relative",
+    maxWidth: "100%",
+    sx: {
+      "&& > canvas": {
+        width: "100%",
+        height: "100%"
+      }
+    }
+  }, /* @__PURE__ */React.createElement(Chart, _objectSpread2({
+    type: "doughnut",
+    data: {
+      labels: chartLabels,
+      datasets: [{
+        data: chartValues,
+        backgroundColor: chartColors,
+        hoverBackgroundColor: chartColors,
+        borderWidth: 0
+      }]
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      cutoutPercentage: 64,
+      legend: {
+        display: false
+      },
+      animation: {
+        duration: 0
+      },
+      tooltips: {
+        backgroundColor: "#0E0044",
+        titleFontColor: "#fff",
+        bodyFontColor: "#fff",
+        xPadding: 8,
+        yPadding: 8,
+        bodyFontFamily: "Montserrat, sans-serif",
+        bodyFontStyle: "semibold",
+        bodyFontSize: 14,
+        borderColor: "transparent",
+        callbacks: {
+          labelColor: function labelColor(tooltipItem, chart) {
+            var dataset = chart.config.data.datasets[tooltipItem.datasetIndex];
+            var color = dataset.backgroundColor[tooltipItem.index];
+            return {
+              borderColor: color,
+              backgroundColor: color,
+              borderWidth: 0,
+              borderRadius: 5
+            };
+          }
+        }
+      }
+    },
+    style: {
+      width: "100%",
+      height: "100%"
+    }
+  }, chartProps))), /* @__PURE__ */React.createElement(Stack, {
+    gap: 2
+  }, data.map(function (item) {
+    var color = item.color,
+      count = item.count,
+      title = item.title;
+    return /* @__PURE__ */React.createElement(ChartLegend, {
+      key: uid(item),
+      color: color,
+      count: count,
+      label: title
+    });
+  }))));
+}
+
+export { DoughnutChart as default };

package/dist/esm/index.js

@@ -7,7 +7,8 @@ export { default as BookingTableRow } from './components/BookingTableRow.js';
 export { default as BookingTableRowHeader } from './components/BookingTableRowHeader.js';
 export { default as BookingTableRowSkeleton } from './components/BookingTableRowSkeleton.js';
 export { default as CheckedIcon } from './components/CheckedIcon.js';
-export { default as EnquiriesDoughnutChart } from './components/EnquiriesDoughnutChart.js';
+export { default as DoughnutChart } from './components/doughnut-chart.js';
+export { default as AnalyticsDoughnutChart } from './components/analytics-doughnut-chart.js';
 export { default as GridList } from './components/GridList.js';
 export { default as Hidden } from './components/Hidden.js';
 export { default as IconLabel } from './components/IconLabel.js';

package/dist/esm/utils/helpers/general.js

@@ -0,0 +1,11 @@
+var parseChartCount = function parseChartCount(value) {
+  if (Number.isNaN(Number.parseInt(String(value), 10))) {
+    return 0;
+  }
+  if (value === 0) {
+    return 0;
+  }
+  return Math.max(Number(value), 1e-3);
+};
+
+export { parseChartCount };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tenancy.nz/feature-ui",
   "description": "React UI feature components.",
-  "version": "1.4.11",
+  "version": "1.5.1",
   "author": "TPS <https://www.tenancy.co.nz>",
   "type": "module",
   "main": "dist/cjs/index.cjs",
@@ -13,17 +13,21 @@
   "peerDependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
+    "@mui/icons-material": "^7.2.0",
+    "@mui/material": "^7.3.1",
     "chart.js": "2.7.3",
     "classnames": "^2.2.6",
     "primereact": "3.1.3",
     "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-    "@tenancy.nz/icons": "1.4.11",
-    "@tenancy.nz/ui": "1.4.11"
+    "@tenancy.nz/ui": "1.5.1"
   },
   "devDependencies": {
-    "@tenancy.nz/icons": "1.4.11",
-    "@tenancy.nz/ui": "1.4.11"
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/icons-material": "^7.2.0",
+    "@mui/material": "^7.3.1",
+    "@tenancy.nz/ui": "1.5.1"
   },
   "dependencies": {
     "react-uid": "^2.4.0"

package/dist/cjs/components/EnquiriesDoughnutChart.cjs

@@ -1,143 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-var ui = require('@tenancy.nz/ui');
-var chart_js = require('primereact/chart.js');
-
-function EnquiriesDoughnutChart(_ref) {
-  var _ref$tradeMeEnquiries = _ref.tradeMeEnquiriesCount,
-    tradeMeEnquiriesCount = _ref$tradeMeEnquiries === void 0 ? 0 : _ref$tradeMeEnquiries,
-    _ref$bookMeEnquiriesC = _ref.bookMeEnquiriesCount,
-    bookMeEnquiriesCount = _ref$bookMeEnquiriesC === void 0 ? 0 : _ref$bookMeEnquiriesC,
-    _ref$manualEnquiryCou = _ref.manualEnquiryCount,
-    manualEnquiryCount = _ref$manualEnquiryCou === void 0 ? 0 : _ref$manualEnquiryCou;
-  var colors = {
-    tradeMe: "#6FD3C0",
-    bookMe: "#00C0F3",
-    manual: "#394869"
-  };
-  var chartColors = [colors.tradeMe, colors.bookMe, colors.manual];
-  return /* @__PURE__ */React.createElement(ui.Box, {
-    position: "relative",
-    display: "flex",
-    height: "100%",
-    align: "center"
-  }, /* @__PURE__ */React.createElement(ui.Text, {
-    transform: "uppercase",
-    sx: {
-      position: "absolute",
-      left: 20,
-      top: -10
-    },
-    fontSize: 13,
-    color: "textPrimary",
-    weight: "700"
-  }, "Number of enquiries"), /* @__PURE__ */React.createElement(ui.Box, {
-    width: "100%",
-    overflow: "hidden"
-  }, /* @__PURE__ */React.createElement(chart_js.Chart, {
-    type: "doughnut",
-    data: {
-      labels: ["TradeMe", "BookMe", "Manual"],
-      datasets: [{
-        data: [Math.max(tradeMeEnquiriesCount, 1e-3), Math.max(bookMeEnquiriesCount, 1e-3), Math.max(manualEnquiryCount, 1e-3)],
-        backgroundColor: chartColors,
-        hoverBackgroundColor: chartColors
-      }]
-    },
-    options: {
-      legend: {
-        display: false
-      },
-      animation: {
-        duration: 0
-      }
-    },
-    style: {
-      width: "100%",
-      position: "absolute",
-      top: "18%",
-      left: "-75px"
-    }
-  })), /* @__PURE__ */React.createElement(ui.Box, {
-    maxWidth: {
-      xs: "160px",
-      xl: "180px"
-    },
-    width: "100%",
-    padding: "10px 20px",
-    mt: -4
-  }, /* @__PURE__ */React.createElement(ui.Box, {
-    width: "100%"
-  }, /* @__PURE__ */React.createElement(ui.Box, {
-    height: "10px",
-    backgroundColor: colors.tradeMe,
-    width: "100%"
-  }), /* @__PURE__ */React.createElement(ui.Box, {
-    display: "flex",
-    justify: "space-between",
-    width: "100%",
-    align: "flex-start",
-    mt: 2
-  }, /* @__PURE__ */React.createElement(ui.Text, {
-    transform: "uppercase",
-    fontSize: 12,
-    weight: "600"
-  }, "TradeMe"), /* @__PURE__ */React.createElement(ui.Text, {
-    transform: "uppercase",
-    fontSize: 32,
-    weight: "700",
-    mt: -3,
-    color: "textPrimary"
-  }, tradeMeEnquiriesCount))), /* @__PURE__ */React.createElement(ui.Box, {
-    width: "100%",
-    mt: "30px"
-  }, /* @__PURE__ */React.createElement(ui.Box, {
-    height: "10px",
-    backgroundColor: colors.bookMe,
-    width: "100%"
-  }), /* @__PURE__ */React.createElement(ui.Box, {
-    display: "flex",
-    justify: "space-between",
-    width: "100%",
-    align: "flex-start",
-    mt: 2
-  }, /* @__PURE__ */React.createElement(ui.Text, {
-    transform: "uppercase",
-    fontSize: 12,
-    weight: "600"
-  }, "Bookme"), /* @__PURE__ */React.createElement(ui.Text, {
-    transform: "uppercase",
-    fontSize: 32,
-    weight: "700",
-    mt: -3,
-    color: "textPrimary"
-  }, bookMeEnquiriesCount))), /* @__PURE__ */React.createElement(ui.Box, {
-    width: "100%",
-    mt: "30px"
-  }, /* @__PURE__ */React.createElement(ui.Box, {
-    height: "10px",
-    backgroundColor: colors.manual,
-    width: "100%"
-  }), /* @__PURE__ */React.createElement(ui.Box, {
-    display: "flex",
-    justify: "space-between",
-    width: "100%",
-    align: "flex-start",
-    mt: 2
-  }, /* @__PURE__ */React.createElement(ui.Text, {
-    transform: "uppercase",
-    fontSize: 12,
-    weight: "600"
-  }, "Manually", /* @__PURE__ */React.createElement("br", null), "Generated"), /* @__PURE__ */React.createElement(ui.Text, {
-    transform: "uppercase",
-    fontSize: 32,
-    weight: "700",
-    color: "textPrimary",
-    mt: -3
-  }, manualEnquiryCount)))));
-}
-
-exports.default = EnquiriesDoughnutChart;

package/dist/esm/components/EnquiriesDoughnutChart.js

@@ -1,139 +0,0 @@
-import React from 'react';
-import { Box, Text } from '@tenancy.nz/ui';
-import { Chart } from 'primereact/chart.js';
-
-function EnquiriesDoughnutChart(_ref) {
-  var _ref$tradeMeEnquiries = _ref.tradeMeEnquiriesCount,
-    tradeMeEnquiriesCount = _ref$tradeMeEnquiries === void 0 ? 0 : _ref$tradeMeEnquiries,
-    _ref$bookMeEnquiriesC = _ref.bookMeEnquiriesCount,
-    bookMeEnquiriesCount = _ref$bookMeEnquiriesC === void 0 ? 0 : _ref$bookMeEnquiriesC,
-    _ref$manualEnquiryCou = _ref.manualEnquiryCount,
-    manualEnquiryCount = _ref$manualEnquiryCou === void 0 ? 0 : _ref$manualEnquiryCou;
-  var colors = {
-    tradeMe: "#6FD3C0",
-    bookMe: "#00C0F3",
-    manual: "#394869"
-  };
-  var chartColors = [colors.tradeMe, colors.bookMe, colors.manual];
-  return /* @__PURE__ */React.createElement(Box, {
-    position: "relative",
-    display: "flex",
-    height: "100%",
-    align: "center"
-  }, /* @__PURE__ */React.createElement(Text, {
-    transform: "uppercase",
-    sx: {
-      position: "absolute",
-      left: 20,
-      top: -10
-    },
-    fontSize: 13,
-    color: "textPrimary",
-    weight: "700"
-  }, "Number of enquiries"), /* @__PURE__ */React.createElement(Box, {
-    width: "100%",
-    overflow: "hidden"
-  }, /* @__PURE__ */React.createElement(Chart, {
-    type: "doughnut",
-    data: {
-      labels: ["TradeMe", "BookMe", "Manual"],
-      datasets: [{
-        data: [Math.max(tradeMeEnquiriesCount, 1e-3), Math.max(bookMeEnquiriesCount, 1e-3), Math.max(manualEnquiryCount, 1e-3)],
-        backgroundColor: chartColors,
-        hoverBackgroundColor: chartColors
-      }]
-    },
-    options: {
-      legend: {
-        display: false
-      },
-      animation: {
-        duration: 0
-      }
-    },
-    style: {
-      width: "100%",
-      position: "absolute",
-      top: "18%",
-      left: "-75px"
-    }
-  })), /* @__PURE__ */React.createElement(Box, {
-    maxWidth: {
-      xs: "160px",
-      xl: "180px"
-    },
-    width: "100%",
-    padding: "10px 20px",
-    mt: -4
-  }, /* @__PURE__ */React.createElement(Box, {
-    width: "100%"
-  }, /* @__PURE__ */React.createElement(Box, {
-    height: "10px",
-    backgroundColor: colors.tradeMe,
-    width: "100%"
-  }), /* @__PURE__ */React.createElement(Box, {
-    display: "flex",
-    justify: "space-between",
-    width: "100%",
-    align: "flex-start",
-    mt: 2
-  }, /* @__PURE__ */React.createElement(Text, {
-    transform: "uppercase",
-    fontSize: 12,
-    weight: "600"
-  }, "TradeMe"), /* @__PURE__ */React.createElement(Text, {
-    transform: "uppercase",
-    fontSize: 32,
-    weight: "700",
-    mt: -3,
-    color: "textPrimary"
-  }, tradeMeEnquiriesCount))), /* @__PURE__ */React.createElement(Box, {
-    width: "100%",
-    mt: "30px"
-  }, /* @__PURE__ */React.createElement(Box, {
-    height: "10px",
-    backgroundColor: colors.bookMe,
-    width: "100%"
-  }), /* @__PURE__ */React.createElement(Box, {
-    display: "flex",
-    justify: "space-between",
-    width: "100%",
-    align: "flex-start",
-    mt: 2
-  }, /* @__PURE__ */React.createElement(Text, {
-    transform: "uppercase",
-    fontSize: 12,
-    weight: "600"
-  }, "Bookme"), /* @__PURE__ */React.createElement(Text, {
-    transform: "uppercase",
-    fontSize: 32,
-    weight: "700",
-    mt: -3,
-    color: "textPrimary"
-  }, bookMeEnquiriesCount))), /* @__PURE__ */React.createElement(Box, {
-    width: "100%",
-    mt: "30px"
-  }, /* @__PURE__ */React.createElement(Box, {
-    height: "10px",
-    backgroundColor: colors.manual,
-    width: "100%"
-  }), /* @__PURE__ */React.createElement(Box, {
-    display: "flex",
-    justify: "space-between",
-    width: "100%",
-    align: "flex-start",
-    mt: 2
-  }, /* @__PURE__ */React.createElement(Text, {
-    transform: "uppercase",
-    fontSize: 12,
-    weight: "600"
-  }, "Manually", /* @__PURE__ */React.createElement("br", null), "Generated"), /* @__PURE__ */React.createElement(Text, {
-    transform: "uppercase",
-    fontSize: 32,
-    weight: "700",
-    color: "textPrimary",
-    mt: -3
-  }, manualEnquiryCount)))));
-}
-
-export { EnquiriesDoughnutChart as default };