pixel-react 1.6.0 → 1.6.2

package/src/components/Charts/MultiRadialChart/MultiRadialChart.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { MultiRadialChartProps, ChartItem, LegendType } from './types';
 import './MultiRadialChart.scss';
 import Typography from '../../Typography';
+import { truncateText } from '../../../utils/truncateText/truncateText';
 
 const calculateArc = (
   centerX: number,
@@ -30,7 +31,17 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
   legendType = 'numberLegend',
   isLegendDetails = true,
 }) => {
-  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+  const [tooltip, setTooltip] = useState<{
+    visible: boolean;
+    x: number;
+    y: number;
+    content: string;
+  }>({
+    visible: false,
+    x: 0,
+    y: 0,
+    content: '',
+  });
 
   const totalBarValue = barValues.reduce(
     (acc, status) => acc + status.value,
@@ -59,7 +70,11 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
                 >
                   {item.value}
                 </Typography>
-                <Typography fontSize={10} className="ff-legend-key">
+                <Typography
+                  fontSize={10}
+                  className="ff-legend-key"
+                  color="  var(--text-color)"
+                >
                   {item.label}
                 </Typography>
               </div>
@@ -80,7 +95,12 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
                 >
                   <Typography fontSize={10}>{item.value}</Typography>
                 </span>
-                <Typography className="ff-legend-key">{item.label}</Typography>
+                <Typography
+                  className="ff-legend-key"
+                  color="  var(--text-color)"
+                >
+                  {item.label}
+                </Typography>
               </div>
             ))}
           </div>
@@ -91,6 +111,38 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
     }
   };
 
+  const handleMouseEnter = (e: React.MouseEvent, content: string) => {
+    const { clientX, clientY } = e;
+    setTooltip({
+      visible: true,
+      x: clientX,
+      y: clientY,
+      content: content,
+    });
+  };
+
+  const handleMouseMove = (e: React.MouseEvent) => {
+    const { clientX, clientY } = e;
+    setTooltip((prev) => ({
+      ...prev,
+      x: clientX,
+      y: clientY,
+    }));
+  };
+
+  const handleMouseLeave = () => {
+    setTooltip({ visible: false, x: 0, y: 0, content: '' });
+  };
+
+  const textData = (text: string, maxLength: number) => {
+    return text.length > maxLength ? text.slice(0, maxLength) + '...' : text;
+  };
+  const getArcColorFromTooltip = () => {
+    if (!tooltip.visible) return '';
+    const value = tooltip.content.split(':')[1]?.trim();
+    const matchingBar = barValues.find((val) => `${val.value}` === value);
+    return matchingBar?.arcColor || '';
+  };
   return (
     <div
       className={`ff-multi-radial-chart-container ${
@@ -148,8 +200,14 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
                     stroke={values.arcColor}
                     strokeWidth={lineWidth}
                     strokeLinecap={lineCap === 'square' ? 'butt' : 'round'}
-                    onMouseEnter={() => setHoveredIndex(originalIndex)}
-                    onMouseLeave={() => setHoveredIndex(null)}
+                    onMouseEnter={(e) =>
+                      handleMouseEnter(
+                        e,
+                        `${values.barLabel || 'Data'}: ${values.value}`
+                      )
+                    }
+                    onMouseMove={handleMouseMove}
+                    onMouseLeave={handleMouseLeave}
                     style={{
                       pointerEvents: 'stroke',
                     }}
@@ -160,42 +218,69 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
             <text
               x="0"
               y="-20"
-              fill={
-                hoveredIndex !== null ? barValues[hoveredIndex]?.arcColor : ''
-              }
+              fill={getArcColorFromTooltip()}
               textAnchor="middle"
               dominantBaseline="central"
             >
-              {hoveredIndex !== null ? (
+              {tooltip.visible ? (
                 <>
-                  <tspan x="0" dy={0} className="ff-center-text">
-                    {barValues[hoveredIndex]?.value}
+                  <tspan x="0" dy={10} className="ff-center-text-tooltip">
+                    {textData(tooltip.content.split(':')[1]?.trim() || '', 5)}
                   </tspan>
-                  <tspan x="0" dy={18} className="ff-center-text">
-                    {barValues[hoveredIndex]?.barLabel}
+                  <tspan x="0" dy={18} className="ff-center-text-tooltip">
+                    {textData(tooltip.content.split(':')[0] ?? '', 8)}
                   </tspan>
                 </>
               ) : (
-                labelLines.map((line, index) => (
-                  <tspan
-                    key={index}
-                    x="0"
-                    dy={index === 0 ? 0 : 18}
-                    className="ff-center-text"
-                  >
-                    {line}
-                  </tspan>
-                ))
+                <>
+                  {labelLines.map((line, index) => {
+                    if (index === 0) {
+                      const [firstWord, ...restWords] = line.split(' ');
+                      return (
+                        <tspan key={index}>
+                          <tspan x="0" dy="0" className="ff-center-first-text">
+                            {firstWord}
+                          </tspan>
+                          <tspan x="0" dy={18} className="ff-center-text">
+                            {restWords.join(' ')}
+                          </tspan>
+                        </tspan>
+                      );
+                    }
+                    return (
+                      <tspan
+                        key={index}
+                        x="0"
+                        dy={index === 0 ? 0 : 18}
+                        className="ff-center-text"
+                      >
+                        {line}
+                      </tspan>
+                    );
+                  })}
+                </>
               )}
             </text>
           </g>
         </svg>
+        {tooltip.visible && (
+          <div
+            className="ff-multi-radial-tooltip"
+            style={{
+              top: tooltip.y + 10,
+              left: tooltip.x + 10,
+              zIndex: 1000,
+            }}
+          >
+            {tooltip.content}
+          </div>
+        )}
       </div>
       {isLegendDetails &&
         renderLegend(
           barValues.map((value) => ({
             ...value,
-            label: value.barLabel || '',
+            label: truncateText(value?.barLabel, 8),
             key: value.value.toString(),
           })),
           legendType

package/src/components/Charts/PieChart/PieChart.scss

@@ -1,3 +1,4 @@
+@use '../../../assets/styles/fonts';
 .ff-pie-chart-container {
   display: flex;
   flex-direction: column;
@@ -18,11 +19,9 @@
     border-radius: 4px;
     background-color: var(--tooltip-bg-color);
     color: var(--primary-icon-color);
-    border: 10px solid;
-    font-size: 14px;
+    @extend .fontSm;
     font-weight: 400;
     pointer-events: none;
-    opacity: 0.8;
   }
 
   .ff-pie-chart-legend {
@@ -35,5 +34,8 @@
       align-items: center;
       text-align: center;
     }
+    .ff-pie-chart-legend-value {
+      color: var(--drawer-title-color);
+    }
   }
 }

package/src/components/Charts/PieChart/PieChart.tsx

@@ -119,7 +119,7 @@ const PieChart: React.FC<PieChartProps> = ({
         fontSize={10}
         fontWeight="regular"
         lineHeight="18px"
-        className="ff-Pie-chart-legend-value"
+        className="ff-pie-chart-legend-value"
       >
         {item.label}
       </Typography>
@@ -178,7 +178,6 @@ const PieChart: React.FC<PieChartProps> = ({
           style={{
             top: tooltipPosition.y,
             left: tooltipPosition.x,
-            border: `2px solid ${tooltip.color}`,
           }}
         >
           {tooltip.label} : {tooltip.value}

package/src/components/DatePicker/DatePicker.scss

@@ -118,7 +118,7 @@
       margin: 0 5px;
       border: 1px solid var(--border-color);
       background-color: var(--toggle-button-bg-color);
-      box-shadow: 0 -2px 2px 0 var(--ff-mini-modal-box-shadow);
+      box-shadow: 0 -1px 2px 0 var(--ff-mini-modal-box-shadow);
       padding: 0px;
       border-radius: 30%;
       cursor: pointer;
@@ -231,6 +231,7 @@
           width: 100%;
           text-align: center;
           border-radius: 4px 0 0 4px;
+          font-weight: 400;
           @extend .fontSm;
 
           &::placeholder {
@@ -325,10 +326,23 @@
         }
 
         .ff-time-period-icon {
+          svg {
+            path {
+              fill: var(--default-icon-color);
+            }
+          }
           margin-left: auto;
           pointer-events: none;
         }
 
+        &:hover {
+          svg {
+            path {
+              fill: var(--brand-color);
+            }
+          }
+        }
+
         .ff-time-period-options {
           position: fixed;
           z-index: 100;

package/src/components/Excel/ExcelFile/ExcelFile.scss

@@ -18,7 +18,7 @@
     // }
 
     .ff-excel-sheet-bar {
-      margin-left: 83px;
+      margin-left: 60px;
       display: flex;
       height: 36px;
       align-items: center;

package/src/components/Excel/ExcelFile/ExcelFile.tsx

@@ -34,9 +34,7 @@ interface ExcelFileProps {
 
 const ExcelFile: React.FC<ExcelFileProps> = ({
   excelData,
-  onSave = (saveData) => {
-    saveData();
-  },
+  onSave = (saveData) => {saveData()},
 }) => {
   const [sheetNames, setSheetNames] = useState<string[]>([]);
   const [contextMenu, setContextMenu] = React.useState<ContextMenuState>({
@@ -51,6 +49,8 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
       color: 'var(--text-color)',
       backgroundColor: 'var(--drawer-footer-bg)',
       borderColor: 'var(--toggle-strip-color)',
+      textDecoration: 'none',
+      textDecorationStyle: 'solid',
     },
   };
 
@@ -128,7 +128,7 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
             }
             spreadsheetData[rowIndex][colIndex] = {
               value: checkVal(cell.value),
-              style: convertStyleToFrontend(cell?.style),
+              style: convertStyleToFrontend(cell?.style) ,
               type: true,
             };
           }
@@ -143,6 +143,23 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
       setSelectedSheetData(newWorksheetsData[firstSheetName]);
     }
   }, []);
+  const handleSave = React.useCallback(
+    (event: KeyboardEvent) => {
+      if (event.ctrlKey && event.key === 's') {
+        event.preventDefault();
+        event.stopPropagation();
+        onSaveWorksheetData();
+      }
+    },
+    [onSave]
+  );
+  
+  React.useEffect(() => {
+    document.addEventListener('keydown', handleSave);
+    return () => {
+      document.removeEventListener('keydown', handleSave);
+    };
+  }, [handleSave]);
 
   const onSaveWorksheetData = () => {
     const savedData = {
@@ -159,21 +176,18 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
             }, -1);
 
             const filteredRow = row
-              .map((cell, index) => {
-                if (cell && cell.value !== null) {
-                  return {
-                    value: cell.value,
-                    styles: convertStyleToBackend(cell.style ?? {}),
-                  };
-                } else if ((cell && cell.type) || index <= lastIndex) {
-                  return {
-                    value: '',
-                    styles: convertStyleToBackend(cell?.style ?? {}),
-                  };
-                }
-                return null;
-              })
-              .filter((cell) => cell !== null);
+            .map((cell, index) => {
+              if (cell && cell.value !== null) {
+                return {
+                  value: cell.value,
+                  styles: convertStyleToBackend(cell.style ?? {}),
+                };
+              } else if (cell && cell.type || index <= lastIndex) {
+                return { value: '', styles: convertStyleToBackend(cell?.style ?? {}) };
+              }
+              return null;
+            })
+            .filter((cell) => cell !== null);
 
             return filteredRow.length > 0 ? filteredRow : [];
           }) || [];
@@ -194,7 +208,7 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
     onSave(savedData);
     toast.success('File saved successfully!');
   };
-
+  
   const onEvaluateChange = (data: Matrix.Matrix<CellBase>) => {
     setWorksheetsData((prev) => ({ ...prev, [pageRef.current]: data }));
     onSaveWorksheetData();

package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.tsx

@@ -444,7 +444,6 @@ const Spreadsheet = <CellType extends Types.CellBase>(
     () => (
       <div className="ff-excel">
         <ExcelToolBar
-          data={props.data}
           onBold={onBold}
           onItalic={onItalic}
           setUnderlineType={setUnderlineType}

package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts

@@ -12,7 +12,7 @@ import {
 
 export function applyBoldToCells(
   currentData: Matrix.Matrix<Types.CellBase<any>>,
-  selectedRange: PointRange
+  selectedRange: PointRange,
 ): Matrix.Matrix<Types.CellBase<any>> {
   if (!selectedRange) {
     return currentData;
@@ -21,24 +21,33 @@ export function applyBoldToCells(
   const { start, end } = selectedRange;
 
   let updatedData = currentData;
+  let anyBold = false;
 
   for (let row = start.row; row <= end.row; row++) {
     for (let col = start.column; col <= end.column; col++) {
       const currentCell = Matrix.get({ row, column: col }, updatedData);
+      if (!currentCell) continue;
 
-      if (!currentCell) {
-        continue;
+      if (currentCell.style?.fontWeight === 'bold') {
+        anyBold = true;
+        break;
       }
+    }
+    if (anyBold) break;
+  }
+
+  for (let row = start.row; row <= end.row; row++) {
+    for (let col = start.column; col <= end.column; col++) {
+      const currentCell = Matrix.get({ row, column: col }, updatedData);
+      if (!currentCell) continue;
 
       const updatedCell = {
         ...currentCell,
         style: {
           ...currentCell.style,
-          fontWeight:
-            currentCell.style?.fontWeight !== 'bold' ? 'bold' : 'normal',
+          fontWeight: anyBold ? 'normal' : 'bold',
         },
       };
-
       updatedData = Matrix.set({ row, column: col }, updatedCell, updatedData);
     }
   }
@@ -57,24 +66,33 @@ export function applyItalicToCells(
   const { start, end } = selectedRange;
 
   let updatedData = currentData;
+  let anyItalic = false;
 
   for (let row = start.row; row <= end.row; row++) {
     for (let col = start.column; col <= end.column; col++) {
       const currentCell = Matrix.get({ row, column: col }, updatedData);
+      if (!currentCell) continue;
 
-      if (!currentCell) {
-        continue;
+      if (currentCell.style?.fontStyle === 'italic') {
+        anyItalic = true;
+        break;
       }
+    }
+    if (anyItalic) break;
+  }
+
+  for (let row = start.row; row <= end.row; row++) {
+    for (let col = start.column; col <= end.column; col++) {
+      const currentCell = Matrix.get({ row, column: col }, updatedData);
+      if (!currentCell) continue;
 
       const updatedCell = {
         ...currentCell,
         style: {
           ...currentCell.style,
-          fontStyle:
-            currentCell.style?.fontStyle !== 'italic' ? 'italic' : 'normal',
+          fontStyle: anyItalic ? 'normal' : 'italic',
         },
       };
-
       updatedData = Matrix.set({ row, column: col }, updatedCell, updatedData);
     }
   }
@@ -289,23 +307,34 @@ export function applyUnderlineToCells(
   const { start, end } = selectedRange;
 
   let updatedData = currentData;
+  let anyUnderlined = false;
 
   for (let row = start.row; row <= end.row; row++) {
     for (let col = start.column; col <= end.column; col++) {
       const currentCell = Matrix.get({ row, column: col }, updatedData);
+      if (!currentCell) continue;
 
-      if (!currentCell) {
-        continue;
+      if (currentCell.style?.textDecoration === 'underline') {
+        anyUnderlined = true;
+        break;
       }
+    }
+    if (anyUnderlined) break;
+  }
+
+  for (let row = start.row; row <= end.row; row++) {
+    for (let col = start.column; col <= end.column; col++) {
+      const currentCell = Matrix.get({ row, column: col }, updatedData);
+      if (!currentCell) continue;
 
       let updatedCell;
-      if (!active) {
+      if (!active || anyUnderlined) {
         updatedCell = {
           ...currentCell,
           style: {
             ...currentCell.style,
             textDecoration: 'none',
-            textDecorationStyle: 'none' as TextDecorationStyle,
+            textDecorationStyle: 'solid' as TextDecorationStyle,
           },
         };
       } else {

package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx

@@ -7,10 +7,11 @@ import Select from '../../Select';
 import { CellBase } from '../ExcelFile/ExcelFileComponents';
 import * as Matrix from '../ExcelFile/ExcelFileComponents/matrix';
 import ColorBarSelector from '../ColorBarSelector/ColorBarSelector';
+import useSelector from '../ExcelFile/ExcelFileComponents/use-selector';
+import { convertStyleToBackend } from '../dataConversion';
 
 interface ExcelToolBarProps {
   toolbar?: 'show' | 'disable' | 'hide';
-  data: Matrix.Matrix<CellBase>;
   onBold: (data: Matrix.Matrix<CellBase>) => void;
   onItalic: (data: Matrix.Matrix<CellBase>) => void;
   setUnderlineType: (
@@ -33,7 +34,6 @@ interface ExcelToolBarProps {
 
 const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
   toolbar = 'show',
-  data,
   onBold,
   onItalic,
   setUnderlineType,
@@ -45,6 +45,42 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
   setBorderType,
   setFormatePainter,
 }) => {
+  const cell = useSelector((state) =>
+    state.active ? Matrix.get(state.active, state.model.data) : null
+  );
+  const data = useSelector((state) => state.model.data);
+  const formattedStyle = useSelector((state) => state.formattedStyle.open);
+
+  const [cellStyle, setCellStyle] = useState(
+    cell?.style || {
+      color: 'var(--text-color)',
+      backgroundColor: 'var(--drawer-footer-bg)',
+      borderColor: 'var(--toggle-strip-color)',
+    }
+  );
+
+  useEffect(() => {
+    setCellStyle(
+      cell?.style || {
+        color: 'var(--text-color)',
+        backgroundColor: 'var(--drawer-footer-bg)',
+        borderColor: 'var(--toggle-strip-color)',
+      }
+    );
+  }, [cell]);
+
+  useEffect(() => {
+    if (
+      cell?.style &&
+      JSON.stringify(cell.style) !== JSON.stringify(cellStyle)
+    ) {
+      setCellStyle(cell.style);
+    }
+  }, [cell]);
+
+  const styleBackend = convertStyleToBackend(cellStyle);
+  
+
   const [border, setBorder] = useState<string>('border-none');
   const [underLine, setUnderLine] = useState<string>('underline');
   const [selectedFontFamily, setSelectedFontFamily] = useState<{
@@ -167,13 +203,13 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
         <Tooltip placement="top" title={'Font Family'}>
           <div className="ff-excel-toolbar-font-family">
             <Select
+              showLabel={false}
               onChange={(e) => {
                 setSelectedFontFamily({ label: e.label, value: e.value });
                 setFontFamily(data, e.label);
               }}
               required={false}
               optionsList={fontFamily}
-              label=""
               selectedOption={selectedFontFamily}
             />
           </div>
@@ -181,8 +217,8 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
         <Tooltip placement="top" title={'Font Size'}>
           <div className="ff-excel-toolbar-font-size">
             <Select
+              showLabel={false}
               required={false}
-              label=""
               onChange={(e) => setFontSize(data, e.value)}
               optionsList={fontSize}
               selectedOption={{
@@ -197,6 +233,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
       <div className="ff-excel-toolbar-icon">
         <Tooltip placement="top" title={'Text Left'}>
           <Icon
+            variant={cellStyle.textAlign === 'left' ? 'dark' : 'light'}
             hoverEffect
             disabled={toolbar === 'disable'}
             onClick={() => setTextAlign(data, 'left')}
@@ -205,6 +242,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
         </Tooltip>
         <Tooltip placement="top" title={'Text Center'}>
           <Icon
+            variant={cellStyle.textAlign === 'center' ? 'dark' : 'light'}
             hoverEffect
             disabled={toolbar === 'disable'}
             onClick={() => setTextAlign(data, 'center')}
@@ -214,6 +252,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
 
         <Tooltip placement="top" title={'Text Right'}>
           <Icon
+            variant={cellStyle.textAlign === 'right' ? 'dark' : 'light'}
             hoverEffect
             disabled={toolbar === 'disable'}
             onClick={() => setTextAlign(data, 'right')}
@@ -225,6 +264,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
       <div className="ff-excel-toolbar-text">
         <Tooltip placement="top" title={'Bold'}>
           <Icon
+            variant={styleBackend.bold ? 'dark' : 'light'}
             hoverEffect
             disabled={toolbar === 'disable'}
             onClick={() => onBold(data)}
@@ -234,6 +274,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
         <Tooltip placement="top" title={'Italic'}>
           <Icon
             hoverEffect
+            variant={styleBackend.italic ? 'dark' : 'light'}
             disabled={toolbar === 'disable'}
             onClick={() => onItalic(data)}
             name="italic"
@@ -242,6 +283,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
         <Tooltip placement="top" title={'Underline Type'}>
           <div className="ff-excel-toolbar-icon-underline">
             <Icon
+              variant={cellStyle.textDecoration===underLine?'dark' : 'light'}
               hoverEffect
               disabled={toolbar === 'disable'}
               onClick={() => setUnderlineType(data, underLine, true)}
@@ -266,6 +308,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
       <div className="ff-excel-toolbar-icon">
         <Tooltip placement="top" title={'Format Painter'}>
           <Icon
+          variant={formattedStyle?'dark':'light'}
             hoverEffect
             disabled={toolbar === 'disable'}
             onClick={() => {

package/src/components/Icon/Icons.scss

@@ -12,9 +12,9 @@
   }
   &.ff-icon-dark {
     background-color: var(--brand-color);
+    border-radius: 4px;
     &.ff-icon-click {
       &:hover {
-        border-radius: 4px;
         background-color: white;
         svg path {
           fill: var(--brand-color);