@seasketch/geoprocessing/dist/src/components/table/SketchClassTable.js

Geoprocessing and reporting framework for SeaSketch 2.0

import React from "react";
import { useTranslation } from "react-i18next";
import { percentWithEdge } from "../../helpers/index.js";
import { Table } from "./Table.js";
import { styled } from "styled-components";
import { SmallReportTableStyled } from "./SmallReportTableStyled.js";
/**
 * Style component for SketchClassTable
 */
export const SketchClassTableStyled = styled(SmallReportTableStyled) `
  & {
    width: 100%;
    overflow-x: scroll;
  }

  & th:first-child,
  & td:first-child {
    position: sticky;
    left: 0;
    background: #efefef;
  }

  & th,
  & td {
  }

  .styled {
    font-size: 12px;
`;
/**
 * Table displaying sketch class metrics, one table row per sketch
 * @param SketchClassTableProps
 * @returns
 */
export const SketchClassTable = ({ rows, metricGroup: dataGroup, formatPerc = false }) => {
    const { t } = useTranslation();
    const mpaLabel = t("MPA");
    const classColumns = dataGroup.classes.map((curClass) => ({
        Header: curClass.display,
        accessor: (row) => {
            // if value for class is NaN then use 0 instead (occurs when sketch doesn't overlap with geography e.g. subregion)
            return formatPerc
                ? percentWithEdge(Number.isNaN(row[curClass.classId])
                    ? 0
                    : row[curClass.classId])
                : row[curClass.classId];
        },
    }));
    const columns = [
        {
            Header: mpaLabel,
            accessor: (row) => {
                return React.createElement("div", { style: { width: 120 } }, row.sketchName);
            },
        },
        ...classColumns,
    ];
    return (React.createElement(SketchClassTableStyled, null,
        React.createElement(Table, { className: "styled", columns: columns, data: rows.sort((a, b) => a.sketchName.localeCompare(b.sketchName)) })));
};
export default SketchClassTable;
//# sourceMappingURL=SketchClassTable.js.map