pixel-react 1.7.1 → 1.7.2

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

@@ -1,295 +1,295 @@
-import React, { useState } from 'react';
-import { LineChartProps } from './types';
-import './LineChart.scss';
-import Typography from '../../Typography';
-
-interface HoverState {
-  cursorX: number | null;
-  hoverValues: { [lineIndex: number]: number | string | null };
-  dotPositions: { [lineIndex: number]: { x: number; y: number } | null };
-  tooltip: { visible: boolean; left: number; top: number };
-  currentXValue: string | null;
-}
-
-const LineChart: React.FC<LineChartProps> = ({
-  data,
-  width,
-  height,
-  lineChartWidth,
-  yAxisLabel,
-  xAxisLabel,
-  yAxisValueColor,
-  xAxisColor,
-  yAxisColor,
-  yAxisLabelColor,
-  textSize,
-  fontWeight,
-  numberSize,
-  proportionalSpacing,
-}) => {
-  const margin = 40;
-  const xMax = width - margin * 2;
-  const yMax = height - margin * 2;
-
-  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 xScale = (x: string) => {
-  if (proportionalSpacing) {
-    const date = new Date(x);
-    const time = date.getTime();
-    const minDate = new Date(
-      Math.min(...data[0].data.map((d: any) => new Date(d[xKey]).getTime()))
-    );
-    const maxDate = new Date(
-      Math.max(...data[0].data.map((d: any) => new Date(d[xKey]).getTime()))
-    );
-
-    return (
-      ((time - minDate.getTime()) / (maxDate.getTime() - minDate.getTime())) *
-      xMax
-    );
-  } else {
-    const index = data[0].data.findIndex((point: any) => point[xKey] === x);
-    if (index === -1) return 0;
-    const totalPoints = data[0].data.length;
-    return (index / (totalPoints - 1)) * xMax;
-  }
-};
-
-
-  const yScale = (y: number) => yMax - (y * yMax) / 1024;
-
-  const generateLinePath = (lineData: { [key: string]: any }[]) =>
-    lineData.reduce((path, point, i) => {
-      const x = xScale(point[xKey]);
-      const y = yScale(point[yKey]);
-      if (i === 0) {
-        return `M ${x} ${y}`;
-      }
-
-      const prevPoint = lineData[i - 1];
-      const prevX = prevPoint ? xScale(prevPoint[xKey]) : 0;
-      const prevY = prevPoint ? yScale(prevPoint[yKey]) : 0;
-
-      return `${path} C ${prevX + (x - prevX) / 2} ${prevY}, ${
-        x - (x - prevX) / 2
-      } ${y}, ${x} ${y}`;
-    }, '');
-
-  const [hoverState, setHoverState] = useState<HoverState>({
-    cursorX: null,
-    hoverValues: {},
-    dotPositions: {},
-    tooltip: { visible: false, left: 0, top: 0 },
-    currentXValue: null,
-  });
-
-  const handleMouseMove = (e: React.MouseEvent<SVGSVGElement>) => {
-    const svgRect = e.currentTarget.getBoundingClientRect();
-    const mouseX = e.clientX - svgRect.left - margin;
-
-    let nearestValues = {
-      hoverValues: {} as HoverState['hoverValues'],
-      dotPositions: {} as HoverState['dotPositions'],
-    };
-    let nearestXValue: string | null = null;
-
-    data.forEach((line, lineIndex) => {
-      const nearestPoint = line.data.reduce(
-        (closest: { distance: number }, point: { [key: string]: any }) => {
-          const distance = Math.abs(mouseX - xScale(point[xKey]));
-          return distance < closest.distance ? { point, distance } : closest;
-        },
-        { point: null, distance: Infinity }
-      ).point;
-
-      if (nearestPoint) {
-        nearestXValue = nearestPoint[xKey];
-        nearestValues.hoverValues[lineIndex] = nearestPoint[yKey];
-        nearestValues.dotPositions[lineIndex] = {
-          x: nearestXValue ? xScale(nearestXValue) : 0,
-          y: yScale(nearestPoint[yKey]),
-        };
-      }
-    });
-
-    setHoverState({
-      cursorX: mouseX,
-      hoverValues: nearestValues.hoverValues,
-      dotPositions: nearestValues.dotPositions,
-      currentXValue: nearestXValue,
-      tooltip: nearestXValue
-        ? { visible: true, left: e.clientX + 10, top: e.clientY - 20 }
-        : { visible: false, left: 0, top: 0 },
-    });
-  };
-
-  const handleMouseLeave = () =>
-    setHoverState({
-      cursorX: null,
-      hoverValues: {},
-      dotPositions: {},
-      tooltip: { visible: false, left: 0, top: 0 },
-      currentXValue: null,
-    });
-
-  const xTickInterval = Math.floor(data[0].data.length / 4);
-
-  return (
-    <div className="ff-line-chart-text" style={{ width: width + 20 }}>
-      <div
-        className="ff-line-chart-yAxisLabel-warpper"
-        style={{ height: height }}
-      >
-        {' '}
-        <Typography
-          className="ff-line-chart-yAxisLabel"
-          fontSize={textSize}
-          fontWeight="semi-bold"
-        >
-          {yAxisLabel}
-        </Typography>
-      </div>
-      <div className="ff-line-chart-svg">
-        {' '}
-        <svg
-          height={height}
-          width={width}
-          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>
-
-            {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>
-
-            {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>
-  );
-};
-
-export default LineChart;
+import React, { useState } from 'react';
+import { LineChartProps } from './types';
+import './LineChart.scss';
+import Typography from '../../Typography';
+
+interface HoverState {
+  cursorX: number | null;
+  hoverValues: { [lineIndex: number]: number | string | null };
+  dotPositions: { [lineIndex: number]: { x: number; y: number } | null };
+  tooltip: { visible: boolean; left: number; top: number };
+  currentXValue: string | null;
+}
+
+const LineChart: React.FC<LineChartProps> = ({
+  data,
+  width,
+  height,
+  lineChartWidth,
+  yAxisLabel,
+  xAxisLabel,
+  yAxisValueColor,
+  xAxisColor,
+  yAxisColor,
+  yAxisLabelColor,
+  textSize,
+  fontWeight,
+  numberSize,
+  proportionalSpacing,
+}) => {
+  const margin = 40;
+  const xMax = width - margin * 2;
+  const yMax = height - margin * 2;
+
+  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 xScale = (x: string) => {
+  if (proportionalSpacing) {
+    const date = new Date(x);
+    const time = date.getTime();
+    const minDate = new Date(
+      Math.min(...data[0].data.map((d: any) => new Date(d[xKey]).getTime()))
+    );
+    const maxDate = new Date(
+      Math.max(...data[0].data.map((d: any) => new Date(d[xKey]).getTime()))
+    );
+
+    return (
+      ((time - minDate.getTime()) / (maxDate.getTime() - minDate.getTime())) *
+      xMax
+    );
+  } else {
+    const index = data[0].data.findIndex((point: any) => point[xKey] === x);
+    if (index === -1) return 0;
+    const totalPoints = data[0].data.length;
+    return (index / (totalPoints - 1)) * xMax;
+  }
+};
+
+
+  const yScale = (y: number) => yMax - (y * yMax) / 1024;
+
+  const generateLinePath = (lineData: { [key: string]: any }[]) =>
+    lineData.reduce((path, point, i) => {
+      const x = xScale(point[xKey]);
+      const y = yScale(point[yKey]);
+      if (i === 0) {
+        return `M ${x} ${y}`;
+      }
+
+      const prevPoint = lineData[i - 1];
+      const prevX = prevPoint ? xScale(prevPoint[xKey]) : 0;
+      const prevY = prevPoint ? yScale(prevPoint[yKey]) : 0;
+
+      return `${path} C ${prevX + (x - prevX) / 2} ${prevY}, ${
+        x - (x - prevX) / 2
+      } ${y}, ${x} ${y}`;
+    }, '');
+
+  const [hoverState, setHoverState] = useState<HoverState>({
+    cursorX: null,
+    hoverValues: {},
+    dotPositions: {},
+    tooltip: { visible: false, left: 0, top: 0 },
+    currentXValue: null,
+  });
+
+  const handleMouseMove = (e: React.MouseEvent<SVGSVGElement>) => {
+    const svgRect = e.currentTarget.getBoundingClientRect();
+    const mouseX = e.clientX - svgRect.left - margin;
+
+    let nearestValues = {
+      hoverValues: {} as HoverState['hoverValues'],
+      dotPositions: {} as HoverState['dotPositions'],
+    };
+    let nearestXValue: string | null = null;
+
+    data.forEach((line, lineIndex) => {
+      const nearestPoint = line.data.reduce(
+        (closest: { distance: number }, point: { [key: string]: any }) => {
+          const distance = Math.abs(mouseX - xScale(point[xKey]));
+          return distance < closest.distance ? { point, distance } : closest;
+        },
+        { point: null, distance: Infinity }
+      ).point;
+
+      if (nearestPoint) {
+        nearestXValue = nearestPoint[xKey];
+        nearestValues.hoverValues[lineIndex] = nearestPoint[yKey];
+        nearestValues.dotPositions[lineIndex] = {
+          x: nearestXValue ? xScale(nearestXValue) : 0,
+          y: yScale(nearestPoint[yKey]),
+        };
+      }
+    });
+
+    setHoverState({
+      cursorX: mouseX,
+      hoverValues: nearestValues.hoverValues,
+      dotPositions: nearestValues.dotPositions,
+      currentXValue: nearestXValue,
+      tooltip: nearestXValue
+        ? { visible: true, left: e.clientX + 10, top: e.clientY - 20 }
+        : { visible: false, left: 0, top: 0 },
+    });
+  };
+
+  const handleMouseLeave = () =>
+    setHoverState({
+      cursorX: null,
+      hoverValues: {},
+      dotPositions: {},
+      tooltip: { visible: false, left: 0, top: 0 },
+      currentXValue: null,
+    });
+
+  const xTickInterval = Math.floor(data[0].data.length / 4);
+
+  return (
+    <div className="ff-line-chart-text" style={{ width: width + 20 }}>
+      <div
+        className="ff-line-chart-yAxisLabel-warpper"
+        style={{ height: height }}
+      >
+        {' '}
+        <Typography
+          className="ff-line-chart-yAxisLabel"
+          fontSize={textSize}
+          fontWeight="semi-bold"
+        >
+          {yAxisLabel}
+        </Typography>
+      </div>
+      <div className="ff-line-chart-svg">
+        {' '}
+        <svg
+          height={height}
+          width={width}
+          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>
+
+            {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>
+
+            {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>
+  );
+};
+
+export default LineChart;

package/src/components/Charts/LineChart/index.ts

@@ -1 +1 @@
-export { default } from './LineChart';
+export { default } from './LineChart';

package/src/components/Charts/LineChart/types.ts

@@ -1,30 +1,30 @@
-export interface LineChartDataPoint {
-  point: any;
-  x: string;
-  y: number;
-}
-
-export interface Line {
-  show: boolean;
-  color: string;
-  data: LineChartDataPoint[];
-}
-
-export interface LineChartProps {
-  data: any[];
-  width: number;
-  height: number;
-  axisColor: string;
-  isStatusVariant?: boolean;
-  lineChartWidth?: number;
-  yAxisLabel?: string;
-  xAxisLabel?: string;
-  yAxisValueColor?: string;
-  xAxisColor?: string;
-  yAxisColor?: string;
-  yAxisLabelColor?: string;
-  textSize?: string | number;
-  fontWeight?: string | number;
-  numberSize?: string | number;
-  proportionalSpacing?: boolean;
-}
+export interface LineChartDataPoint {
+  point: any;
+  x: string;
+  y: number;
+}
+
+export interface Line {
+  show: boolean;
+  color: string;
+  data: LineChartDataPoint[];
+}
+
+export interface LineChartProps {
+  data: any[];
+  width: number;
+  height: number;
+  axisColor: string;
+  isStatusVariant?: boolean;
+  lineChartWidth?: number;
+  yAxisLabel?: string;
+  xAxisLabel?: string;
+  yAxisValueColor?: string;
+  xAxisColor?: string;
+  yAxisColor?: string;
+  yAxisLabelColor?: string;
+  textSize?: string | number;
+  fontWeight?: string | number;
+  numberSize?: string | number;
+  proportionalSpacing?: boolean;
+}