Merge pull request #712 from Lemoncode/dev

Gauge

Author: brauliodiez

index.html

@@ -335,7 +335,6 @@ <h1>
               Share your ideas as low-fidelity mocks in minutes, perfect for
               getting started.
             </p>
-            <p class="community">Community preview</p>
           </div>
           <div>
             <div class="video">

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/assets/omar-lorenzo.jpeg

@@ -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('%');
+};

public/rich-components/gauge.svg

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

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

@@ -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/gauge.utils.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/gauge/index.ts

@@ -9,8 +9,7 @@ export const AboutPod = () => {
     <div className={classes.container}>
       <QuickmockLogoComponent styleClass={classes.projectLogo} />
       <h2 className={classes.projectName}>Quickmock</h2>
-      <p className={classes.projectVersion}>Version 0.0</p>
-      <p className={classes.projectCommunity}>Community preview</p>
+      <p className={classes.projectVersion}>Version 1.0</p>
       <DevelopmentTeamComponent />
     </div>
   );