@pega/custom-dx-components 0.242.17 → 0.242.18

package/tests/assets/original/components/createAll/Constellation/Pega_DXIL_MyTimeOfDay/PConnProps.d.ts

@@ -0,0 +1,46 @@
+import  {PConnect } from '@pega/pcore-pconnect-typedefs';
+
+// PConnProps.d.ts
+// This gives us a place to have each component (which is most DX Components) that is
+//  expected to have a getPConnect extend its props (from BaseProps)
+//  such that every component will be expected to have a getPConnect() function
+//  that returns a PConnect object. (new/better way of doing .propTypes).
+//  This PConnProps can be extended to include other props that we know are in every component
+export interface PConnProps {
+  // getPConnect should exist for every C11n component. (add @ts-ignore in special cases where it isn't)
+  getPConnect: () => typeof PConnect;
+
+  // Allow any/all other key/value pairs in the BaseProps for now
+  //  TODO: refine which other props are always expected for various component
+  //    types and consider further interface "subclassing". For example, we may
+  //    want to create a "BasePropsForm" that gives guidance on required, readonly, etc.
+  //    and any other props that every Form component expects.
+  //    For example, see the PConnFieldProps below.
+  // NOTE: if you uncomment the line below, the PConnProps type will allow
+  //  otherwise undefined types to appear. This can be helpful for debugging
+  //  or when adding new components whose types aren't yet known.
+  // [key: string]: any;
+}
+
+
+// PConnFieldProps extends PConnProps to bring in the common properties that are
+// associated with most field components (ex: Dropdown, TextInput, etc.) in the
+//  components/field directory
+export interface PConnFieldProps extends PConnProps {
+  label: string,
+  required: boolean,
+  disabled: boolean,
+  value: any,
+  validatemessage: string,
+  status?: string,
+  onChange?: any,
+  onBlur?: any,
+  readOnly: boolean,
+  testId: string,
+  helperText: string,
+  displayMode?: string,
+  hideLabel: boolean,
+  placeholder?: string,
+  fieldMetadata?: any,
+  additionalProps?: any
+}

package/tests/assets/original/components/createAll/Constellation/Pega_DXIL_MyTimeOfDay/demo.stories.tsx

@@ -0,0 +1,65 @@
+/* eslint-disable react/jsx-no-useless-fragment */
+import type { Meta, StoryObj } from '@storybook/react';
+import { configProps, stateProps } from './mock';
+import PegaDxilMyTimeOfDay from './index';
+
+const meta: Meta<typeof PegaDxilMyTimeOfDay> = {
+  title: 'PegaDxilMyTimeOfDay',
+  component: PegaDxilMyTimeOfDay,
+  excludeStories: /.*Data$/
+};
+
+export default meta;
+type Story = StoryObj<typeof PegaDxilMyTimeOfDay>;
+
+export const BasePegaDxilMyTimeOfDay: Story = (args: any) => {
+  const props = {
+    value: configProps.value,
+    additionalProps: configProps.additionalProps,
+    hasSuggestions: configProps.hasSuggestions,
+    getPConnect: () => {
+      return {
+        getActionsApi: () => {
+          return {
+            updateFieldValue: () => {/* nothing */},
+            triggerFieldChange: () => {/* nothing */}
+          };
+        },
+        getValidationApi: () => {
+          return {
+            validate: () => {/* nothing */}
+          };
+        },
+        getStateProps: () => {
+          return stateProps;
+        },
+        getConfigProps: () => {
+          return configProps;
+        },
+        ignoreSuggestion: () => {/* nothing */},
+        clearErrorMessages: () => {/* nothing */}
+      };
+    }
+  };
+
+  return (
+    <>
+      <PegaDxilMyTimeOfDay {...props} {...args} />
+    </>
+  );
+};
+
+BasePegaDxilMyTimeOfDay.args = {
+  label: configProps.label,
+  helperText: configProps.helperText,
+  withSeconds: configProps.withSeconds,
+  testId: configProps.testId,
+  readOnly: configProps.readOnly,
+  disabled: configProps.disabled,
+  required: configProps.required,
+  status: configProps.status,
+  hideLabel: configProps.hideLabel,
+  displayMode: configProps.displayMode,
+  variant: configProps.variant,
+  validatemessage: configProps.validatemessage
+};

package/tests/assets/original/components/createAll/Constellation/Pega_DXIL_MyTimeOfDay/mock.ts

@@ -0,0 +1,21 @@
+export const configProps = {
+  value: '13:30',
+  validatemessage: '',
+  label: 'TimeOfDay Label',
+  hideLabel: false,
+  helperText: 'TimeOfDay helper text',
+  withSeconds: false,
+  testId: '12345678',
+  additionalProps: {},
+  displayMode: '',
+  variant: '',
+  hasSuggestions: false,
+  readOnly: false,
+  required: false,
+  disabled: false,
+  status: ''
+};
+
+export const stateProps = {
+  value: '.TimeOfDayLabel'
+};

package/tests/assets/original/components/createAll/Constellation/Pega_DXIL_MyTimeOfDay/styles.ts

@@ -0,0 +1,8 @@
+// individual style, comment out above, and uncomment here and add styles
+import styled, { css } from 'styled-components';
+
+export default styled.div(() => {
+  return css`
+    margin: 0px 0;
+  `;
+});

package/tests/assets/original/components/createAll/Constellation/Pega_DXIL_MyTimeOfDay/suggestions-handler.ts

@@ -0,0 +1,9 @@
+export const suggestionsHandler = (accepted: boolean, pConn: any, setStatus: any) => {
+  if (accepted) {
+    pConn.acceptSuggestion();
+    setStatus('success');
+  } else {
+    pConn.ignoreSuggestion();
+    setStatus(undefined);
+  }
+};

package/tests/assets/original/components/createAll/Constellation/Pega_DXIL_MyTimeOfDay/time-of-day.ts

@@ -0,0 +1,288 @@
+import dayjs from "dayjs";
+import relativeTime from 'dayjs/plugin/relativeTime.js';
+import localizedFormat from 'dayjs/plugin/localizedFormat.js';
+import utc from 'dayjs/plugin/utc.js';
+import timezone from 'dayjs/plugin/timezone.js';
+
+dayjs.extend(relativeTime);
+dayjs.extend(localizedFormat);
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+/**
+ * Return relative time in fromNow for the given datetime
+ * @description Convert and return the given datetime in dayJSObject
+ *
+ * @param {string} text datetime
+ * @returns {object} datetime as a dayjs object
+ */
+export const getDayJSObject = (text: string) => {
+  const momObj = dayjs(text);
+  if (momObj.isValid()) return momObj;
+  const timeStamp = text;
+  const isDateTime = timeStamp.includes("GMT");
+  const year = parseInt(timeStamp.substr(0, 4), 10);
+  const month = parseInt(timeStamp.substr(4, 2), 10) - 1;
+  const day = parseInt(timeStamp.substr(6, 2), 10);
+
+  const CurrentTz = PCore.getLocaleUtils().getTimeZoneInUse();
+
+  let mom = new Date();
+
+  mom.setUTCDate(day);
+  mom.setUTCMonth(month);
+  mom.setUTCFullYear(year);
+
+  /* istanbul ignore else */
+  if (isDateTime) {
+    const hours = parseInt(timeStamp.substring(9, 2), 10);
+    const minutes = parseInt(timeStamp.substring(11, 2), 10);
+    const seconds = parseInt(timeStamp.substring(13, 2), 10);
+    const ms = parseInt(timeStamp.substring(16, 3), 10);
+    mom.setUTCHours(hours);
+    mom.setUTCMinutes(minutes);
+    mom.setUTCSeconds(seconds);
+    mom.setUTCMilliseconds(ms);
+  }
+
+  // @ts-ignore
+  mom = dayjs(
+    mom.toLocaleString("en-US", {
+      timeZone: CurrentTz
+    })
+  );
+
+  return mom;
+};
+
+/**
+ * Return relative time in fromNow for the given datetime
+ *
+ * @param {string} time datetime
+ * @returns {object} relative time from now
+ */
+export const getRelativeTime = (time: string) => {
+  let relativetime = "";
+  if (dayjs(time).isUTC()) {
+    relativetime = dayjs(time).fromNow();
+  } else {
+    const dayjstime = getDayJSObject(time);
+    relativetime = dayjs(dayjstime).fromNow();
+  }
+  return relativetime;
+};
+
+/**
+ * Return year for the date passed
+ *
+ * @param {string} value from which Year needs to be taken out
+ * @returns {number} year for the date passed
+ */
+export const getFullYear = (value: any) =>
+  value ? new Date(value).getFullYear() : new Date().getFullYear();
+
+/**
+ * Return maxDate for the date passed
+ *
+ * @param {number} nextYears next number of years
+ * @param {number} currentYear current year
+ * @param {number} yearFromValue year set on value in redux
+ *
+ * @returns {string} maxDate calculated based on inputs
+ */
+export const getMaxDate = (nextYears: number, currentYear: number, yearFromValue: number) => {
+  if (Number.isNaN(nextYears)) {
+    nextYears = 20;
+  }
+  let maxYear = currentYear + nextYears;
+  if (yearFromValue > maxYear) {
+    maxYear = yearFromValue;
+  }
+  return `${maxYear}-01-01`;
+};
+
+/**
+ * Return minDate for the date passed
+ *
+ * @param {number} previousYears previous number of years
+ * @param {number} currentYear current year
+ * @param {number} yearFromValue year set on value in redux
+ *
+ * @returns {string} minDate calculated based on inputs
+ */
+export const getMinDate = (previousYears: number, currentYear: number, yearFromValue: number) => {
+  if (Number.isNaN(previousYears)) {
+    previousYears = 100;
+  }
+  let minYear = currentYear - previousYears;
+  if (yearFromValue < minYear) {
+    minYear = yearFromValue;
+  }
+  return `${minYear}-12-31`;
+};
+
+/**
+ * Return clockFormat after parsing
+ *
+ * @param {number | string} clockFormat chosen by user
+ *
+ * @returns {number} clockFormat
+ */
+export const parseClockFormat = (clockFormat: number | string) =>
+  typeof clockFormat === "string" ? parseInt(clockFormat, 10) : clockFormat;
+
+/**
+ * Return datetime value string off to seconds
+ *
+ * @param {string} datetime in ISO format
+ * @param {boolean} withSeconds to specify if seconds is needed or not
+ *
+ * @returns {string} datetime after stripping of ms and seconds if selected to
+ */
+export const correctDateTimeToSeconds = (datetime: string, withSeconds: boolean) => {
+  if (withSeconds) {
+    return `${datetime.substring(0, datetime.indexOf("Z"))}.000Z`;
+  }
+  return `${datetime.substring(0, datetime.lastIndexOf(":"))}:00.000Z`;
+};
+
+/**
+ * Return time value string off to seconds
+ *
+ * @param {string} datetime in ISO format
+ * @param {boolean} withSeconds to specify if seconds is needed or not
+ *
+ * @returns {string} just time after stripping of ms and seconds if selected to
+ */
+export const timeCorrectedToSeconds = (datetime: string, withSeconds: boolean) => {
+  if (withSeconds) {
+    return datetime.substring(datetime.indexOf("T") + 1, datetime.indexOf("."));
+  }
+  return `${datetime.substring(
+    datetime.indexOf("T") + 1,
+    datetime.lastIndexOf(":")
+  )}:00`;
+};
+
+/**
+ * This function handles the cosmos blur handler of DateTime components
+ *
+ * @param {string | undefined} errorState for the selected datetime value
+ * @param {string} actualValue present in redux
+ * @param {string} formattedValue retrieved by trimming ISO to just Date/Time, also applying timezone if DateTime
+ * @param {object} actions object which has fire and blur callbacks
+ * @param {string} propName name of the property bound
+ * @param {object} pConn component's PConnect object which is useful to invoke validationApi
+ *
+ * @returns {void}
+ */
+export const datetimeFireChangeBlurEvents = (
+  errorState: string | undefined,
+  actualValue: string,
+  formattedValue: string,
+  actions: any,
+  propName: string,
+  pConn: any
+) => {
+
+  // TODO - clean up, we should not rely on timestamp from cosmos to check InComplete validation
+  // above triggerFieldChange should have validated this
+  if (errorState) {
+    pConn.getValidationApi().validate(errorState);
+  }
+  // BUG-640834 In errorState presist old values avoiding store update & re-render.
+  else{
+    if (formattedValue !== actualValue) {
+      actions.updateFieldValue(propName, formattedValue);
+    }
+    actions.triggerFieldChange(propName, formattedValue);
+  }
+};
+
+/**
+ * Return Date format for the locale passed
+ *
+ * @param {string} locale locale string
+ * @param {object} options options for format string
+ * @returns {string} dateformat for the locale
+ * Example : getDateFormat("pl-PL") returns "DD.MM.YYYY"
+ */
+export const getDateFormat = (locale: string, options: any) => {
+  return new Intl.DateTimeFormat(locale, options)
+    .formatToParts()
+    .map(({ type, value }) => {
+      switch (type) {
+        case "day":
+          return "DD";
+        case "month":
+          return "MM";
+        case "year":
+          return "YYYY";
+        case "hour":
+          return "hh";
+        case "minute":
+          return "mm";
+        case "second":
+          return "ss";
+        case "dayPeriod":
+          return "A";
+        case "literal":
+          return value;
+        default:
+          return "";
+      }
+    })
+    .join("");
+};
+
+/**
+ * Return boolean for the locale passed to specify if locale uses 12 hour format
+ *
+ * @param {string} locale locale string
+ * @returns {boolean} True or False for the locale
+ * Example : getDateFormat("pl-PL") returns false
+ */
+export const is12HClockFormat = (locale: string) => {
+  const meridiem = new Intl.DateTimeFormat(locale, {
+    hour: "numeric"
+  })
+    .formatToParts()
+    .find(({ type }) => type === "dayPeriod");
+  return !!(meridiem === null || meridiem === undefined
+    ? undefined
+    : meridiem.value);
+};
+
+/**
+ * Return Option object for Time formatting
+ *
+ * @param {boolean} withSeconds true or false depending on seconds to be included
+ * @param {boolean} is12h 12 hour format
+ * @returns {object} options object time formatting
+ * Example : getTimeOptions(false, true) returns {hour: 'numeric',minute: 'numeric',hour12: true}
+ */
+export const getTimeOptions = (withSeconds: boolean, is12h = false) => {
+  return {
+    hour: "numeric",
+    minute: "numeric",
+    ...(withSeconds && { second: "numeric" }),
+    hour12: is12h
+  };
+};
+
+/**
+ * Return Option object for Datetime formatting
+ *
+ * @param {boolean} withSeconds true or false depending on seconds to be included
+ * @param {boolean} is12h 12 hour format
+ * @returns {object} options object datetime formatting
+ * Example : getDateTimeOptions(false, true) returns {year: 'numeric',month: 'numeric',day: 'numeric',hour: 'numeric',minute: 'numeric',hour12: true}
+ */
+export const getDateTimeOptions = (withSeconds: boolean, is12h = false) => {
+  return {
+    year: "numeric",
+    month: "numeric",
+    day: "numeric",
+    ...getTimeOptions(withSeconds, is12h)
+  };
+};

package/tests/assets/original/components/createAll/Constellation/Pega_DXIL_MyTwoColumnDetails/Avatar.tsx

@@ -0,0 +1,76 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import  React from 'react';
+import { useEffect, useState } from 'react';
+import { Avatar as CosmosAvatar, withConfiguration } from '@pega/cosmos-react-core';
+import type { PConnFieldProps } from './PConnProps';
+
+
+// interface for props
+interface PegaDxilMyTwoColumnDetailsAvatarProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on TextInput here
+  metaObj: any;
+  showStatus: boolean;
+
+}
+
+function Avatar(props: PegaDxilMyTwoColumnDetailsAvatarProps) {
+  const { metaObj, showStatus = false } = props;
+  const [imageBlobUrl, setImageBlobUrl] = useState(null);
+  let userName: string;
+  let userIdentifier: string;
+
+  // TODO Below if conditions can be removed once we have apis to get worklist/mywork info
+  // This is non CaseView case (Dashboard, MyWork etc)
+  if (!metaObj) {
+    userName = PCore.getEnvironmentInfo().getOperatorName();
+    userIdentifier = PCore.getEnvironmentInfo().getOperatorIdentifier();
+  } else {
+    userName = metaObj.name;
+    userIdentifier = metaObj.ID;
+  }
+  if (!userName && userIdentifier) {
+    userName = userIdentifier;
+  }
+
+  useEffect(() => {
+    const imageKey = !metaObj ? PCore.getEnvironmentInfo().getOperatorImageInsKey() : metaObj.image;
+    if (imageKey) {
+      PCore.getAssetLoader()
+        .getSvcImage(imageKey)
+        .then((blob) => window.URL.createObjectURL(blob))
+        .then((imagePath) => setImageBlobUrl(imagePath as React.SetStateAction<any>));
+    }
+  }, [metaObj]);
+
+  if (showStatus) {
+    const currentState = PCore.getMessagingServiceManager().getUserPresence().getUserState(userIdentifier);
+    const [userState, setUserState]: any  = useState(currentState === 'online' ? 'active' : 'inactive');
+
+    const handleUserStateChange = ({ state } : any) => {
+      setUserState(state === 'online' ? 'active' : 'inactive');
+    };
+
+    useEffect(() => {
+      const subId = PCore.getMessagingServiceManager()
+        .getUserPresence()
+        // @ts-ignore
+        .subscribe(userIdentifier, handleUserStateChange);
+
+      return function cleanup() {
+        PCore.getMessagingServiceManager().getUserPresence().unsubscribe(userIdentifier, subId);
+      };
+    }, [userIdentifier, handleUserStateChange]);
+    return <CosmosAvatar name={userName} imageSrc={imageBlobUrl as React.SetStateAction<any>} status={userState} />;
+  }
+
+  // Do not render when userName does not exists
+  // TODO : In CNR case, pxRequestor is not available, please remove this condition once it populates
+  if (!userName) {
+    return null;
+  }
+
+  return <CosmosAvatar name={userName} imageSrc={imageBlobUrl as React.SetStateAction<any>} />;
+}
+
+
+export default withConfiguration(Avatar);

package/tests/assets/original/components/createAll/Constellation/Pega_DXIL_MyTwoColumnDetails/DetailsRender.tsx

@@ -0,0 +1,52 @@
+import { Fragment, type ReactElement } from 'react';
+import { FieldValueList } from '@pega/cosmos-react-core';
+
+interface DetailsRenderProps {
+  children?: never;
+  child: NonNullable<ReactElement>;
+}
+
+const DetailsRender = (props: DetailsRenderProps) => {
+  const { child } = props;
+
+  const kids = child.props.getPConnect().getChildren();
+
+  const displayCompArr: ReactElement[] = [];
+
+  Object.values(kids).forEach((value: any, i :number) => {
+    const { type } = value.getPConnect().getRawMetadata();
+    const { hideLabel, variant, testId, label } = value
+      .getPConnect()
+      .resolveConfigProps(value.getPConnect().getConfigProps());
+
+    let displayComp;
+    const key = JSON.stringify(value.getPConnect());
+    const key1 = key.concat(`-${i}`);
+
+    if (type === 'reference') {
+      const refElement = value.getPConnect().getComponent();
+
+      displayCompArr.push(refElement);
+    } else {
+      const element = value.getPConnect().getComponent();
+      const displayEl = <Fragment key={key}>{element}</Fragment>;
+
+      displayComp = (
+        <Fragment key={key1}>
+          <FieldValueList
+            style={{ columnGap: '0'}}
+            variant={hideLabel ? 'stacked' : variant}
+            data-testid={testId}
+            fields={[{ id: '1', name: hideLabel ? '' : label, value: displayEl }]}
+          />
+        </Fragment>
+      );
+
+      displayCompArr.push(displayComp);
+    }
+  });
+
+  return <>{displayCompArr}</>;
+};
+
+export default DetailsRender;

package/tests/assets/original/components/createAll/Constellation/Pega_DXIL_MyTwoColumnDetails/PConnProps.d.ts

@@ -0,0 +1,46 @@
+import  {PConnect } from '@pega/pcore-pconnect-typedefs';
+
+// PConnProps.d.ts
+// This gives us a place to have each component (which is most DX Components) that is
+//  expected to have a getPConnect extend its props (from BaseProps)
+//  such that every component will be expected to have a getPConnect() function
+//  that returns a PConnect object. (new/better way of doing .propTypes).
+//  This PConnProps can be extended to include other props that we know are in every component
+export interface PConnProps {
+  // getPConnect should exist for every C11n component. (add @ts-ignore in special cases where it isn't)
+  getPConnect: () => typeof PConnect;
+
+  // Allow any/all other key/value pairs in the BaseProps for now
+  //  TODO: refine which other props are always expected for various component
+  //    types and consider further interface "subclassing". For example, we may
+  //    want to create a "BasePropsForm" that gives guidance on required, readonly, etc.
+  //    and any other props that every Form component expects.
+  //    For example, see the PConnFieldProps below.
+  // NOTE: if you uncomment the line below, the PConnProps type will allow
+  //  otherwise undefined types to appear. This can be helpful for debugging
+  //  or when adding new components whose types aren't yet known.
+  // [key: string]: any;
+}
+
+
+// PConnFieldProps extends PConnProps to bring in the common properties that are
+// associated with most field components (ex: Dropdown, TextInput, etc.) in the
+//  components/field directory
+export interface PConnFieldProps extends PConnProps {
+  label: string,
+  required: boolean,
+  disabled: boolean,
+  value: any,
+  validatemessage: string,
+  status?: string,
+  onChange?: any,
+  onBlur?: any,
+  readOnly: boolean,
+  testId: string,
+  helperText: string,
+  displayMode?: string,
+  hideLabel: boolean,
+  placeholder?: string,
+  fieldMetadata?: any,
+  additionalProps?: any
+}

package/tests/assets/original/components/createAll/Constellation/Pega_DXIL_MyTwoColumnDetails/StatusWork.tsx

@@ -0,0 +1,26 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React from 'react';
+import { Status } from '@pega/cosmos-react-core';
+
+export default function StatusWorkRenderer({ value }: any) {
+  // need to cast variant
+  let variant: 'success' | 'urgent' | 'warn' | 'pending' | 'info';
+  variant = 'info';
+
+  const warnStrings = ['fail', 'cancel', 'reject', 'revoke', 'stopped', 'warn'];
+  const infoStrings = ['open', 'hold', 'info', 'new'];
+  const successStrings = ['resolved', 'completed', 'success'];
+  const pendingStrings = ['pending'];
+
+  if (new RegExp(warnStrings.join('|'), 'i').test(value)) {
+    variant = 'warn';
+  } else if (new RegExp(infoStrings.join('|'), 'i').test(value)) {
+    variant = 'info';
+  } else if (new RegExp(successStrings.join('|'), 'i').test(value)) {
+    variant = 'success';
+  } else if (new RegExp(pendingStrings.join('|'), 'i').test(value)) {
+    variant = 'pending';
+  }
+
+  return <Status variant={variant}>{value}</Status>;
+}

package/tests/assets/original/components/createAll/Constellation/Pega_DXIL_MyTwoColumnDetails/TwoColumnDetails.svg

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="100px" height="70px" viewBox="0 0 100 70" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>2 col </title>
+    <g id="Page-Config" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Page-layouts" transform="translate(-847.000000, -84.000000)">
+            <g id="2-col-" transform="translate(847.000000, 84.000000)">
+                <rect id="bg" stroke="#A5A8BC" stroke-width="0.5" fill="#E7E9EB" x="0.25" y="0.25" width="99.5" height="69.5"></rect>
+                <g id="white" transform="translate(3.000000, 3.000000)" fill="#FFFFFF">
+                    <rect id="Rectangle" x="0" y="0" width="94" height="66.5"></rect>
+                </g>
+                <g id="gray-copy-2" transform="translate(6.000000, 6.000000)" fill="#8084A7">
+                    <rect id="Rectangle" x="0" y="-2.84217094e-14" width="42" height="63.8"></rect>
+                    <rect id="Rectangle" x="46" y="-2.84217094e-14" width="42" height="63.8"></rect>
+                </g>
+                <g id="labels-copy" transform="translate(22.000000, 17.000000)" fill="#FFFFFF" font-family="OpenSans-Semibold, Open Sans" font-size="11" font-weight="500">
+                    <text id="B">
+                        <tspan x="45.75" y="12">B</tspan>
+                    </text>
+                    <g id="labels">
+                        <text id="A">
+                            <tspan x="0.75" y="12">A</tspan>
+                        </text>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>