Added Statistics calculation

Statistics now show calculated values

node_modules/@mui/x-date-pickers/esm/TimeClock/ClockNumber.js

@@ -0,0 +1,102 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["className", "classes", "disabled", "index", "inner", "label", "selected"];
+import * as React from 'react';
+import clsx from 'clsx';
+import { styled, useThemeProps } from '@mui/material/styles';
+import composeClasses from '@mui/utils/composeClasses';
+import { CLOCK_WIDTH, CLOCK_HOUR_WIDTH } from "./shared.js";
+import { getClockNumberUtilityClass, clockNumberClasses } from "./clockNumberClasses.js";
+import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useUtilityClasses = (classes, ownerState) => {
+  const slots = {
+    root: ['root', ownerState.isClockNumberSelected && 'selected', ownerState.isClockNumberDisabled && 'disabled']
+  };
+  return composeClasses(slots, getClockNumberUtilityClass, classes);
+};
+const ClockNumberRoot = styled('span', {
+  name: 'MuiClockNumber',
+  slot: 'Root',
+  overridesResolver: (_, styles) => [styles.root, {
+    [`&.${clockNumberClasses.disabled}`]: styles.disabled
+  }, {
+    [`&.${clockNumberClasses.selected}`]: styles.selected
+  }]
+})(({
+  theme
+}) => ({
+  height: CLOCK_HOUR_WIDTH,
+  width: CLOCK_HOUR_WIDTH,
+  position: 'absolute',
+  left: `calc((100% - ${CLOCK_HOUR_WIDTH}px) / 2)`,
+  display: 'inline-flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  borderRadius: '50%',
+  color: (theme.vars || theme).palette.text.primary,
+  fontFamily: theme.typography.fontFamily,
+  '&:focused': {
+    backgroundColor: (theme.vars || theme).palette.background.paper
+  },
+  [`&.${clockNumberClasses.selected}`]: {
+    color: (theme.vars || theme).palette.primary.contrastText
+  },
+  [`&.${clockNumberClasses.disabled}`]: {
+    pointerEvents: 'none',
+    color: (theme.vars || theme).palette.text.disabled
+  },
+  variants: [{
+    props: {
+      isClockNumberInInnerRing: true
+    },
+    style: _extends({}, theme.typography.body2, {
+      color: (theme.vars || theme).palette.text.secondary
+    })
+  }]
+}));
+
+/**
+ * @ignore - internal component.
+ */
+export function ClockNumber(inProps) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiClockNumber'
+  });
+  const {
+      className,
+      classes: classesProp,
+      disabled,
+      index,
+      inner,
+      label,
+      selected
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const {
+    ownerState: pickerOwnerState
+  } = usePickerPrivateContext();
+  const ownerState = _extends({}, pickerOwnerState, {
+    isClockNumberInInnerRing: inner,
+    isClockNumberSelected: selected,
+    isClockNumberDisabled: disabled
+  });
+  const classes = useUtilityClasses(classesProp, ownerState);
+  const angle = index % 12 / 12 * Math.PI * 2 - Math.PI / 2;
+  const length = (CLOCK_WIDTH - CLOCK_HOUR_WIDTH - 2) / 2 * (inner ? 0.65 : 1);
+  const x = Math.round(Math.cos(angle) * length);
+  const y = Math.round(Math.sin(angle) * length);
+  return /*#__PURE__*/_jsx(ClockNumberRoot, _extends({
+    className: clsx(classes.root, className),
+    "aria-disabled": disabled ? true : undefined,
+    "aria-selected": selected ? true : undefined,
+    role: "option",
+    style: {
+      transform: `translate(${x}px, ${y + (CLOCK_WIDTH - CLOCK_HOUR_WIDTH) / 2}px`
+    },
+    ownerState: ownerState
+  }, other, {
+    children: label
+  }));
+}