@hhgtech/hhg-components
Version:
Hello Health Group common components
284 lines (273 loc) • 14.7 kB
JavaScript
import React__default, { useMemo, useState, useRef } from 'react';
import { M as MarryBabyText, a as MarryBabyHeading } from './index-3b8537c3.js';
import { T as Text } from './index-9f5659e8.js';
import { P as PillCarousel } from './index-090a5a52.js';
import { u as useTranslations } from './index-9d21b711.js';
import { theme } from './miscTheme.js';
import { ResponsiveContainer, AreaChart, CartesianGrid, Tooltip, XAxis, YAxis, Area, ReferenceDot } from 'recharts';
import { C as CustomReferenceDot } from './index-2640a8fe.js';
import { a as useOutsideClick } from './useOutsideClick-87b9fd94.js';
import styled from '@emotion/styled';
import { _ as __rest } from './tslib.es6-ea4dfe68.js';
import '@mantine/core';
import './other-4ccb5568.js';
import './index-90813715.js';
import './Locale-f270bd9d.js';
import './index-ebe66e27.js';
import './constantsDomainLocales.js';
import './constantsIsProduction.js';
import './useScreenSize-981e5b51.js';
import './utils-cb7242c7.js';
import './index-cf9e26de.js';
import './index-5d405c0d.js';
import '@hhgtech/icons/other';
import '@mantine/hooks';
import '@mantine/carousel';
import './useMantineLocale-0c6bea99.js';
import '@mantine/notifications';
import './index-5e947517.js';
import 'date-fns/locale';
import './constantsSite.js';
import './constantsRiskScreener.js';
import 'dayjs';
import './index-c68a0fa7.js';
import 'classnames';
import './useUniqueId-4305c9aa.js';
import '@hhgtech/icons/core';
import '@mantine/dates';
import './index.styles-770020ac.js';
import './translationsContext-3a9e3453.js';
import './index-c2190f6e.js';
const CustomizedAxisTick = (props) => {
const { x, y, payload, activeWeek } = props;
if (activeWeek === payload.value) {
return (React__default.createElement("g", { transform: `translate(${x},${y})` },
React__default.createElement("circle", { r: 12, fill: props.siteType === 'marryBaby'
? theme.mbColors.pink
: theme.colors.primaryBase }),
React__default.createElement("text", { textAnchor: "middle", alignmentBaseline: "central", fill: theme.colors.white, fontFamily: "Inter", fontWeight: "600", fontSize: "12px" }, payload.value)));
}
else {
return (React__default.createElement("g", { transform: `translate(${x},${y})` },
React__default.createElement("text", { textAnchor: "middle", alignmentBaseline: "central", fill: theme.colors.gray600, fontFamily: "Inter", fontWeight: "400", fontSize: "12px" }, payload.value)));
}
};
const StyledTooltip = styled.div `
/* position: absolute; */
display: flex;
flex-direction: column;
padding: 8px 12px;
gap: 4px;
min-width: 145px;
max-width: 220px;
min-height: 50px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.2);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.3);
/* .risk {
display: flex;
align-items: center;
padding: 4px 8px;
background: ${theme.colors.yellow600};
border-radius: 3px;
} */
& > * {
display: flex;
gap: 4px;
align-items: center;
}
.risk {
display: inline-flex;
padding: 2px 8px;
border-radius: 2px;
background: #ffffff;
}
`;
const StyledChart = styled.div `
position: relative;
width: 100%;
.custom-chart-label {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
}
.chart-legend {
display: flex;
justify-content: space-between;
}
`;
const StyledChartLegend = styled.div `
display: flex;
gap: 40px;
justify-content: center;
margin-bottom: 8px;
& > div {
display: flex;
align-items: center;
gap: 4px;
}
`;
const LABELS_COLOR = [
{
name: 'overweight',
backgroundColor: theme.colors.yellow50,
color: theme.colors.yellow900,
},
{
name: 'underweight',
backgroundColor: theme.colors.yellow50,
color: theme.colors.yellow900,
},
{
name: 'healthy',
backgroundColor: theme.colors.green50,
color: theme.colors.green900,
},
];
const CustomizedTooltipLabel = (props) => {
var _a, _b, _c, _d, _e;
const { payload, active } = props;
const currentPayload = (_a = payload === null || payload === void 0 ? void 0 : payload[0]) === null || _a === void 0 ? void 0 : _a.payload;
if (!currentPayload || !currentPayload.toolTipLabel || !active)
return null;
const { backgroundColor, color } = useMemo(() => LABELS_COLOR.find((per) => per.name === currentPayload.status), [currentPayload === null || currentPayload === void 0 ? void 0 : currentPayload.status]);
return (React__default.createElement(StyledTooltip, null,
React__default.createElement("div", null, (_b = currentPayload.toolTipLabel) === null || _b === void 0 ? void 0 :
_b[0],
" ", (_c = currentPayload.toolTipLabel) === null || _c === void 0 ? void 0 :
_c[1]),
React__default.createElement("div", null,
((_d = currentPayload.toolTipLabel) === null || _d === void 0 ? void 0 : _d[2]) && (React__default.createElement(Text, { as: "span", size: "s3", color: theme.colors.gray800, weight: "semiBold" }, (_e = currentPayload.toolTipLabel) === null || _e === void 0 ? void 0 : _e[2])),
React__default.createElement("div", { className: "risk", style: {
backgroundColor,
} },
React__default.createElement(Text, { size: "n1", color: color }, currentPayload.translatedStatus)))));
};
const generatePregnancyWeightGainChartData = ({ weightByWeek, weightBefore, toolTipLabel, status, activeWeek, t, }) => {
const key = t(`bmi.result.${status}`);
const generateAdditionalData = (flag) => {
return flag === activeWeek
? { toolTipLabel, translatedStatus: key, status }
: {};
};
return weightByWeek.map((_data) => (Object.assign({ name: _data.week, min: weightBefore + _data.min, difference: _data.max - _data.min, max: weightBefore + _data.max }, generateAdditionalData(_data.week))));
};
const Chart = ({ weightBefore, weightByWeek, activeWeek, currentWeight, toolTipLabel = [], status, withLine = false, siteType, }) => {
const { t } = useTranslations();
const isMarryBaby = siteType === 'marryBaby';
const chartData = useMemo(() => generatePregnancyWeightGainChartData({
weightByWeek,
weightBefore,
toolTipLabel,
status,
activeWeek,
t,
}), [weightByWeek, weightBefore, toolTipLabel, status, activeWeek]);
const [isTooltipActive, setIsTooltipActive] = useState(false);
const ref = useRef(null);
// State for our modal
// Call hook passing in the ref and a function to call on outside click
useOutsideClick(ref, () => setIsTooltipActive(false));
return (React__default.createElement(StyledChart, null,
isMarryBaby ? (React__default.createElement(MarryBabyText, { type: "bodytext-3", color: theme.mbColors.dark },
' ',
t('babyGrowth.weight'),
" ",
t('pregnancyWeightGain.weightInput.desc'))) : (React__default.createElement(Text, { size: "n1", color: theme.colors.gray500 },
t('babyGrowth.weight'),
" ",
t('pregnancyWeightGain.weightInput.desc'))),
Array.isArray(chartData) && chartData.length > 0 && (React__default.createElement(StyledChart, null,
React__default.createElement(ResponsiveContainer, { height: 388, className: "chart" },
React__default.createElement(AreaChart, { data: chartData, margin: { top: 16, right: 0, left: 0 } },
React__default.createElement(CartesianGrid, { stroke: theme.colors.neutral100 }),
React__default.createElement(Tooltip, { trigger: "click", content: (props) => (React__default.createElement(CustomizedTooltipLabel, Object.assign({ active: !withLine &&
isTooltipActive &&
typeof activeWeek !== 'undefined' &&
typeof currentWeight !== 'undefined' }, props))) }),
React__default.createElement(XAxis, { type: "number", scale: "linear", ticks: Array.from({ length: 40 }, (_, i) => i + 1), dataKey: "name", tickLine: false, tickMargin: 12, tick: (props) => (React__default.createElement(CustomizedAxisTick, Object.assign({}, props, { activeWeek: activeWeek, siteType: siteType }))), domain: ['dataMin', 'dataMax'], interval: 'preserveStartEnd', tickCount: 1, allowDecimals: false }),
React__default.createElement(YAxis, { domain: [
(dataMin) => Math.max(dataMin, weightBefore - 10 || dataMin),
(dataMax) => {
return Math.max(dataMax, weightBefore + 20 || dataMax);
},
], type: "number", scale: "auto", interval: "preserveStartEnd", tickLine: false, tickMargin: 7, width: 45, tickCount: 10, allowDecimals: true, tickFormatter: (value) => String(Math.round((value + Number.EPSILON) * 100) / 100), tick: {
fontFamily: 'Inter',
fontWeight: 400,
fontSize: 12,
color: theme.colors.gray600,
} }),
React__default.createElement(Area, { connectNulls: true, type: "monotone", dataKey: "min", stackId: "1", stroke: "transparent", fill: "transparent" }),
React__default.createElement(Area, { connectNulls: true, type: "monotone", dataKey: "difference", stackId: "1", stroke: "transparent", fill: isMarryBaby
? theme.mbColors.tonePink
: theme.colors.primary100 }),
typeof activeWeek !== 'undefined' &&
typeof currentWeight !== 'undefined' && (React__default.createElement(ReferenceDot, { onClick: () => setIsTooltipActive(true), x: activeWeek === 0 ? 1 : activeWeek, y: currentWeight, r: 4, shape: React__default.createElement(CustomReferenceDot, { ref: ref, r: 4 }), fill: isMarryBaby
? theme.mbColors.pink
: theme.colors.primaryBase, stroke: isMarryBaby
? theme.mbColors.pink
: theme.colors.primaryBase })))),
React__default.createElement("div", { className: "custom-chart-label" },
React__default.createElement("i", null),
isMarryBaby ? (React__default.createElement(MarryBabyText, { type: "bodytext-3", color: theme.mbColors.dark }, t('pregnancy.week'))) : (React__default.createElement(Text, { size: "n1", color: theme.colors.gray500 }, t('pregnancy.week'))))))));
};
const Dot = (_a) => {
var { color } = _a, rest = __rest(_a, ["color"]);
return (React__default.createElement("svg", Object.assign({ width: "8", height: "8", viewBox: "0 0 8 8", fill: "none" }, rest),
React__default.createElement("circle", { cx: "4", cy: "4", r: "4", fill: color || theme.colors.primaryBase })));
};
const ChartLegend = ({ idealWeight, siteType }) => {
const { t } = useTranslations();
const isMarryBaby = siteType === 'marryBaby';
return (React__default.createElement(StyledChartLegend, null,
React__default.createElement("div", null, isMarryBaby ? (React__default.createElement(React__default.Fragment, null,
React__default.createElement(Dot, { color: theme.mbColors.lightPink }),
React__default.createElement(MarryBabyText, { type: "bodytext-3", color: theme.mbColors.dark },
t('pregnancyTool.weightSuggested'),
' ',
React__default.createElement(Text, { size: "n1", color: theme.colors.gray800, weight: "bold", as: "span" }, idealWeight)))) : (React__default.createElement(React__default.Fragment, null,
React__default.createElement(Dot, { color: theme.colors.primary100 }),
React__default.createElement(Text, { size: "n1", color: theme.colors.gray600 },
React__default.createElement(Text, { size: "n1", as: "span" },
t('pregnancyTool.weightSuggested'),
' '),
React__default.createElement(Text, { size: "n1", color: theme.colors.gray800, weight: "bold", as: "span" }, idealWeight))))),
React__default.createElement("div", null, isMarryBaby ? (React__default.createElement(React__default.Fragment, null,
React__default.createElement(Dot, { color: theme.mbColors.pink }),
React__default.createElement(MarryBabyText, { type: "bodytext-3", color: theme.mbColors.dark }, t('pwg.placeholder.weight')))) : (React__default.createElement(React__default.Fragment, null,
React__default.createElement(Dot, null),
React__default.createElement(Text, { size: "n1", color: theme.colors.gray600 }, t('pwg.placeholder.weight')))))));
};
const StyledPregnancyWeightGainChart = styled.div `
display: flex;
flex-direction: column;
align-items: center;
padding: 24px 16px;
width: 100%;
gap: 24px;
border: 1px solid ${theme.colors.neutral100};
border-radius: 8px;
.chart-header {
text-align: center;
}
> div {
width: 100%;
}
`;
const PregnancyWeightGainChart = ({ chartProps, pillCarouselProps, idealWeight, description, siteType, }) => {
const { t } = useTranslations();
const isMarryBaby = siteType === 'marryBaby';
return (React__default.createElement(StyledPregnancyWeightGainChart, null,
React__default.createElement("div", { className: "chart-header" },
isMarryBaby ? (React__default.createElement(MarryBabyHeading, { type: "h3", color: theme.mbColors.dark }, t('pregnancyTool.weightSuggested'))) : (React__default.createElement(Text, { size: "s1", weight: "semiBold", color: theme.colors.gray800 }, t('pregnancyTool.weightSuggested'))),
description && description),
React__default.createElement(PillCarousel, Object.assign({}, pillCarouselProps)),
React__default.createElement("div", null,
React__default.createElement(ChartLegend, { idealWeight: idealWeight, siteType: siteType }),
React__default.createElement(Chart, Object.assign({}, chartProps, { siteType: siteType })))));
};
export { PregnancyWeightGainChart };