Applied PR feedback for Gauge component

vcamarzana · vcamarzana · commit 8a450a4b22d3 · 2025-02-27T15:13:06.000+01:00
diff --git a/public/rich-components/gauge.svg b/public/rich-components/gauge.svg
diff --git a/src/common/components/mock-components/front-rich-components/gauge/gauge.tsx b/src/common/components/mock-components/front-rich-components/gauge/gauge.tsx
@@ -3,13 +3,13 @@ import { ShapeSizeRestrictions, ShapeType } from '@/core/model';
 import { forwardRef } from 'react';
 import { ShapeProps } from '../../shape.model';
 import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
-import { getProgressIndicatorPartsText } from './progressIndicator.utils';
 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 { getGaugePartsText } from './gauge.utils';
 
-const progressIndicatorShapeSizeRestrictions: ShapeSizeRestrictions = {
+const gaugeShapeSizeRestrictions: ShapeSizeRestrictions = {
   minWidth: 70,
   minHeight: 70,
   maxWidth: -1,
@@ -18,12 +18,12 @@ const progressIndicatorShapeSizeRestrictions: ShapeSizeRestrictions = {
   defaultHeight: 150,
 };
 
-export const getProgressIndicatorShapeSizeRestrictions =
-  (): ShapeSizeRestrictions => progressIndicatorShapeSizeRestrictions;
+export const getGaugeShapeSizeRestrictions = (): ShapeSizeRestrictions =>
+  gaugeShapeSizeRestrictions;
 
-const shapeType: ShapeType = 'progressIndicator';
+const shapeType: ShapeType = 'gauge';
 
-export const ProgressIndicator = forwardRef<any, ShapeProps>((props, ref) => {
+export const Gauge = forwardRef<any, ShapeProps>((props, ref) => {
   const {
     x,
     y,
@@ -36,13 +36,13 @@ export const ProgressIndicator = forwardRef<any, ShapeProps>((props, ref) => {
     ...shapeProps
   } = props;
   const restrictedSize = fitSizeToShapeSizeRestrictions(
-    progressIndicatorShapeSizeRestrictions,
+    gaugeShapeSizeRestrictions,
     width,
     height
   );
 
   const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
-  const { progressIndicatorTitle } = getProgressIndicatorPartsText(text);
+  const { gaugeValue } = getGaugePartsText(text);
   const { fontSize } = useShapeProps(otherProps, BASIC_SHAPE);
   const commonGroupProps = useGroupShapeProps(
     props,
@@ -52,13 +52,19 @@ export const ProgressIndicator = forwardRef<any, ShapeProps>((props, ref) => {
   );
   const { stroke, fill, textColor } = useShapeProps(otherProps, BASIC_SHAPE);
 
-  const progress = Number(progressIndicatorTitle || '83');
+  const parsedValue = gaugeValue?.trim().endsWith('%')
+    ? gaugeValue.slice(0, -1)
+    : gaugeValue;
+  const progress = Number(parsedValue) || 10;
+  const showPercentage = gaugeValue?.trim().endsWith('%');
+
   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);
+  console.log(radius, center, angle, fontSizeScaled);
   const arcPath = () => {
     const startAngle = -90;
     const endAngle = startAngle + angle;
@@ -86,14 +92,15 @@ export const ProgressIndicator = forwardRef<any, ShapeProps>((props, ref) => {
 
       {/* Percent */}
       <Text
-        x={center - radius / 2}
+        x={center - 10 - radius / 2}
         y={center - fontSizeScaled / 2}
-        text={(progressIndicatorTitle || '83') + '%'}
+        width={center + 10}
+        text={(parsedValue || '10%') + (showPercentage ? '%' : '')}
         fontFamily="Arial, sans-serif"
         fontSize={fontSizeScaled}
+        align="center"
         fill={textColor}
         fontStyle="bold"
-        align="center"
         letterSpacing={1}
         wrap="none"
         ellipsis={true}
diff --git a/src/common/components/mock-components/front-rich-components/gauge/gauge.utils.ts b/src/common/components/mock-components/front-rich-components/gauge/gauge.utils.ts
@@ -0,0 +1,8 @@
+interface GaugePartsText {
+  gaugeValue: string;
+}
+export const getGaugePartsText = (text: string): GaugePartsText => {
+  let gaugeValue = text ? text.replace(/\r?\n|\r/g, '').trim() : '';
+
+  return { gaugeValue };
+};
diff --git a/src/common/components/mock-components/front-rich-components/gauge/index.ts b/src/common/components/mock-components/front-rich-components/gauge/index.ts
@@ -0,0 +1 @@
+export * from './gauge';
diff --git a/src/common/components/mock-components/front-rich-components/index.ts b/src/common/components/mock-components/front-rich-components/index.ts
@@ -14,7 +14,6 @@ export * from './appBar';
 export * from './buttonBar/buttonBar';
 export * from './tabsbar';
 export * from './audio-player';
-export * from './progressIndicator/progressIndicator';
-
 export * from './videoconference';
 export * from './togglelightdark-shape';
+export * from './gauge/gauge';
diff --git a/src/common/components/mock-components/front-rich-components/progressIndicator/index.ts b/src/common/components/mock-components/front-rich-components/progressIndicator/index.ts
diff --git a/src/common/components/mock-components/front-rich-components/progressIndicator/progressIndicator.utils.ts b/src/common/components/mock-components/front-rich-components/progressIndicator/progressIndicator.utils.ts
diff --git a/src/core/model/index.ts b/src/core/model/index.ts
@@ -70,11 +70,10 @@ export type ShapeType =
   | 'tooltip'
   | 'slider'
   | 'link'
-  | 'progressIndicator'
   | 'cilinder'
   | 'videoconference'
-  | 'richtext';
-
+  | 'richtext'
+  | 'gauge';
 
 export const ShapeDisplayName: Record<ShapeType, string> = {
   multiple: 'multiple',
@@ -135,9 +134,9 @@ export const ShapeDisplayName: Record<ShapeType, string> = {
   tooltip: 'Tooltip',
   slider: 'Slider',
   richtext: 'Rich Text',
-  progressIndicator: 'ProgressIndicator',
   cilinder: 'Cilinder',
   videoconference: 'Videoconference',
+  gauge: 'Gauge',
 };
 
 export type EditType = 'input' | 'textarea' | 'imageupload';
diff --git a/src/pods/canvas/model/inline-editable.model.ts b/src/pods/canvas/model/inline-editable.model.ts
@@ -36,7 +36,7 @@ const inlineEditableShapes = new Set<ShapeType>([
   'datepickerinput',
   'browser',
   'modalDialog',
-  'progressIndicator',
+  'gauge',
 ]);
 
 // Check if a shape type allows inline editing
@@ -107,7 +107,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',
-  progressIndicator: '83%',
+  gauge: '10%',
   buttonBar: 'Button 1, Button 2, Button 3',
   tabsBar: 'Tab 1, Tab 2, Tab 3',
   link: 'Link',
@@ -141,7 +141,7 @@ export const getShapeEditInlineType = (
     case 'vertical-menu':
     case 'table':
     case 'modal':
-    case 'progressIndicator':
+    case 'gauge':
     case 'appBar':
     case 'tabsBar':
     case 'tooltip':
diff --git a/src/pods/canvas/model/shape-other-props.utils.ts b/src/pods/canvas/model/shape-other-props.utils.ts
@@ -67,12 +67,11 @@ export const generateDefaultOtherProps = (
         disabled: BASIC_SHAPE.DEFAULT_DISABLED,
       };
     case 'modal':
-    case 'progressIndicator':
+    case 'gauge':
       return {
         backgroundColor: '#d3d3d3',
         stroke: '#808080',
         textColor: BASIC_SHAPE.DEFAULT_FILL_TEXT,
-        strokeStyle: [],
       };
     case 'buttonBar':
       return {
diff --git a/src/pods/canvas/model/shape-size.mapper.ts b/src/pods/canvas/model/shape-size.mapper.ts
@@ -60,8 +60,8 @@ import {
   getToggleLightDarkShapeSizeRestrictions,
   getVerticalMenuShapeSizeRestrictions,
   getVideoPlayerShapeSizeRestrictions,
-  getProgressIndicatorShapeSizeRestrictions,
   getVideoconferenceShapeSizeRestrictions,
+  getGaugeShapeSizeRestrictions,
   // other imports
 } from '@/common/components/mock-components/front-rich-components';
 import {
@@ -145,9 +145,9 @@ const shapeSizeMap: Record<ShapeType, () => ShapeSizeRestrictions> = {
   tooltip: getTooltipShapeSizeRestrictions,
   slider: getSliderShapeSizeRestrictions,
   audioPlayer: getAudioPlayerShapeSizeRestrictions,
-  progressIndicator: getProgressIndicatorShapeSizeRestrictions,
   cilinder: getCilinderShapeSizeRestrictions,
   videoconference: getVideoconferenceShapeSizeRestrictions,
+  gauge: getGaugeShapeSizeRestrictions,
 };
 
 export default shapeSizeMap;
diff --git a/src/pods/canvas/shape-renderer/index.tsx b/src/pods/canvas/shape-renderer/index.tsx
@@ -41,9 +41,9 @@ import {
   renderModal,
   renderButtonBar,
   renderTabsBar,
-  renderProgressIndicator,
   renderToggleLightDark,
   renderVideoconference,
+  renderGauge,
 } from './simple-rich-components';
 import {
   renderDiamond,
@@ -191,12 +191,13 @@ export const renderShapeComponent = (
       return renderTooltip(shape, shapeRenderedProps);
     case 'slider':
       return renderSlider(shape, shapeRenderedProps);
-    case 'progressIndicator':
-      return renderProgressIndicator(shape, shapeRenderedProps);
     case 'cilinder':
       return renderCilinder(shape, shapeRenderedProps);
     case 'videoconference':
       return renderVideoconference(shape, shapeRenderedProps);
+    case 'gauge':
+      return renderGauge(shape, shapeRenderedProps);
+
     default:
       return renderNotFound(shape, shapeRenderedProps);
   }
diff --git a/src/pods/canvas/shape-renderer/simple-rich-components/gauge.renderer.tsx b/src/pods/canvas/shape-renderer/simple-rich-components/gauge.renderer.tsx
@@ -1,16 +1,16 @@
-import { ProgressIndicator } from '@/common/components/mock-components/front-rich-components';
+import { Gauge } from '@/common/components/mock-components/front-rich-components';
 import { ShapeRendererProps } from '../model';
 import { ShapeModel } from '@/core/model';
 
-export const renderProgressIndicator = (
+export const renderGauge = (
   shape: ShapeModel,
   shapeRenderedProps: ShapeRendererProps
 ) => {
   const { handleSelected, shapeRefs, handleDragEnd, handleTransform } =
     shapeRenderedProps;
 
   return (
-    <ProgressIndicator
+    <Gauge
       id={shape.id}
       key={shape.id}
       ref={shapeRefs.current[shape.id]}
diff --git a/src/pods/canvas/shape-renderer/simple-rich-components/index.ts b/src/pods/canvas/shape-renderer/simple-rich-components/index.ts
@@ -12,7 +12,7 @@ export * from './table.renderer';
 export * from './togglelightdark.renderer';
 export * from './modal.renderer';
 export * from './pie-chart.renderer';
-export * from './progressIndicator.renderer';
+export * from './gauge.renderer';
 export * from './table.renderer';
 export * from './tabsbar.renderer';
 export * from './vertical-menu.renderer';
diff --git a/src/pods/galleries/rich-components-gallery/rich-components-gallery-data/index.ts b/src/pods/galleries/rich-components-gallery/rich-components-gallery-data/index.ts
@@ -16,8 +16,8 @@ export const mockRichComponentsCollection: ItemInfo[] = [
   { thumbnailSrc: '/rich-components/map.svg', type: 'map' },
   { thumbnailSrc: '/rich-components/modal.svg', type: 'modal' },
   {
-    thumbnailSrc: '/rich-components/progressIndicator.svg',
-    type: 'progressIndicator',
+    thumbnailSrc: '/rich-components/gauge.svg',
+    type: 'gauge',
   },
   { thumbnailSrc: '/rich-components/pie.svg', type: 'pie' },
   { thumbnailSrc: '/rich-components/table.svg', type: 'table' },
diff --git a/src/pods/properties/components/icon-selector/modal/icons.ts b/src/pods/properties/components/icon-selector/modal/icons.ts
@@ -1877,15 +1877,15 @@ export const iconCollection: IconInfo[] = [
     categories: ['IT'],
   },
   {
-    name: 'ProgressIndicator',
-    filename: 'progressIndicator.svg',
-    searchTerms: ['progressIndicator', 'loading', 'wait', 'progress'],
+    name: 'Gauge',
+    filename: 'gauge.svg',
+    searchTerms: ['gauge', 'loading', 'wait', 'progress'],
     categories: ['IT'],
   },
   {
-    name: 'ProgressIndicator gap',
-    filename: 'progressIndicatorgap.svg',
-    searchTerms: ['progressIndicator', 'loading', 'wait', 'progress'],
+    name: 'Gauge gap',
+    filename: 'gaugegap.svg',
+    searchTerms: ['gauge', 'loading', 'wait', 'progress'],
     categories: ['IT'],
   },
   {
