Merge pull request #707 from Lemoncode/feature/#567-create-a-circular-progress-shape-under-rich-components

Feature /#567 Create a circular progress shape under rich components

Author: brauliodiez

package-lock.json

@@ -0,0 +1,109 @@
+import { Circle, Group, Path, Text } from 'react-konva';
+import { ShapeSizeRestrictions, ShapeType } from '@/core/model';
+import { forwardRef } from 'react';
+import { ShapeProps } from '../../shape.model';
+import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
+import { useShapeProps } from '../../../shapes/use-shape-props.hook';
+
+import { BASIC_SHAPE } from '@/common/components/mock-components/front-components/shape.const';
+import { useGroupShapeProps } from '../../mock-components.utils';
+import {
+  endsWhithPercentageSymbol,
+  extractNumbersAsTwoDigitString,
+} from './gauge.utils';
+
+const gaugeShapeSizeRestrictions: ShapeSizeRestrictions = {
+  minWidth: 70,
+  minHeight: 70,
+  maxWidth: -1,
+  maxHeight: -1,
+  defaultWidth: 150,
+  defaultHeight: 150,
+};
+
+export const getGaugeShapeSizeRestrictions = (): ShapeSizeRestrictions =>
+  gaugeShapeSizeRestrictions;
+
+const shapeType: ShapeType = 'gauge';
+
+export const Gauge = forwardRef<any, ShapeProps>((props, ref) => {
+  const {
+    x,
+    y,
+    width,
+    height,
+    id,
+    onSelected,
+    text,
+    otherProps,
+    ...shapeProps
+  } = props;
+  const restrictedSize = fitSizeToShapeSizeRestrictions(
+    gaugeShapeSizeRestrictions,
+    width,
+    height
+  );
+
+  const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
+  const { fontSize } = useShapeProps(otherProps, BASIC_SHAPE);
+  const commonGroupProps = useGroupShapeProps(
+    props,
+    restrictedSize,
+    shapeType,
+    ref
+  );
+  const { stroke, fill, textColor } = useShapeProps(otherProps, BASIC_SHAPE);
+
+  const numericPart = extractNumbersAsTwoDigitString(text);
+
+  const progress = Number(numericPart);
+  const displayValue = endsWhithPercentageSymbol(text)
+    ? `${numericPart}%`
+    : numericPart;
+
+  const size = Math.min(restrictedWidth, restrictedHeight);
+  const strokeWidth = Math.min(restrictedWidth, restrictedHeight) / 10;
+  const radius = (size - strokeWidth) / 2;
+  const center = size / 2;
+  const angle = (progress / 100.01) * 360;
+  const fontSizeScaled = fontSize * (size / 80);
+  const arcPath = () => {
+    const startAngle = -90;
+    const endAngle = startAngle + angle;
+    const largeArcFlag = angle > 180 ? 1 : 0;
+    const startX = center + radius * Math.cos((Math.PI * startAngle) / 180);
+    const startY = center + radius * Math.sin((Math.PI * startAngle) / 180);
+    const endX = center + radius * Math.cos((Math.PI * endAngle) / 180);
+    const endY = center + radius * Math.sin((Math.PI * endAngle) / 180);
+    return `M ${startX} ${startY} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${endX} ${endY}`;
+  };
+  return (
+    <Group {...commonGroupProps} {...shapeProps}>
+      {/* Background */}
+      <Circle
+        x={center}
+        y={center}
+        radius={radius}
+        fill={fill}
+        stroke={fill}
+        strokeWidth={strokeWidth}
+      />
+
+      {/* Moving Arc */}
+      <Path data={arcPath()} stroke={stroke} strokeWidth={strokeWidth + 1} />
+
+      {/* Percent */}
+      <Text
+        x={center - 10 - radius / 2}
+        y={center - fontSizeScaled / 2}
+        width={center + 10}
+        text={displayValue}
+        fontFamily="Arial, sans-serif"
+        fontSize={fontSizeScaled}
+        align="center"
+        fill={textColor}
+        fontStyle="bold"
+      />
+    </Group>
+  );
+});

public/rich-components/gauge.svg

@@ -0,0 +1,8 @@
+export const extractNumbersAsTwoDigitString = (text: string): string => {
+  const numbersAsString = text.replace(/\D/g, '');
+  return numbersAsString === '100' ? '100' : numbersAsString.slice(0, 2) || '0';
+};
+
+export const endsWhithPercentageSymbol = (text: string): boolean => {
+  return text.trim().endsWith('%');
+};

src/common/components/mock-components/front-rich-components/gauge/gauge.tsx

@@ -0,0 +1 @@
+export * from './gauge';

src/common/components/mock-components/front-rich-components/gauge/gauge.utils.ts

@@ -17,3 +17,4 @@ export * from './audio-player';
 export * from './loading-indicator';
 export * from './videoconference';
 export * from './togglelightdark-shape';
+export * from './gauge/gauge';

src/common/components/mock-components/front-rich-components/gauge/index.ts

@@ -74,7 +74,8 @@ export type ShapeType =
   | 'richtext'
   | 'loading-indicator'
   | 'videoconference'
-  | 'richtext';
+  | 'richtext'
+  | 'gauge';
 
 export const ShapeDisplayName: Record<ShapeType, string> = {
   multiple: 'multiple',
@@ -138,6 +139,7 @@ export const ShapeDisplayName: Record<ShapeType, string> = {
   cilinder: 'Cilinder',
   'loading-indicator': 'Loading',
   videoconference: 'Videoconference',
+  gauge: 'Gauge',
 };
 
 export type EditType = 'input' | 'textarea' | 'imageupload';

src/common/components/mock-components/front-rich-components/index.ts

@@ -36,6 +36,7 @@ const inlineEditableShapes = new Set<ShapeType>([
   'datepickerinput',
   'browser',
   'modalDialog',
+  'gauge',
   'loading-indicator',
 ]);
 
@@ -78,6 +79,7 @@ const shapeTypesWithDefaultText = new Set<ShapeType>([
   'browser',
   'modalDialog',
   'loading-indicator',
+  'gauge',
 ]);
 
 // Map of ShapeTypes to their default text values
@@ -108,6 +110,7 @@ const defaultTextValueMap: Partial<Record<ShapeType, string>> = {
   modal:
     'Alert\nWarning: The action you are about to perform may affect existing data. Are you sure you want to proceed? Once confirmed, this action cannot be undone.\nConfirm,Cancel',
   appBar: 'AppBar',
+  gauge: '10%',
   buttonBar: 'Button 1, Button 2, Button 3',
   tabsBar: 'Tab 1, Tab 2, Tab 3',
   link: 'Link',

src/core/model/index.ts

@@ -68,6 +68,12 @@ export const generateDefaultOtherProps = (
         disabled: BASIC_SHAPE.DEFAULT_DISABLED,
       };
     case 'modal':
+    case 'gauge':
+      return {
+        backgroundColor: '#d3d3d3',
+        stroke: '#808080',
+        textColor: BASIC_SHAPE.DEFAULT_FILL_TEXT,
+      };
     case 'buttonBar':
       return {
         stroke: BASIC_SHAPE.DEFAULT_STROKE_COLOR,

src/pods/canvas/model/inline-editable.model.ts

@@ -62,6 +62,7 @@ import {
   getVerticalMenuShapeSizeRestrictions,
   getVideoPlayerShapeSizeRestrictions,
   getVideoconferenceShapeSizeRestrictions,
+  getGaugeShapeSizeRestrictions,
   // other imports
 } from '@/common/components/mock-components/front-rich-components';
 import {
@@ -148,6 +149,7 @@ const shapeSizeMap: Record<ShapeType, () => ShapeSizeRestrictions> = {
   cilinder: getCilinderShapeSizeRestrictions,
   'loading-indicator': getLoadIndicatorSizeRestrictions,
   videoconference: getVideoconferenceShapeSizeRestrictions,
+  gauge: getGaugeShapeSizeRestrictions,
 };
 
 export default shapeSizeMap;