@wealthx/ui 1.0.0 → 1.0.1

package/src/charts/FrontendMixedChart.tsx

@@ -0,0 +1,264 @@
+import React, { useMemo, useState } from "react";
+import { styled } from "@mui/material/styles";
+import { Typography, ToggleButton, ToggleButtonGroup } from "@mui/material";
+import {
+  BarController,
+  BarElement,
+  CategoryScale,
+  Chart as ChartJS,
+  Legend,
+  LinearScale,
+  LineController,
+  LineElement,
+  PointElement,
+  TimeScale,
+  Title,
+  Tooltip,
+} from "chart.js";
+import "chartjs-adapter-date-fns";
+import { Chart } from "react-chartjs-2";
+import { formatNumber, formatNumberWithText } from "./chart-utils";
+import { LoadingChartBackdrop } from "./LoadingChartBackdrop";
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  BarController,
+  PointElement,
+  LineElement,
+  LineController,
+  Title,
+  Tooltip,
+  Legend,
+  TimeScale
+);
+
+export interface MixedChartDataset {
+  type: "bar" | "line";
+  label: string;
+  data: Array<{ x: string | Date; y: number }>;
+  backgroundColor?: string;
+  borderColor?: string;
+  borderWidth?: number;
+  order?: number;
+  fill?: boolean;
+  tension?: number;
+  pointRadius?: number;
+  barPercentage?: number;
+  pointStyle?: string;
+  pointBorderColor?: string;
+  pointBackgroundColor?: string;
+  pointHoverBackgroundColor?: string;
+  pointHoverBorderColor?: string;
+  hoverBackgroundColor?: string;
+  hoverBorderColor?: string;
+}
+
+export interface FrontendMixedChartProps {
+  datasets: MixedChartDataset[];
+  labels?: string[];
+  title?: string;
+  isLoading?: boolean;
+  isError?: boolean;
+  timeFilters?: string[];
+  defaultTimeFilterIndex?: number;
+  onTimeFilterChange?: (index: number) => void;
+  height?: number;
+  isMobile?: boolean;
+  customChartOptions?: Record<string, any>;
+}
+
+const FullwidthChartContainer = styled("div")({
+  position: "relative",
+  width: "100%",
+});
+
+const ChartHeader = styled("div")({
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  marginBottom: 12,
+});
+
+const BarChartSize = styled("div")({
+  flex: "auto",
+  height: 300,
+  position: "relative",
+  width: "100%",
+});
+
+const LoadingIndicator = styled("div")({
+  position: "absolute",
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  backgroundColor: "rgba(255,255,255,0.8)",
+});
+
+const buildChartOption = (isMobile: boolean) => ({
+  elements: { line: { fill: false } },
+  scales: {
+    x: {
+      type: "time" as const,
+      offset: true,
+      beginAtZero: false,
+      display: true,
+      time: {
+        displayFormats: { month: "yyyy-MM", quarter: "yyyy-MM" },
+        unit: "quarter" as const,
+        stepSize: 1,
+        tooltipFormat: "yyyy-MM",
+      },
+      grid: { display: false, drawOnChartArea: false },
+      ticks: {
+        maxTicksLimit: isMobile ? 4 : 20,
+        autoSkip: false,
+        maxRotation: 0,
+        minRotation: 0,
+        beginAtZero: false,
+        source: "auto" as const,
+      },
+    },
+    y: {
+      type: "linear" as const,
+      display: true,
+      position: "left" as const,
+      ticks: {
+        padding: 5,
+        maxTicksLimit: 6,
+        min: 0,
+        callback: (value: any) => formatNumberWithText(Number(value), 2),
+      },
+      grid: {
+        display: false,
+        drawBorder: false,
+        drawOnChartArea: false,
+        color: "transparent",
+      },
+      border: { display: false },
+    },
+  },
+  maintainAspectRatio: false,
+  responsive: true,
+  plugins: {
+    legend: {
+      position: "bottom" as const,
+      labels: { usePointStyle: true, boxWidth: 12 },
+    },
+    tooltip: {
+      enabled: true,
+      mode: "nearest" as const,
+      intersect: false,
+      backgroundColor: "#fff",
+      titleColor: "#000",
+      bodyColor: "#000",
+      displayColors: false,
+      borderColor: "#000",
+      borderWidth: 1,
+      padding: 8,
+      cornerRadius: 4,
+      titleSpacing: 4,
+      bodySpacing: 4,
+      callbacks: {
+        label(tooltipItem: any) {
+          const xLabel = tooltipItem.dataset.label;
+          const { parsed = { y: 0 } } = tooltipItem;
+          const yLabel = parsed.y;
+          const chartValueWithCommas = formatNumber(Math.abs(yLabel));
+          return `${xLabel}: ${
+            yLabel >= 0
+              ? `$${chartValueWithCommas}`
+              : `-$${chartValueWithCommas}`
+          }`.trim();
+        },
+      },
+    },
+  },
+  interaction: { mode: "nearest" as const, intersect: false },
+});
+
+export const FrontendMixedChart: React.FC<FrontendMixedChartProps> = ({
+  datasets,
+  labels,
+  title,
+  isLoading = false,
+  isError = false,
+  timeFilters,
+  defaultTimeFilterIndex = 0,
+  onTimeFilterChange,
+  height,
+  isMobile = false,
+  customChartOptions = {},
+}) => {
+  const [selectedFilter, setSelectedFilter] = useState(defaultTimeFilterIndex);
+
+  const handleFilterChange = (
+    _event: React.MouseEvent<HTMLElement>,
+    newValue: number | null
+  ) => {
+    if (newValue !== null) {
+      setSelectedFilter(newValue);
+      onTimeFilterChange?.(newValue);
+    }
+  };
+
+  const chartData = useMemo(
+    () => ({
+      ...(labels ? { labels } : {}),
+      datasets,
+    }),
+    [datasets, labels]
+  );
+
+  const options = useMemo(
+    () => ({ ...buildChartOption(isMobile), ...customChartOptions }),
+    [isMobile, customChartOptions]
+  );
+
+  return (
+    <FullwidthChartContainer>
+      <ChartHeader>
+        {title && (
+          <Typography variant="subtitle1" fontWeight={600}>
+            {title}
+          </Typography>
+        )}
+        {timeFilters && (
+          <ToggleButtonGroup
+            value={selectedFilter}
+            exclusive
+            onChange={handleFilterChange}
+            size="small"
+          >
+            {timeFilters.map((filter, index) => (
+              <ToggleButton key={filter} value={index}>
+                {filter}
+              </ToggleButton>
+            ))}
+          </ToggleButtonGroup>
+        )}
+      </ChartHeader>
+
+      <BarChartSize style={height ? { height } : undefined}>
+        <Chart
+          type="bar"
+          data={chartData as any}
+          options={options as any}
+        />
+        {isLoading && (
+          <LoadingIndicator>
+            <LoadingChartBackdrop isLoading={isLoading} isError={isError} />
+          </LoadingIndicator>
+        )}
+      </BarChartSize>
+    </FullwidthChartContainer>
+  );
+};
+
+FrontendMixedChart.displayName = "FrontendMixedChart";

package/src/charts/FrontendPercentageBar.tsx

@@ -0,0 +1,247 @@
+import React, { useMemo, useState } from "react";
+import { Box, Typography } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { convertToFloat } from "./chart-utils";
+
+const MAXIMUM_CATEGORIES = 5;
+const MAXIMUM_CATEGORIES_PERCENT = 5;
+
+export interface PercentageBarPart {
+  title: string;
+  percentage: number;
+}
+
+export interface FrontendPercentageBarProps {
+  defaultTitle?: string;
+  chartColors?: string[];
+  parts?: PercentageBarPart[];
+  chartIcons?: React.ReactNode[];
+  showFullCategory?: boolean;
+}
+
+const Root = styled("div")({
+  width: "100%",
+});
+
+const Title = styled("div")({
+  fontSize: 16,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  transition: "all 0.2s ease-in",
+  whiteSpace: "nowrap",
+  minHeight: 24,
+});
+
+const Bar = styled("div")({
+  display: "flex",
+  gap: 2,
+  height: 25,
+  marginBottom: "2.5rem",
+  marginTop: "1.5rem",
+  width: "100%",
+  "&:not(:hover) .percentage-bar-part": {
+    backgroundColor: "var(--bg-color)",
+  },
+  "&:not(:hover) .percentage-bar-icon": {
+    opacity: 1,
+  },
+});
+
+const Part = styled("div")({
+  borderRadius: 2,
+  position: "relative",
+  transition: "background-color 0.3s ease-in",
+  cursor: "pointer",
+  backgroundColor: "#e9edf2",
+  "&:hover": {
+    backgroundColor: "var(--bg-color)",
+  },
+  "&:hover .percentage-bar-icon": {
+    opacity: 1,
+  },
+});
+
+const OtherBar = styled("div")({
+  display: "flex",
+  gap: 2,
+  position: "relative",
+  "&:hover .percentage-bar-part": {
+    backgroundColor: "var(--bg-color)",
+  },
+  "&:hover .percentage-bar-icon": {
+    opacity: 1,
+  },
+});
+
+const ValuePart = styled("div")({
+  bottom: -28,
+  height: 20,
+  left: 0,
+  position: "absolute",
+  width: "100%",
+  fontSize: 12,
+  padding: "1rem 0.5rem",
+  "&::after": {
+    borderBottom: "2px solid #E8EAEC",
+    borderLeft: "2px solid #E8EAEC",
+    borderRight: "2px solid #E8EAEC",
+    bottom: -4,
+    content: '""',
+    height: 10,
+    left: 0,
+    position: "absolute",
+    width: "100%",
+  },
+});
+
+const IconWrapper = styled("div")({
+  opacity: 0,
+  marginLeft: 4,
+  width: 18,
+  height: "100%",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  transition: "opacity 0.3s ease-in",
+  "& svg": { width: "100%" },
+});
+
+const mergeOtherCategories = (others: PercentageBarPart[]): PercentageBarPart => {
+  return others.reduce(
+    (result, part) => ({
+      ...result,
+      percentage: part.percentage + result.percentage,
+    }),
+    { title: "Other", percentage: 0 }
+  );
+};
+
+const splitCategoryParts = <T,>(
+  items: T[],
+  maxIndex: number
+): [T[], T[]] => {
+  if (maxIndex < 0) return [items, []];
+  const idx = maxIndex > MAXIMUM_CATEGORIES ? MAXIMUM_CATEGORIES : maxIndex;
+  return [items.slice(0, idx), items.slice(idx)];
+};
+
+export const FrontendPercentageBar: React.FC<FrontendPercentageBarProps> = ({
+  defaultTitle,
+  chartColors = [],
+  parts = [],
+  chartIcons = [],
+  showFullCategory = false,
+}) => {
+  const [selectedTitle, setSelectedTitle] = useState("");
+
+  const handleMouseEnterPart = (part: PercentageBarPart) => {
+    setSelectedTitle(`${(part.percentage * 100).toFixed(1)}% ${part.title}`);
+  };
+
+  const handleMouseLeaveBar = () => {
+    setSelectedTitle("");
+  };
+
+  const maximumCategoryItem = useMemo(() => {
+    if (showFullCategory) return parts.length;
+    return parts
+      .slice()
+      .sort((a, b) => b.percentage - a.percentage)
+      .findIndex((part) => part.percentage * 100 < MAXIMUM_CATEGORIES_PERCENT);
+  }, [parts, showFullCategory]);
+
+  const [firstParts, secondParts] = useMemo(() => {
+    if (showFullCategory) return [parts, [] as PercentageBarPart[]];
+    return splitCategoryParts(parts, maximumCategoryItem);
+  }, [parts, maximumCategoryItem, showFullCategory]);
+
+  const [firstColors, secondColors] = useMemo(() => {
+    if (showFullCategory) return [chartColors, [] as string[]];
+    return splitCategoryParts(chartColors, maximumCategoryItem);
+  }, [chartColors, maximumCategoryItem, showFullCategory]);
+
+  const [firstIcons, secondIcons] = useMemo(() => {
+    if (showFullCategory) return [chartIcons, [] as React.ReactNode[]];
+    return splitCategoryParts(chartIcons, maximumCategoryItem);
+  }, [chartIcons, maximumCategoryItem, showFullCategory]);
+
+  const otherCategoryValue = mergeOtherCategories(secondParts);
+
+  return (
+    <Root>
+      <Title>{selectedTitle || defaultTitle}</Title>
+      {parts.length === 0 ? (
+        <Box
+          sx={{
+            height: 22,
+            width: "100%",
+            backgroundColor: "rgba(191,191,191,0.1)",
+            border: "1px solid #E8EAEC",
+            borderRadius: "3px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            mt: 0.5,
+          }}
+        >
+          <Typography sx={{ color: "#4A5C6A", fontSize: 12, fontWeight: 400 }}>
+            No data
+          </Typography>
+        </Box>
+      ) : (
+        <Bar onMouseLeave={handleMouseLeaveBar}>
+          {firstParts.map((part, index) => (
+            <Part
+              key={part.title}
+              className="percentage-bar-part"
+              onMouseEnter={() => handleMouseEnterPart(part)}
+              style={
+                {
+                  flexGrow: part.percentage * 10,
+                  "--bg-color": firstColors[index],
+                } as React.CSSProperties
+              }
+            >
+              {firstIcons[index] && (
+                <IconWrapper className="percentage-bar-icon">
+                  {firstIcons[index]}
+                </IconWrapper>
+              )}
+              <ValuePart onMouseEnter={() => handleMouseEnterPart(part)}>
+                {convertToFloat(part.percentage * 100, 1)}%
+              </ValuePart>
+            </Part>
+          ))}
+          {otherCategoryValue.percentage !== 0 && (
+            <OtherBar style={{ flexGrow: otherCategoryValue.percentage * 10 }}>
+              {secondParts.map((part, index) => (
+                <Part
+                  key={part.title}
+                  className="percentage-bar-part"
+                  onMouseEnter={() => handleMouseEnterPart(part)}
+                  style={
+                    {
+                      flexGrow: part.percentage * 100,
+                      "--bg-color": secondColors[index],
+                    } as React.CSSProperties
+                  }
+                >
+                  {part.percentage > 0.05 && secondIcons[index] && (
+                    <IconWrapper className="percentage-bar-icon">
+                      {secondIcons[index]}
+                    </IconWrapper>
+                  )}
+                </Part>
+              ))}
+              <ValuePart onMouseEnter={() => handleMouseEnterPart(otherCategoryValue)}>
+                {convertToFloat(otherCategoryValue.percentage * 100, 1)}%
+              </ValuePart>
+            </OtherBar>
+          )}
+        </Bar>
+      )}
+    </Root>
+  );
+};
+
+FrontendPercentageBar.displayName = "FrontendPercentageBar";