pixel-react 1.6.0 → 1.6.2

package/src/components/Charts/LineChart/LineChart.stories.tsx

@@ -38,7 +38,7 @@ export const DefaultLineChart: StoryObj<LineChartProps> = {
           },
           {
             date: '29 Oct',
-            totalMemory: 100,
+            totalMemory: 800,
           },
           {
             date: '30 Oct',
@@ -47,14 +47,11 @@ export const DefaultLineChart: StoryObj<LineChartProps> = {
           {
             date: '31 Oct',
             totalMemory: 10.1,
-          }, {
-            date: '1 nov',
-            totalMemory: 10.1,
           },
         ],
       },
     ],
-    width: 604,
+    width: 1010,
     height: 232,
     axisColor: '#000000',
     lineChartWidth: 3,
@@ -62,7 +59,7 @@ export const DefaultLineChart: StoryObj<LineChartProps> = {
     yAxisValueColor: '#252C37',
     xAxisColor: '#D9D9D9',
     yAxisColor: '#252C37',
-    numberSize:"10px"
+    numberSize: '10px',
   },
   render: (args) => (
     <div className="linechart-container">
@@ -110,7 +107,7 @@ export const multiLineScriptsChart: StoryObj<LineChartProps> = {
           { date: '1 oct', value: 10 },
           { date: '2 oct', value: 20 },
           { date: '3 oct', value: 99 },
-          { date: '4 oct', value: 20},
+          { date: '4 oct', value: 20 },
           { date: '5 oct', value: 10 },
           { date: '6 oct', value: 10 },
           { date: '7 oct', value: 10 },
@@ -145,17 +142,18 @@ export const multiLineScriptsChart: StoryObj<LineChartProps> = {
         ],
       },
     ],
-    width: 441,
+    width: 700,
     height: 232,
     axisColor: '#000000',
     lineChartWidth: 2,
-    yAxisLabel: 'Number Of Defects',
+    yAxisLabel: 'Number Of Scripts',
     xAxisLabel: 'Number Of Days',
     yAxisValueColor: '#252C37',
     xAxisColor: '#D9D9D9',
     yAxisColor: '#252C37',
     yAxisLabelColor: '#252C37',
-    textSize:"12px",  },
+    textSize: '12px',
+  },
   render: (args) => (
     <div className="linechart-container">
       <LineChart {...args} />
@@ -163,95 +161,95 @@ export const multiLineScriptsChart: StoryObj<LineChartProps> = {
   ),
 };
 export const multiLineDefectsChart: StoryObj<LineChartProps> = {
-    args: {
-      data: [
-        {
-          color: '#179C5F',
-          name: 'Success',
-          show: true,
-          data: [
-            { date: '1 oct', value: 20 },
-            { date: '2 oct', value: 10 },
-            { date: '3 oct', value: 30 },
-            { date: '4 oct', value: 60 },
-            { date: '5 oct', value: 90 },
-            { date: '6 oct', value: 10 },
-            { date: '7 oct', value: 12 },
-          ],
-        },
-        {
-          color: '#9C1732',
-          name: 'Failed',
-          show: true,
-          data: [
-            { date: '1 oct', value: 50 },
-            { date: '2 oct', value: 30 },
-            { date: '3 oct', value: 40 },
-            { date: '4 oct', value: 20 },
-            { date: '5 oct', value: 90 },
-            { date: '6 oct', value: 70 },
-            { date: '7 oct', value: 30 },
-          ],
-        },
-        {
-          color: '#E2750F',
-          name: 'Warning',
-          show: true,
-          data: [
-            { date: '1 oct', value: 10 },
-            { date: '2 oct', value: 20 },
-            { date: '3 oct', value: 90 },
-            { date: '4 oct', value: 20 },
-            { date: '5 oct', value: 10 },
-            { date: '6 oct', value: 10 },
-            { date: '7 oct', value: 10 },
-          ],
-        },
-        {
-          color: '#A83FC4',
-          name: 'Skipped',
-          show: true,
-          data: [
-            { date: '1 oct', value: 40 },
-            { date: '2 oct', value: 20 },
-            { date: '3 oct', value: 10 },
-            { date: '4 oct', value: 20 },
-            { date: '5 oct', value: 10 },
-            { date: '6 oct', value: 30 },
-            { date: '7 oct', value: 10 },
-          ],
-        },
-        {
-          color: '#3F5AC4',
-          name: 'Flaky',
-          show: true,
-          data: [
-            { date: '1 oct', value: 20 },
-            { date: '2 oct', value: 40 },
-            { date: '3 oct', value: 30 },
-            { date: '4 oct', value: 20 },
-            { date: '5 oct', value: 10 },
-            { date: '6 oct', value: 40 },
-            { date: '7 oct', value: 20 },
-          ],
-        },
-      ],
-      width: 700,
-      height: 232,
-      axisColor: '#000000',
-      lineChartWidth: 2,
-      yAxisLabel: 'Number Of script',
-      xAxisLabel: 'Number Of Days',
-      yAxisValueColor: '#252C37',
-      xAxisColor: '#D9D9D9',
-      yAxisColor: '#252C37',
-      yAxisLabelColor: '#252C37',
-    textSize:"12px",
-    fontWeight:"semi-bold"
-    },
-    render: (args) => (
-      <div className="linechart-container">
-        <LineChart {...args} />
-      </div>
-    ),
-  };
+  args: {
+    data: [
+      {
+        color: '#179C5F',
+        name: 'Success',
+        show: true,
+        data: [
+          { date: '1 oct', value: 20 },
+          { date: '2 oct', value: 10 },
+          { date: '3 oct', value: 30 },
+          { date: '4 oct', value: 60 },
+          { date: '5 oct', value: 90 },
+          { date: '6 oct', value: 10 },
+          { date: '7 oct', value: 12 },
+        ],
+      },
+      {
+        color: '#9C1732',
+        name: 'Failed',
+        show: true,
+        data: [
+          { date: '1 oct', value: 50 },
+          { date: '2 oct', value: 30 },
+          { date: '3 oct', value: 40 },
+          { date: '4 oct', value: 20 },
+          { date: '5 oct', value: 90 },
+          { date: '6 oct', value: 70 },
+          { date: '7 oct', value: 30 },
+        ],
+      },
+      {
+        color: '#E2750F',
+        name: 'Warning',
+        show: true,
+        data: [
+          { date: '1 oct', value: 10 },
+          { date: '2 oct', value: 20 },
+          { date: '3 oct', value: 90 },
+          { date: '4 oct', value: 20 },
+          { date: '5 oct', value: 10 },
+          { date: '6 oct', value: 10 },
+          { date: '7 oct', value: 10 },
+        ],
+      },
+      {
+        color: '#A83FC4',
+        name: 'Skipped',
+        show: true,
+        data: [
+          { date: '1 oct', value: 40 },
+          { date: '2 oct', value: 20 },
+          { date: '3 oct', value: 10 },
+          { date: '4 oct', value: 20 },
+          { date: '5 oct', value: 10 },
+          { date: '6 oct', value: 30 },
+          { date: '7 oct', value: 10 },
+        ],
+      },
+      {
+        color: '#3F5AC4',
+        name: 'Flaky',
+        show: true,
+        data: [
+          { date: '1 oct', value: 20 },
+          { date: '2 oct', value: 40 },
+          { date: '3 oct', value: 30 },
+          { date: '4 oct', value: 20 },
+          { date: '5 oct', value: 10 },
+          { date: '6 oct', value: 40 },
+          { date: '7 oct', value: 20 },
+        ],
+      },
+    ],
+    width: 700,
+    height: 232,
+    axisColor: '#000000',
+    lineChartWidth: 2,
+    yAxisLabel: 'Number Of Defects',
+    xAxisLabel: 'Number Of Days',
+    yAxisValueColor: '#252C37',
+    xAxisColor: '#D9D9D9',
+    yAxisColor: '#252C37',
+    yAxisLabelColor: '#252C37',
+    textSize: '12px',
+    fontWeight: 'semi-bold',
+  },
+  render: (args) => (
+    <div className="linechart-container">
+      <LineChart {...args} />
+    </div>
+  ),
+};

package/src/components/Charts/LineChart/LineChart.tsx

@@ -33,8 +33,8 @@ const LineChart: React.FC<LineChartProps> = ({
   const isDefaultLineChart =
     data[0]?.data[0]?.hasOwnProperty('date') &&
     data[0]?.data[0]?.hasOwnProperty('totalMemory');
-  const xKey = isDefaultLineChart ? 'date' : 'date'; 
-  const yKey = isDefaultLineChart ? 'totalMemory' : 'value'; 
+  const xKey = isDefaultLineChart ? 'date' : 'date';
+  const yKey = isDefaultLineChart ? 'totalMemory' : 'value';
   const xScale = (x: string) => {
     const date = new Date(x);
     const time = date.getTime();
@@ -130,139 +130,151 @@ const LineChart: React.FC<LineChartProps> = ({
   const xTickInterval = Math.floor(data[0].data.length / 4);
 
   return (
-    <div className="ff-line-chart-text">
-      <Typography className="ff-line-chart-text1" fontSize={textSize} fontWeight="semi-bold">{yAxisLabel}</Typography>
-      <svg
-        width={width}
-        height={height}
-        onMouseMove={handleMouseMove}
-        onMouseLeave={handleMouseLeave}
-      >
-        <g transform={`translate(${margin}, ${margin})`}>
-          <line x1={0} y1={0} x2={0} y2={yMax} strokeWidth={2} />
-          <line
-            x1={0}
-            y1={yMax}
-            x2={xMax}
-            y2={yMax}
-            stroke={xAxisColor}
-            strokeWidth={1}
-          />
+    <div className="ff-line-chart-text" style={{ width: width }}>
+      <div>
+        {' '}
+        <Typography
+          className="ff-line-chart-yAxisLabel"
+          fontSize={textSize}
+          fontWeight="semi-bold"
+        >
+          {yAxisLabel}
+        </Typography>
+      </div>
+      <div className="ff-line-chart-svg">
+        {' '}
+        <svg
+          height={height}
+          onMouseMove={handleMouseMove}
+          onMouseLeave={handleMouseLeave}
+          className="ff-line-chart-svg"
+        >
+          <g transform={`translate(${margin}, ${margin})`}>
+            <line x1={0} y1={0} x2={0} y2={yMax} strokeWidth={2} />
+            <line
+              x1={0}
+              y1={yMax}
+              x2={xMax}
+              y2={yMax}
+              stroke={xAxisColor}
+              strokeWidth={1}
+            />
 
-          <text
-            x={xMax / 2.1}
-            y={yMax + margin / 1.2}
-            textAnchor="middle"
-            fill={yAxisLabelColor}
-            className="ff-line-chart-x-axis-label"
-            style={{fontSize:textSize , fontWeight:fontWeight}}
-          >
-            {xAxisLabel}
-          </text>
+            <text
+              x={xMax / 2.1}
+              y={yMax + margin / 1.2}
+              textAnchor="middle"
+              fill={yAxisLabelColor}
+              className="ff-line-chart-x-axis-label"
+              style={{ fontSize: textSize, fontWeight: fontWeight }}
+            >
+              {xAxisLabel}
+            </text>
 
-          {data.map((line, index) =>
-            line.show !== false ? (
-              <g key={index}>
-                <path
-                  d={generateLinePath(line.data)}
-                  fill="none"
-                  stroke={line.color}
-                  strokeWidth={lineChartWidth}
-                />
-                {hoverState.dotPositions[index] && (
-                  <>
-                    <line
-                      x1={hoverState.dotPositions[index]!.x}
-                      y1={0}
-                      x2={hoverState.dotPositions[index]!.x}
-                      y2={yMax}
-                      stroke="gray"
-                      strokeWidth={0.5}
-                      strokeDasharray="4"
-                    />
-                    <circle
-                      cx={hoverState.dotPositions[index]!.x}
-                      cy={hoverState.dotPositions[index]!.y}
-                      r={5}
-                      fill="white"
-                      stroke={line.color}
-                      strokeWidth={lineChartWidth}
-                      style={{ transition: 'cx 0.1s, cy 0.1s' }}
-                    />
-                    <line
-                      x1={0}
-                      y1={hoverState.dotPositions[index]!.y}
-                      x2={xMax}
-                      y2={hoverState.dotPositions[index]!.y}
-                      stroke="gray"
-                      strokeWidth={0.5}
-                      strokeDasharray="4"
-                    />
-                  </>
-                )}
-              </g>
-            ) : null
-          )}
-          {data[0].data
-            .filter((_: any, index: number) => index % xTickInterval === 0)
-            .map((point: { [key: string]: any }) => (
-              <text
-                key={String(point[xKey])}
-                x={xScale(point[xKey])}
-                y={yMax + 15}
-                textAnchor="middle"
-                fill={yAxisColor}
-                className="ff--line-chart-x-line-data"
-                style={{ fontSize:numberSize}}
-              >
-                {point[xKey] != null ? String(point[xKey]) : ''}
-              </text>
-            ))}
+            {data.map((line, index) =>
+              line.show !== false ? (
+                <g key={index}>
+                  <path
+                    d={generateLinePath(line.data)}
+                    fill="none"
+                    stroke={line.color}
+                    strokeWidth={lineChartWidth}
+                  />
+                  {hoverState.dotPositions[index] && (
+                    <>
+                      <line
+                        x1={hoverState.dotPositions[index]!.x}
+                        y1={0}
+                        x2={hoverState.dotPositions[index]!.x}
+                        y2={yMax}
+                        stroke="gray"
+                        strokeWidth={0.5}
+                        strokeDasharray="4"
+                      />
+                      <circle
+                        cx={hoverState.dotPositions[index]!.x}
+                        cy={hoverState.dotPositions[index]!.y}
+                        r={5}
+                        fill="white"
+                        stroke={line.color}
+                        strokeWidth={lineChartWidth}
+                        style={{ transition: 'cx 0.1s, cy 0.1s' }}
+                      />
+                      <line
+                        x1={0}
+                        y1={hoverState.dotPositions[index]!.y}
+                        x2={xMax}
+                        y2={hoverState.dotPositions[index]!.y}
+                        stroke="gray"
+                        strokeWidth={0.5}
+                        strokeDasharray="4"
+                      />
+                    </>
+                  )}
+                </g>
+              ) : null
+            )}
+            {data[0].data
+              .filter((_: any, index: number) => index % xTickInterval === 0)
+              .map((point: { [key: string]: any }) => (
+                <text
+                  key={String(point[xKey])}
+                  x={xScale(point[xKey])}
+                  y={yMax + 15}
+                  textAnchor="middle"
+                  fill={yAxisColor}
+                  className="ff--line-chart-x-line-data"
+                  style={{ fontSize: numberSize }}
+                >
+                  {point[xKey] != null ? String(point[xKey]) : ''}
+                </text>
+              ))}
 
-          {Array.from({ length: 6 }).map((_, i) => {
-            const yValueInGB = i * 0.2; 
-            return (
-              <text
-                key={yValueInGB}
-                x={-15}
-                y={yScale(yValueInGB * 1024)} 
-                textAnchor="middle"
-                fill={yAxisValueColor}
-                className="ff-line-chart-y-axis-text"
-                style={{ fontSize:numberSize}}
-              >
-                {yValueInGB.toFixed(1)}
-              </text>
-            );
-          })}
-        </g>
-      </svg>
-      {hoverState.tooltip.visible && (
-        <div
-          className="ff-line-chart-tooltip"
-          style={{
-            left: hoverState.tooltip.left,
-            top: hoverState.tooltip.top,
-          }}
-        >
-          <div className="ff-line-chart-date">{hoverState.currentXValue}</div>
+            {Array.from({ length: 6 }).map((_, i) => {
+              const yValueInGB = i * 0.2;
+              return (
+                <text
+                  key={yValueInGB}
+                  x={-15}
+                  y={yScale(yValueInGB * 1024)}
+                  textAnchor="middle"
+                  fill={yAxisValueColor}
+                  className="ff-line-chart-y-axis-text"
+                  style={{ fontSize: numberSize }}
+                >
+                  {yValueInGB.toFixed(1)}
+                </text>
+              );
+            })}
+          </g>
+        </svg>
+        {hoverState.tooltip.visible && (
+          <div
+            className="ff-line-chart-tooltip"
+            style={{
+              left: hoverState.tooltip.left,
+              top: hoverState.tooltip.top,
+            }}
+          >
+            <div className="ff-line-chart-date">{hoverState.currentXValue}</div>
 
-          {Object.entries(hoverState.hoverValues).map(
-            ([index, value]) =>
-              data[Number(index)]?.show !== false && (
-                <div key={index} className="ff-line-chart-inner-tooltip">
-                  {data[Number(index)]?.name !== 'default' && (
-                    <div
-                      className="ff-line-chart-status-dot"
-                      style={{ backgroundColor: data[Number(index)]?.color }}
-                    />
-                  )}
-                  {data[Number(index)]?.name}: {value}
-                </div>
-              )
-          )}
-        </div>
-      )}
+            {Object.entries(hoverState.hoverValues).map(
+              ([index, value]) =>
+                data[Number(index)]?.show !== false && (
+                  <div key={index} className="ff-line-chart-inner-tooltip">
+                    {data[Number(index)]?.name !== 'default' && (
+                      <div
+                        className="ff-line-chart-status-dot"
+                        style={{ backgroundColor: data[Number(index)]?.color }}
+                      />
+                    )}
+                    {data[Number(index)]?.name}: {value}
+                  </div>
+                )
+            )}
+          </div>
+        )}
+      </div>
     </div>
   );
 };

package/src/components/Charts/MultiRadialChart/MultiRadialChart.scss

@@ -13,11 +13,31 @@
     flex-direction: row;
   }
 
+  .ff-center-first-text {
+    @extend .font-size-20;
+    color: var(--text-color);
+    font-weight: 600;
+  }
   .ff-center-text {
     @extend .fontSm;
-    color: var(--drawer-title-color);
+    color: var(--text-color);
+    font-weight: 400;
+  }
+  .ff-center-text-tooltip {
+    @extend .fontSm;
     font-weight: 600;
   }
+  .ff-multi-radial-tooltip {
+    position: absolute;
+    @extend .fontSm;
+    font-weight: 400;
+    background-color: var(--tooltip-bg-color);
+    color: var(--primary-icon-color);
+    padding: 5px 10px;
+    border-radius: 4px;
+    pointer-events: none;
+    z-index: 1000;
+  }
   .ff-legend-container {
     display: grid;
     gap: 10px;
@@ -47,7 +67,7 @@
 
         .ff-legend-capsule {
           background-color: var(--status-success-text-color);
-          color: var(--tooltip-text-color);
+          color: var(--text-color);
           border-radius: 15px;
           min-width: 25px;
           height: 18px;
@@ -58,6 +78,7 @@
 
         .ff-legend-key {
           margin-left: 8px;
+          color: var(--text-color);
         }
       }
     }