@epcare/esm-report-builder 0.1.1-pre.2 → 0.1.1-pre.25

package/src/data-visualizer/components/cqi-components/detail.component.tsx

@@ -0,0 +1,110 @@
+import React, { useState } from "react";
+import styles from "./detail.scss";
+import { ContentSwitcher, Switch } from "@carbon/react";
+import {
+  ClientStatusElements,
+  DemographicsElements,
+  OtherElements,
+  PartnerTestingElements,
+  RegimenDetailsElements,
+  SiblingsTestingElements,
+  VlCdElements,
+} from "./cqi-elements";
+interface RowDetailProps {
+  reportItem: any;
+}
+
+type TabType =
+  | "client_demographics"
+  | "siblings_testing"
+  | "partner_testing"
+  | "client_status"
+  | "regimen_details"
+  | "vl_cd4"
+  | "other_details";
+
+const RowDetail: React.FC<RowDetailProps> = ({ reportItem }) => {
+  const [tabType, setTabType] = useState<TabType>("client_demographics");
+
+  const handleTabTypeChange = ({ name }) => {
+    setTabType(name);
+  };
+
+  const createReportDetail = (item) => {
+    return (
+      <div className={styles.detailItem}>
+        <span className={styles.detailLabel}>{item.label}:</span>
+        <span className={styles.detailValue}>
+          {reportItem?.[`${item.key}`]}
+        </span>
+      </div>
+    );
+  };
+
+  return (
+    <>
+      <div className={styles.detailContentSwitchContainer}>
+        <ContentSwitcher
+          size={`lg`}
+          selectedIndex={0}
+          onChange={handleTabTypeChange}
+        >
+          <Switch name="client_demographics">
+            <div className={styles.switch}>
+              <span>Client Demographics</span>
+            </div>
+          </Switch>
+          <Switch name="siblings_testing">
+            <div className={styles.switch}>
+              <span>Index Testing of Siblings</span>
+            </div>
+          </Switch>
+          <Switch name="partner_testing">
+            <div className={styles.switch}>
+              <span>Index Testing of Sexual Partners</span>
+            </div>
+          </Switch>
+          <Switch name="client_status">
+            <div className={styles.switch}>
+              <span>Client Status at Facility</span>
+            </div>
+          </Switch>
+          <Switch name="regimen_details">
+            <div className={styles.switch}>
+              <span>Current Regimen details</span>
+            </div>
+          </Switch>
+          <Switch name="vl_cd4">
+            <div className={styles.switch}>
+              <span>Viral load & CD4</span>
+            </div>
+          </Switch>
+          <Switch name="other_details">
+            <div className={styles.switch}>
+              <span>Other details</span>
+            </div>
+          </Switch>
+        </ContentSwitcher>
+      </div>
+
+      <div className={styles.detailContainer}>
+        {tabType === "client_demographics" &&
+          DemographicsElements.map((item) => createReportDetail(item))}
+        {tabType === "siblings_testing" &&
+          SiblingsTestingElements.map((item) => createReportDetail(item))}
+        {tabType === "partner_testing" &&
+          PartnerTestingElements.map((item) => createReportDetail(item))}
+        {tabType === "client_status" &&
+          ClientStatusElements.map((item) => createReportDetail(item))}
+        {tabType === "regimen_details" &&
+          RegimenDetailsElements.map((item) => createReportDetail(item))}
+        {tabType === "vl_cd4" &&
+          VlCdElements.map((item) => createReportDetail(item))}
+        {tabType === "other_details" &&
+          OtherElements.map((item) => createReportDetail(item))}
+      </div>
+    </>
+  );
+};
+
+export default RowDetail;

package/src/data-visualizer/components/cqi-components/detail.scss

@@ -0,0 +1,22 @@
+@use '@carbon/styles/scss/colors';
+@use '@carbon/styles/scss/type';
+
+.detailContainer {
+  width: 100%;
+  padding: 1rem;
+}
+
+.detailItem {
+  width: 25%;
+  display: inline-block;
+  padding-right: 1rem;
+}
+
+.detailLabel {
+  @include type.type-style('heading-01');
+}
+
+.detailValue {
+  margin-left: 0.5rem;
+}
+

package/src/data-visualizer/components/data-table/data-table.component.tsx

@@ -0,0 +1,208 @@
+import {
+  Button,
+  DataTable,
+  Pagination,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TableToolbar,
+  TableToolbarContent,
+  TableToolbarSearch,
+  Tile,
+} from "@carbon/react";
+import {
+  isDesktop,
+  useLayoutType,
+  usePagination,
+} from "@openmrs/esm-framework";
+import { DocumentDownload } from "@carbon/react/icons";
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import styles from "./data-tables.scss";
+import { saveAs } from "file-saver";
+import type { ReportType } from "../../types";
+
+type FilterProps = {
+  rowIds: Array<string>;
+  headers: any;
+  cellsById: any;
+  inputValue: string;
+  getCellId: (row, key) => string;
+};
+
+interface ListProps {
+  columns: any;
+  data: any;
+  report: {
+    type: ReportType;
+    name: string;
+  };
+}
+
+const DataList: React.FC<ListProps> = ({ columns, data, report }) => {
+  const { t } = useTranslation();
+  const layout = useLayoutType();
+  const isTablet = useLayoutType() === "tablet";
+  const responsiveSize = isTablet ? "lg" : "sm";
+  const [allRows, setAllRows] = useState([]);
+  const [list] = useState(data);
+  const pageSizes = [10, 20, 30, 40, 50];
+  const [currentPageSize, setPageSize] = useState(10);
+  const {
+    goTo,
+    results: paginatedList,
+    currentPage,
+  } = usePagination(data, currentPageSize);
+
+  const handleFilter = ({
+    rowIds,
+    headers,
+    cellsById,
+    inputValue,
+    getCellId,
+  }: FilterProps): Array<string> => {
+    return rowIds.filter((rowId) =>
+      headers.some(({ key }) => {
+        const cellId = getCellId(rowId, key);
+        const filterableValue = cellsById[cellId].value;
+        const filterTerm = inputValue.toLowerCase();
+
+        if (typeof filterableValue === "boolean") {
+          return false;
+        }
+
+        return ("" + filterableValue).toLowerCase().includes(filterTerm);
+      })
+    );
+  };
+
+  useEffect(() => {
+    const rows: Array<Record<string, string>> = [];
+
+    paginatedList.map((item: any, index) => {
+      return rows.push({ ...item, id: index++ });
+    });
+    setAllRows(rows);
+  }, [paginatedList, allRows]);
+
+  const handleReportDownload = (documentType: string) => {
+    const currentDate = new Date();
+    const filename = `${report.name}_${currentDate
+      .toISOString()
+      .replace(/:/g, "-")}`;
+    const csvString = convertToCSV(list, columns);
+
+    if (documentType === "csv") {
+      const blob = new Blob([csvString], { type: "text/csv;charset=utf-8" });
+      saveAs(blob, `${filename}.csv`);
+    } else if (documentType === "json") {
+      const jsonBlob = new Blob([csvString], { type: "application/json" });
+      saveAs(jsonBlob, `${filename}.json`);
+    }
+  };
+
+  const convertToCSV = (data, columns) => {
+    const header = columns.map((col) => col.header).join(",");
+    const rows = data.map((row) =>
+      columns.map((col) => JSON.stringify(row[col.key])).join(",")
+    );
+    return [header, ...rows].join("\n");
+  };
+
+  return (
+    <DataTable
+      data-floating-menu-container
+      rows={allRows}
+      headers={columns}
+      filterRows={handleFilter}
+      overflowMenuOnHover={isDesktop(layout)}
+      size={isTablet ? "lg" : "sm"}
+      useZebraStyles
+    >
+      {({ rows, headers, getHeaderProps, getTableProps, onInputChange }) => (
+        <div>
+          <TableContainer className={styles.tableContainer}>
+            <div className={styles.toolbarWrapper}>
+              <TableToolbar size={responsiveSize}>
+                <TableToolbarContent className={styles.toolbarContent}>
+                  <TableToolbarSearch
+                    className={styles.searchbox}
+                    expanded
+                    onChange={onInputChange}
+                    placeholder={t("searchThisList", "Search this list")}
+                    size={responsiveSize}
+                  />
+                  {report.type === "dynamic" ? (
+                    <Button
+                      size="sm"
+                      kind="tertiary"
+                      onClick={() => handleReportDownload("csv")}
+                      className={styles.actionButton}
+                    >
+                      <DocumentDownload />
+                      <span>Download Report</span>
+                    </Button>
+                  ) : null}
+                </TableToolbarContent>
+              </TableToolbar>
+            </div>
+            <Table {...getTableProps()}>
+              <TableHead>
+                <TableRow>
+                  {headers.map((header) => (
+                    <TableHeader {...getHeaderProps({ header })}>
+                      {header.header}
+                    </TableHeader>
+                  ))}
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {rows.map((row) => (
+                  <TableRow key={row.id}>
+                    {row.cells.map((cell) => (
+                      <TableCell key={cell.id}>{cell.value}</TableCell>
+                    ))}
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+            {rows.length === 0 ? (
+              <div className={styles.tileContainer}>
+                <Tile className={styles.tile}>
+                  <div className={styles.tileContent}>
+                    <p className={styles.content}>
+                      {t("No data", "No data to display")}
+                    </p>
+                  </div>
+                </Tile>
+              </div>
+            ) : null}
+            <Pagination
+              forwardText="Next page"
+              backwardText="Previous page"
+              page={currentPage}
+              pageSize={currentPageSize}
+              pageSizes={pageSizes}
+              totalItems={data?.length}
+              className={styles.pagination}
+              onChange={({ pageSize, page }) => {
+                if (pageSize !== currentPageSize) {
+                  setPageSize(pageSize);
+                }
+                if (page !== currentPage) {
+                  goTo(page);
+                }
+              }}
+            />
+          </TableContainer>
+        </div>
+      )}
+    </DataTable>
+  );
+};
+
+export default DataList;

package/src/data-visualizer/components/data-table/data-tables.scss

@@ -0,0 +1,206 @@
+@use '@carbon/styles/scss/colors';
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+.widgetContainer {
+    background-color: colors.$white-0;
+}
+
+.widgetHeaderContainer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: spacing.$spacing-04 0 spacing.$spacing-04 spacing.$spacing-05;
+    h4 {
+        &::after {
+            content: '';
+            display: block;
+            width: 2rem;
+            padding-top: 0.188rem;
+            border-bottom: 0.375rem solid var(--brand-01);
+        }
+    }
+}
+
+.toggleButtons {
+    width: fit-content;
+    margin: 0 spacing.$spacing-03;
+}
+
+.searchField {
+    width: 100%;
+    max-width: 250px;
+    border: 0 !important;
+}
+
+.container {
+    margin-top: 16px;
+    margin-left: inherit;
+    width: 100%;
+    overflow-y: hidden;
+}
+
+.tabContainer {
+    margin-top: 16px;
+    padding-left: 1rem;
+    background-color: colors.$white-0;
+}
+
+.searchbox {
+    max-width: 16rem;
+    input:focus {
+        outline: 2px solid colors.$orange-40 !important;
+    }
+}
+
+.tabContainer li button {
+    width: 100% !important;
+}
+
+.tileContainer {
+    background-color: colors.$white-0;
+    border-top: 1px solid colors.$gray-20;
+    padding: 5rem 0;
+}
+
+.tile {
+    margin: auto;
+    width: fit-content;
+}
+
+.tileContent {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.menuItem {
+    max-width: none;
+}
+
+.radioButtonGroup {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    margin-top: spacing.$spacing-03;
+    min-height: spacing.$spacing-10;
+    width: 100%;
+    @include type.type-style('body-compact-01');
+}
+
+.radioButton {
+    padding: spacing.$spacing-02 spacing.$spacing-02;
+    margin: spacing.$spacing-03 0;
+}
+
+.sectionTitle {
+    @include type.type-style('heading-compact-02');
+    color: colors.$gray-70;
+    margin-bottom: spacing.$spacing-04;
+}
+
+.modalBody {
+    padding-bottom: spacing.$spacing-05;
+}
+
+.tabContainer div[role='tabpanel'] {
+    padding: 0 !important;
+}
+
+.tabContainer li button {
+    width: 100% !important;
+}
+
+.tableContainer {
+    margin: 0;
+    padding: 0;
+}
+
+.search {
+    max-width: 16rem;
+    input {
+        background-color: colors.$white-0 !important;
+    }
+}
+
+.toolbarWrapper {
+    position: relative;
+    display: flex;
+    justify-content: flex-end;
+}
+
+.tableContainer {
+    padding: 0;
+     :global(.cds--data-table-content) {
+        border: 1px solid colors.$gray-20;
+        border-bottom: none;
+        overflow-x: auto;
+        display: block;
+    }
+     :global(.cds--table-toolbar) {
+        position: relative;
+        height: 2rem;
+        min-height: 0;
+        overflow: visible;
+        top: 0;
+    }
+    &:global(.cds--data-table-container) {
+        margin: 0 1rem;
+        padding: 0;
+    }
+    a {
+        text-decoration: none;
+    }
+    tr {
+        width: spacing.$spacing-01;
+    }
+    .cds--table-sort__description {
+        display: none;
+    }
+}
+
+.toolbarAction {
+    max-width: none;
+}
+
+.patientListDownload {
+    margin-top: 10px;
+}
+
+.redCell {
+    background-color: colors.$red-40 !important;
+}
+
+.grayCell {
+    background-color: colors.$gray-30 !important;
+}
+
+.greenCell {
+    background-color: colors.$green-30 !important;
+}
+
+.yellowCell {
+    background-color: colors.$yellow-20 !important;
+}
+
+.cellStyling {
+    border-right: 1px solid colors.$gray-20;
+    border-left: 1px solid colors.$gray-20;
+}
+
+.tableHeaderStyle {
+    font-weight: 600;
+    font-size: 12px;
+    line-height: 1px;
+}
+
+.tableHeaderFlag {
+    writing-mode: vertical-lr;
+    transform: rotate(180deg);
+}
+
+.actionButton {
+    margin-left: 1rem;
+    svg {
+        margin-right: 0.5rem;
+    }
+}

package/src/data-visualizer/components/empty-state/empty-state-illustration.component.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+
+const EmptyStateIllustration = () => {
+  return (
+    <svg width={64} height={64} viewBox="0 0 64 64">
+      <title>Empty data illustration</title>
+      <g fill="none" fillRule="evenodd">
+        <path
+          d="M38.133 13.186H21.947c-.768.001-1.39.623-1.39 1.391V50.55l-.186.057-3.97 1.216a.743.743 0 01-.927-.493L3.664 12.751a.742.742 0 01.492-.926l6.118-1.874 17.738-5.43 6.119-1.873a.741.741 0 01.926.492L38.076 13l.057.186z"
+          fill="#F4F4F4"
+        />
+        <path
+          d="M41.664 13L38.026 1.117A1.576 1.576 0 0036.056.07l-8.601 2.633-17.737 5.43-8.603 2.634a1.578 1.578 0 00-1.046 1.97l12.436 40.616a1.58 1.58 0 001.969 1.046l5.897-1.805.185-.057v-.194l-.185.057-5.952 1.822a1.393 1.393 0 01-1.737-.923L.247 12.682a1.39 1.39 0 01.923-1.738L9.772 8.31 27.51 2.881 36.112.247a1.393 1.393 0 011.737.923L41.47 13l.057.186h.193l-.057-.185z"
+          fill="#8D8D8D"
+        />
+        <path
+          d="M11.378 11.855a.836.836 0 01-.798-.59L9.385 7.361a.835.835 0 01.554-1.042l16.318-4.996a.836.836 0 011.042.554l1.195 3.902a.836.836 0 01-.554 1.043l-16.318 4.995a.831.831 0 01-.244.037z"
+          fill="#C6C6C6"
+        />
+        <circle fill="#C6C6C6" cx={17.636} cy={2.314} r={1.855} />
+        <circle
+          fill="#FFF"
+          fillRule="nonzero"
+          cx={17.636}
+          cy={2.314}
+          r={1.175}
+        />
+        <path
+          d="M55.893 53.995H24.544a.79.79 0 01-.788-.789V15.644a.79.79 0 01.788-.788h31.349a.79.79 0 01.788.788v37.562a.79.79 0 01-.788.789z"
+          fill="#F4F4F4"
+        />
+        <path
+          d="M41.47 13H21.948a1.579 1.579 0 00-1.576 1.577V52.4l.185-.057V14.577c.001-.768.623-1.39 1.391-1.39h19.581L41.471 13zm17.02 0H21.947a1.579 1.579 0 00-1.576 1.577v42.478c0 .87.706 1.576 1.576 1.577H58.49a1.579 1.579 0 001.576-1.577V14.577a1.579 1.579 0 00-1.576-1.576zm1.39 44.055c0 .768-.622 1.39-1.39 1.392H21.947c-.768-.001-1.39-.624-1.39-1.392V14.577c0-.768.622-1.39 1.39-1.39H58.49c.768 0 1.39.622 1.39 1.39v42.478z"
+          fill="#8D8D8D"
+        />
+        <path
+          d="M48.751 17.082H31.686a.836.836 0 01-.835-.835v-4.081c0-.46.374-.834.835-.835H48.75c.461 0 .834.374.835.835v4.08c0 .462-.374.835-.835.836z"
+          fill="#C6C6C6"
+        />
+        <circle fill="#C6C6C6" cx={40.218} cy={9.755} r={1.855} />
+        <circle
+          fill="#FFF"
+          fillRule="nonzero"
+          cx={40.218}
+          cy={9.755}
+          r={1.13}
+        />
+      </g>
+    </svg>
+  );
+};
+
+export default EmptyStateIllustration;

package/src/data-visualizer/components/header/header.component.tsx

@@ -0,0 +1,43 @@
+import React, { JSX } from "react";
+import { useTranslation } from "react-i18next";
+import { Calendar, Location } from "@carbon/react/icons";
+import { formatDate, useSession } from "@openmrs/esm-framework";
+import styles from "./header.scss";
+
+const Header: React.FC<{
+  title?: string;
+  illustrationComponent: JSX.Element;
+}> = ({ title, illustrationComponent }) => {
+  const { t } = useTranslation();
+  const userSession = useSession();
+  const userLocation = userSession?.sessionLocation?.display;
+
+  return (
+    <>
+      <div className={styles.header}>
+        <div className={styles["left-justified-items"]}>
+          {illustrationComponent}
+          <div className={styles["page-labels"]}>
+            <p>{t("home", "Home")}</p>
+            <p className={styles["page-name"]}>
+              {title ?? t("dataVisualizer", "Data visualizer")}
+            </p>
+          </div>
+        </div>
+        <div className={styles["right-justified-items"]}>
+          <div className={styles["date-and-location"]}>
+            <Location size={16} />
+            <span className={styles.value}>{userLocation}</span>
+            <span className={styles.middot}>&middot;</span>
+            <Calendar size={16} />
+            <span className={styles.value}>
+              {formatDate(new Date(), { mode: "standard" })}
+            </span>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Header;