plane/web/components/analytics/custom-analytics/table.tsx

// nivo
import { BarDatum } from "@nivo/bar";
// icons
import { getPriorityIcon } from "components/icons";
// helpers
import { addSpaceIfCamelCase } from "helpers/string.helper";
// helpers
import { generateBarColor, renderMonthAndYear } from "helpers/analytics.helper";
// types
import { IAnalyticsParams, IAnalyticsResponse } from "types";
// constants
import { ANALYTICS_X_AXIS_VALUES, ANALYTICS_Y_AXIS_VALUES, DATE_KEYS } from "constants/analytics";

type Props = {
  analytics: IAnalyticsResponse;
  barGraphData: {
    data: BarDatum[];
    xAxisKeys: string[];
  };
  params: IAnalyticsParams;
  yAxisKey: "count" | "estimate";
};

export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, params, yAxisKey }) => {
  const renderAssigneeName = (assigneeId: string): string => {
    const assignee = analytics.extras.assignee_details.find((a) => a.assignees__id === assigneeId);

    if (!assignee) return "No assignee";

    return assignee.assignees__display_name || "No assignee";
  };

  return (
    <div className="flow-root">
      <div className="overflow-x-auto">
        <div className="inline-block min-w-full align-middle">
          <table className="min-w-full divide-y divide-custom-border-200 whitespace-nowrap border-y border-custom-border-200">
            <thead className="bg-custom-background-80">
              <tr className="divide-x divide-custom-border-200 text-sm text-custom-text-100">
                <th scope="col" className="py-3 px-2.5 text-left font-medium">
                  {ANALYTICS_X_AXIS_VALUES.find((v) => v.value === params.x_axis)?.label}
                </th>
                {params.segment ? (
                  barGraphData.xAxisKeys.map((key) => (
                    <th
                      key={`segment-${key}`}
                      scope="col"
                      className={`px-2.5 py-3 text-left font-medium ${
                        params.segment === "priority" || params.segment === "state__group"
                          ? "capitalize"
                          : ""
                      }`}
                    >
                      <div className="flex items-center gap-2">
                        {params.segment === "priority" ? (
                          getPriorityIcon(key)
                        ) : (
                          <span
                            className="h-3 w-3 flex-shrink-0 rounded"
                            style={{
                              backgroundColor: generateBarColor(key, analytics, params, "segment"),
                            }}
                          />
                        )}
                        {params.segment === "assignees__id"
                          ? renderAssigneeName(key)
                          : DATE_KEYS.includes(params.segment ?? "")
                          ? renderMonthAndYear(key)
                          : key}
                      </div>
                    </th>
                  ))
                ) : (
                  <th scope="col" className="py-3 px-2.5 text-left font-medium sm:pr-0">
                    {ANALYTICS_Y_AXIS_VALUES.find((v) => v.value === params.y_axis)?.label}
                  </th>
                )}
              </tr>
            </thead>
            <tbody className="divide-y divide-custom-border-200">
              {barGraphData.data.map((item, index) => (
                <tr
                  key={`table-row-${index}`}
                  className="divide-x divide-custom-border-200 text-xs text-custom-text-200"
                >
                  <td
                    className={`flex items-center gap-2 whitespace-nowrap py-2 px-2.5 font-medium ${
                      params.x_axis === "priority" || params.x_axis === "state__group"
                        ? "capitalize"
                        : ""
                    }`}
                  >
                    {params.x_axis === "priority" ? (
                      getPriorityIcon(`${item.name}`)
                    ) : (
                      <span
                        className="h-3 w-3 rounded"
                        style={{
                          backgroundColor: generateBarColor(
                            `${item.name}`,
                            analytics,
                            params,
                            "x_axis"
                          ),
                        }}
                      />
                    )}
                    {params.x_axis === "assignees__id"
                      ? renderAssigneeName(`${item.name}`)
                      : addSpaceIfCamelCase(`${item.name}`)}
                  </td>
                  {params.segment ? (
                    barGraphData.xAxisKeys.map((key, index) => (
                      <td
                        key={`segment-value-${index}`}
                        className="whitespace-nowrap py-2 px-2.5 sm:pr-0"
                      >
                        {item[key] ?? 0}
                      </td>
                    ))
                  ) : (
                    <td className="whitespace-nowrap py-2 px-2.5 sm:pr-0">{item[yAxisKey]}</td>
                  )}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
};