pixel-react 1.6.6 → 1.6.8

package/src/components/Charts/BarChart/BarChart.tsx

@@ -1,328 +1,342 @@
-import React, { useState } from 'react';
-import './BarChart.scss';
-import Typography from '../../Typography';
-import Icon from '../../Icon';
-import { truncateText } from '../../../utils/truncateText/truncateText';
-
-type BarChartProps = {
-  data: { label: string; value: number }[];
-  barWidth: number;
-  height: number;
-  barGap?: number;
-  colors?: string[][];
-  xAxisLabel?: string;
-  yAxisLabel?: string;
-  padding?: number;
-  yAxisDivisions?: number;
-  barBorderRadius?: number;
-  legend?: boolean;
-  showXAxisLabels?: boolean;
-  icons?: (string | React.ReactNode)[];
-  iconSize?: number;
-  backgroundColor?: string;
-  legendPosition?: 'top' | 'bottom';
-};
-
-const BarChart: React.FC<BarChartProps> = ({
-  data,
-  barWidth,
-  height,
-  barGap = 20,
-  colors = [],
-  xAxisLabel,
-  yAxisLabel,
-  padding = 20,
-  yAxisDivisions = 5,
-  barBorderRadius = 0,
-  legend = true,
-  showXAxisLabels = true,
-  icons = [],
-  iconSize,
-  legendPosition = 'bottom',
-}) => {
-  const [tooltip, setTooltip] = useState<{
-    visible: boolean;
-    content: string;
-    x: number;
-    y: number;
-    borderColor: string;
-  }>({ visible: false, content: '', x: 0, y: 0, borderColor: 'transparent' });
-
-  const maxValue = Math.max(...data.map((item) => item.value));
-  const topPadding = 40;
-  const leftPadding = 40;
-  const totalBarWidth = data.length * barWidth + (data.length - 1) * barGap;
-  const chartWidth = totalBarWidth + leftPadding * 2;
-
-  const renderGradients = (gradients: string[][]) => {
-    return gradients.map((gradient, index) => (
-      <defs key={index}>
-        <linearGradient
-          id={`gradient-${index}`}
-          x1="0%"
-          y1="0%"
-          x2="0%"
-          y2="100%"
-        >
-          {gradient.map((color, i) => (
-            <stop
-              key={i}
-              offset={`${(i / (gradient.length - 1)) * 100}%`}
-              stopColor={color}
-            />
-          ))}
-        </linearGradient>
-      </defs>
-    ));
-  };
-
-  const getFillColor = (index: number) =>
-    colors?.[index % colors.length]?.[0]
-      ? `url(#gradient-${index % colors.length})`
-      : 'grey';
-
-  const getBorderColor = (index: number) => {
-    return colors?.[index % colors.length]?.[0] || 'grey';
-  };
-
-  const handleMouseEnter = (
-    e: React.MouseEvent,
-    label: string,
-    value: number,
-    color: string
-  ) => {
-    setTooltip({
-      visible: true,
-      content: `${label}: ${value}`,
-      x: e.clientX,
-      y: e.clientY,
-      borderColor: color,
-    });
-  };
-
-  const handleMouseMove = (e: React.MouseEvent) => {
-    setTooltip((prevTooltip) => ({
-      ...prevTooltip,
-      x: e.clientX,
-      y: e.clientY,
-    }));
-  };
-
-  const handleMouseLeave = () => {
-    setTooltip({
-      visible: false,
-      content: '',
-      x: 0,
-      y: 0,
-      borderColor: 'transparent',
-    });
-  };
-
-  return (
-    <div
-      className="ff-bar-chart-container"
-      style={{ width: chartWidth, height }}
-    >
-      {legend && legendPosition === 'top' && (
-        <div className="ff-legend-container">
-          <div className="ff-bar-chart-legend">
-            {data.map((item, index) => (
-              <div key={item.label} className="ff-bar-chart-legend-item">
-                {icons[index] && typeof icons[index] === 'string' ? (
-                  <Icon
-                    name={String(icons[index])}
-                    width={iconSize}
-                    height={iconSize}
-                  />
-                ) : (
-                  <span
-                    className="ff-bar-chart-legend-item-circle"
-                    style={{
-                      backgroundColor:
-                        colors[index % colors.length]?.[0] || 'grey',
-                    }}
-                  ></span>
-                )}
-                <Typography
-                  as="div"
-                  fontSize={10}
-                  fontWeight="regular"
-                  className="ff-legend-label"
-                >
-                  {item.label}
-                </Typography>
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-
-      <div>
-        <svg width={chartWidth} height={height + topPadding + 40}>
-          {Array.isArray(colors) &&
-            colors.length > 0 &&
-            renderGradients(colors)}
-
-          {Array.from({ length: yAxisDivisions + 1 }).map((_, i) => {
-            const yAxisLabelYPosition =
-              height - (i / yAxisDivisions) * height + topPadding + 4;
-            return (
-              <text
-                key={i}
-                x={leftPadding}
-                y={yAxisLabelYPosition}
-                fill="black"
-                textAnchor="middle"
-                className="ff-bar-chart-labels"
-              >
-                {((i * maxValue) / yAxisDivisions).toFixed(1)}
-              </text>
-            );
-          })}
-
-          {data.map((item, index) => {
-            const barHeight = (item.value / maxValue) * height;
-            const totalBarHeight = barHeight > 0 ? barHeight : 2;
-            const barX = index * (barWidth + barGap) + leftPadding + padding;
-            const barY = height - totalBarHeight + topPadding;
-
-            const iconWidth = iconSize || 20;
-            const iconX = barX + barWidth / 2 - iconWidth / 2;
-            const iconY = barY - iconWidth;
-
-            return (
-              <g key={index}>
-                {icons[index] && typeof icons[index] === 'string' && (
-                  <Icon
-                    name={String(icons[index])}
-                    x={String(iconX)}
-                    y={String(iconY)}
-                    width={iconWidth}
-                    height={iconWidth}
-                    chartIcon={true}
-                  />
-                )}
-
-                <rect
-                  x={barX}
-                  y={barY}
-                  width={barWidth}
-                  height={totalBarHeight}
-                  fill={getFillColor(index)}
-                  rx={barBorderRadius}
-                  ry={barBorderRadius}
-                  onMouseEnter={(e) =>
-                    handleMouseEnter(
-                      e,
-                      item.label,
-                      item.value,
-                      getBorderColor(index)
-                    )
-                  }
-                  onMouseMove={handleMouseMove}
-                  onMouseLeave={handleMouseLeave}
-                ></rect>
-
-                {showXAxisLabels && (
-                  <text
-                    x={barX + barWidth / 2}
-                    y={height + topPadding + 15}
-                    fill="black"
-                    textAnchor="middle"
-                    className="ff-bar-chart-labels"
-                  >
-                    {truncateText(item.label, 10)}
-                  </text>
-                )}
-              </g>
-            );
-          })}
-
-          <line
-            x1={60}
-            y1={height + topPadding}
-            x2={chartWidth}
-            y2={height + topPadding}
-            stroke="#D9D9D9"
-            strokeWidth="1"
-          />
-
-          {xAxisLabel && (
-            <text
-              x={chartWidth / 2}
-              y={height + topPadding + 40}
-              fontSize="12"
-              fill="black"
-              textAnchor="middle"
-              className="ff-bar-chart-labels"
-            >
-              {xAxisLabel}
-            </text>
-          )}
-
-          {yAxisLabel && (
-            <text
-              x={-(height / 2 + 35)}
-              y={leftPadding - 30}
-              transform="rotate(-90)"
-              fill="black"
-              textAnchor="middle"
-              alignmentBaseline="middle"
-              className="ff-bar-chart-labels"
-            >
-              {yAxisLabel}
-            </text>
-          )}
-        </svg>
-      </div>
-
-      {legend && legendPosition === 'bottom' && (
-        <div className="ff-legend-container">
-          <div className="ff-bar-chart-legend">
-            {data.map((item, index) => (
-              <div key={item.label} className="ff-bar-chart-legend-item">
-                {icons[index] && typeof icons[index] === 'string' ? (
-                  <Icon
-                    name={String(icons[index])}
-                    width={iconSize}
-                    height={iconSize}
-                  />
-                ) : (
-                  <span
-                    className="ff-bar-chart-legend-item-circle"
-                    style={{
-                      backgroundColor:
-                        colors[index % colors.length]?.[0] || 'grey',
-                    }}
-                  ></span>
-                )}
-                <Typography
-                  as="div"
-                  fontSize={10}
-                  fontWeight="regular"
-                  className="ff-legend-label"
-                >
-                  {item.label}
-                </Typography>
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-
-      {tooltip.visible && (
-        <div
-          className="ff-bar-chart-tooltip"
-          style={{
-            top: tooltip.y - 20,
-            left: tooltip.x + 10,
-          }}
-        >
-          {tooltip.content}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default BarChart;
+import React, { useState } from 'react';
+import './BarChart.scss';
+import Typography from '../../Typography';
+import Icon from '../../Icon';
+import { truncateText } from '../../../utils/truncateText/truncateText';
+
+type BarChartProps = {
+  data: { label: string; value: number }[];
+  barWidth: number;
+  height: number;
+  barGap?: number;
+  colors?: string[][];
+  xAxisLabel?: string;
+  yAxisLabel?: string;
+  padding?: number;
+  yAxisDivisions?: number;
+  barBorderRadius?: number;
+  legend?: boolean;
+  showXAxisLabels?: boolean;
+  icons?: (string | React.ReactNode)[];
+  iconSize?: number;
+  backgroundColor?: string;
+  legendPosition?: 'top' | 'bottom';
+  legendGap?: number;
+};
+
+const BarChart: React.FC<BarChartProps> = ({
+  data,
+  barWidth,
+  height,
+  barGap = 20,
+  colors = [],
+  xAxisLabel,
+  yAxisLabel,
+  padding = 20,
+  yAxisDivisions = 5,
+  barBorderRadius = 0,
+  legend = true,
+  showXAxisLabels = true,
+  icons = [],
+  iconSize,
+  legendPosition = 'bottom',
+  legendGap = 5,
+}) => {
+  const [tooltip, setTooltip] = useState<{
+    visible: boolean;
+    content: string;
+    x: number;
+    y: number;
+    borderColor: string;
+  }>({ visible: false, content: '', x: 0, y: 0, borderColor: 'transparent' });
+
+  const maxValue = Math.max(...data.map((item) => item.value));
+  const topPadding = 40;
+  const leftPadding = 40;
+  const totalBarWidth = data.length * barWidth + (data.length - 1) * barGap;
+  const chartWidth = totalBarWidth + leftPadding * 2 + 10;
+
+  const renderGradients = (gradients: string[][]) => {
+    return gradients.map((gradient, index) => (
+      <defs key={index}>
+        <linearGradient
+          id={`gradient-${index}`}
+          x1="0%"
+          y1="0%"
+          x2="0%"
+          y2="100%"
+        >
+          {gradient.map((color, i) => (
+            <stop
+              key={i}
+              offset={`${(i / (gradient.length - 1)) * 100}%`}
+              stopColor={color}
+            />
+          ))}
+        </linearGradient>
+      </defs>
+    ));
+  };
+
+  const getFillColor = (index: number) =>
+    colors?.[index % colors.length]?.[0]
+      ? `url(#gradient-${index % colors.length})`
+      : 'grey';
+
+  const getBorderColor = (index: number) => {
+    return colors?.[index % colors.length]?.[0] || 'grey';
+  };
+
+  const handleMouseEnter = (
+    e: React.MouseEvent,
+    label: string,
+    value: number,
+    color: string
+  ) => {
+    setTooltip({
+      visible: true,
+      content: `${label}: ${value}`,
+      x: e.clientX,
+      y: e.clientY,
+      borderColor: color,
+    });
+  };
+
+  const handleMouseMove = (e: React.MouseEvent) => {
+    setTooltip((prevTooltip) => ({
+      ...prevTooltip,
+      x: e.clientX,
+      y: e.clientY,
+    }));
+  };
+
+  const handleMouseLeave = () => {
+    setTooltip({
+      visible: false,
+      content: '',
+      x: 0,
+      y: 0,
+      borderColor: 'transparent',
+    });
+  };
+
+  return (
+    <div className="ff-bar-chart-container" style={{ width: chartWidth }}>
+      {legend && legendPosition === 'top' && (
+        <div className="ff-legend-container">
+          <div
+            className="ff-bar-chart-legend"
+            style={{ gap: `${legendGap}px` }}
+          >
+            {data.map((item, index) => (
+              <div key={item.label} className="ff-bar-chart-legend-item">
+                {icons[index] && typeof icons[index] === 'string' ? (
+                  <Icon
+                    name={String(icons[index])}
+                    width={iconSize}
+                    height={iconSize}
+                  />
+                ) : (
+                  <span
+                    className="ff-bar-chart-legend-item-circle"
+                    style={{
+                      backgroundColor:
+                        colors[index % colors.length]?.[0] || 'grey',
+                    }}
+                  ></span>
+                )}
+                <Typography
+                  as="div"
+                  fontSize={10}
+                  fontWeight="regular"
+                  className="ff-legend-label"
+                >
+                  {item.label}
+                </Typography>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      <div>
+        <svg
+          width={chartWidth}
+          height={
+            height +
+            topPadding +
+            5 +
+            (showXAxisLabels ? 20 : 0) +
+            (xAxisLabel ? 20 : 0)
+          }
+        >
+          {Array.isArray(colors) &&
+            colors.length > 0 &&
+            renderGradients(colors)}
+
+          {Array.from({ length: yAxisDivisions + 1 }).map((_, i) => {
+            const yAxisLabelYPosition =
+              height - (i / yAxisDivisions) * height + topPadding + 4;
+            return (
+              <text
+                key={i}
+                x={leftPadding}
+                y={yAxisLabelYPosition}
+                fill="black"
+                textAnchor="middle"
+                className="ff-bar-chart-labels"
+              >
+                {((i * maxValue) / yAxisDivisions).toFixed(1)}
+              </text>
+            );
+          })}
+
+          {data.map((item, index) => {
+            const barHeight = (item.value / maxValue) * height;
+            const totalBarHeight = barHeight > 0 ? barHeight : 2;
+            const barX = index * (barWidth + barGap) + leftPadding + padding;
+            const barY = height - totalBarHeight + topPadding;
+
+            const iconWidth = iconSize || 20;
+            const iconX = barX + barWidth / 2 - iconWidth / 2;
+            const iconY = barY - iconWidth;
+
+            return (
+              <g key={index}>
+                {icons[index] && typeof icons[index] === 'string' && (
+                  <Icon
+                    name={String(icons[index])}
+                    x={String(iconX)}
+                    y={String(iconY)}
+                    width={iconWidth}
+                    height={iconWidth}
+                    chartIcon={true}
+                  />
+                )}
+
+                <rect
+                  x={barX}
+                  y={barY}
+                  width={barWidth}
+                  height={totalBarHeight}
+                  fill={getFillColor(index)}
+                  rx={barBorderRadius}
+                  ry={barBorderRadius}
+                  onMouseEnter={(e) =>
+                    handleMouseEnter(
+                      e,
+                      item.label,
+                      item.value,
+                      getBorderColor(index)
+                    )
+                  }
+                  onMouseMove={handleMouseMove}
+                  onMouseLeave={handleMouseLeave}
+                ></rect>
+
+                {showXAxisLabels && (
+                  <text
+                    x={barX + barWidth / 2}
+                    y={height + topPadding + 15}
+                    fill="black"
+                    textAnchor="middle"
+                    className="ff-bar-chart-labels"
+                  >
+                    {truncateText(item.label, 10)}
+                  </text>
+                )}
+              </g>
+            );
+          })}
+
+          <line
+            x1={60}
+            y1={height + topPadding}
+            x2={chartWidth}
+            y2={height + topPadding}
+            stroke="#D9D9D9"
+            strokeWidth="1"
+          />
+
+          {xAxisLabel && (
+            <text
+              x={chartWidth / 2}
+              y={height + topPadding + (showXAxisLabels ? 40 : 20)}
+              fontSize="12"
+              fill="black"
+              textAnchor="middle"
+              className="ff-bar-chart-labels"
+            >
+              {xAxisLabel}
+            </text>
+          )}
+
+          {yAxisLabel && (
+            <text
+              x={-(height / 2 + 35)}
+              y={leftPadding - 30}
+              transform="rotate(-90)"
+              fill="black"
+              textAnchor="middle"
+              alignmentBaseline="middle"
+              className="ff-bar-chart-labels"
+            >
+              {yAxisLabel}
+            </text>
+          )}
+        </svg>
+      </div>
+
+      {legend && legendPosition === 'bottom' && (
+        <div className="ff-legend-container">
+          <div
+            className="ff-bar-chart-legend"
+            style={{ gap: `${legendGap}px` }}
+          >
+            {data.map((item, index) => (
+              <div key={item.label} className="ff-bar-chart-legend-item">
+                {icons[index] && typeof icons[index] === 'string' ? (
+                  <Icon
+                    name={String(icons[index])}
+                    width={iconSize}
+                    height={iconSize}
+                  />
+                ) : (
+                  <span
+                    className="ff-bar-chart-legend-item-circle"
+                    style={{
+                      backgroundColor:
+                        colors[index % colors.length]?.[0] || 'grey',
+                    }}
+                  ></span>
+                )}
+                <Typography
+                  as="div"
+                  fontSize={10}
+                  fontWeight="regular"
+                  className="ff-legend-label"
+                >
+                  {item.label}
+                </Typography>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {tooltip.visible && (
+        <div
+          className="ff-bar-chart-tooltip"
+          style={{
+            top: tooltip.y - 20,
+            left: tooltip.x + 10,
+          }}
+        >
+          {tooltip.content}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default BarChart;