@openmrs/esm-report-builder 0.1.1-pre.87

package/src/components/data-visualizer/components/popover/modifier-panel.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import styles from "../../data-visualizer.scss";
+import { Add, Subtract } from "@carbon/react/icons";
+import { Checkbox, CheckboxGroup } from "@carbon/react";
+import { modifiers } from "../../constants";
+import type { Indicator } from "../../types";
+type Props = {
+  listItem: Indicator;
+  onChangeMostRecent: (selectParameter: Indicator, type: string) => void;
+};
+const ModifierComponent: React.FC<Props> = ({
+  listItem,
+  onChangeMostRecent,
+}) => {
+  return (
+    <>
+      <div className={styles.mostRecentContainer}>
+        <div>
+          {" "}
+          Most Recent #:{" "}
+          <span className={styles.modifierLeft}>{listItem?.modifier}</span>
+        </div>
+        <div>
+          <Subtract
+            className={`${styles.selectedListItemArrow} ${styles.modifier}`}
+            onClick={() => onChangeMostRecent(listItem, "subtract")}
+          />
+          <Add
+            className={styles.selectedListItemArrow}
+            onClick={() => onChangeMostRecent(listItem, "add")}
+          />
+        </div>
+      </div>
+      <CheckboxGroup
+        legendText={`Extra Values`}
+        className={styles.extrasContainer}
+        // onChange={() => onChangeExtraValue(listItem, event)}
+      >
+        {modifiers.map((modifier) => {
+          return (
+            <Checkbox
+              id={`checkbox-${modifier.id}-${listItem?.id}`}
+              labelText={modifier.label}
+              value={modifier.id}
+            />
+          );
+        })}
+      </CheckboxGroup>
+    </>
+  );
+};
+
+export default ModifierComponent;

package/src/components/data-visualizer/constants.ts

@@ -0,0 +1,445 @@
+export const cqiReports: ReportProps = {
+  categoryName: "CQI REPORTS",
+  reports: [
+    {
+      id: "2017e2e0-fc1c-4ba2-8816-92f822290c84",
+      label: "HIV Care and Treatment Audit Tool",
+    },
+    {
+      id: "9f629343-0b9b-4717-a824-2ba02f853a96",
+      label: "PMTCT Audit Tool",
+    },
+    {
+      id: "d6aecd70-f997-45ab-b43d-cfb270c0b4e1",
+      label: "Care and Treatment Audit Summary",
+    },
+  ],
+};
+
+export const integrationDataExports: ReportProps = {
+  categoryName: "Integration Data Exports",
+  reports: [
+    {
+      id: "bf79f017-8591-4eaf-88c9-1cde33226517",
+      label: "Family Connect EMTCT Module Data Export",
+    },
+    {
+      id: "662d4c00-d6bb-4494-8180-48776f415802",
+      label: "Recency HTS Client Card Data Export",
+    },
+    {
+      id: "9ec815ed-e3ac-4710-a480-360e2777c7d1",
+      label: "ART Access Register",
+    },
+    {
+      id: "1759f19f-a7a7-44c7-b584-b5bafe4c36e8",
+      label: "Viral Load Exchange Report",
+    },
+  ],
+};
+
+export const reportIndicators: Array<Indicator> = [
+  {
+    id: "IDN",
+    label: "Identifiers",
+    type: "PatientIdentifier",
+    attributes: [],
+  },
+  {
+    id: "PEN",
+    label: "Person Names",
+    type: "PersonName",
+    attributes: [],
+  },
+  {
+    id: "DEM",
+    label: "Demographics",
+    type: "Demographics",
+    attributes: [],
+  },
+  {
+    id: "ADD",
+    label: "Address",
+    type: "Address",
+    attributes: [],
+  },
+  {
+    id: "PAT",
+    label: "Person Attributes",
+    type: "PersonAttribute",
+    attributes: [],
+  },
+  {
+    id: "CON",
+    label: "Conditions",
+    type: "Condition",
+    attributes: [],
+  },
+  {
+    id: "APP",
+    label: "Appointments",
+    type: "Appointment",
+    attributes: [],
+  },
+];
+
+export const indicatorIdsWithoutEndPoints: Array<string> = [
+  "APP",
+  "ADD",
+  "DEM",
+  "PEN",
+];
+
+export const CQIReportHeaders = [
+  {
+    key: "ART_No",
+    header: "ART/HIV Clinic No",
+    accessor: "ART_No",
+    isFlag: false,
+  },
+  {
+    key: "gender",
+    header: "Sex",
+    accessor: "gender",
+    isFlag: false,
+  },
+  {
+    key: "age",
+    header: "Age",
+    accessor: "age",
+    isFlag: false,
+  },
+  {
+    key: "age_group",
+    header: "Age Groups",
+    accessor: "age_group",
+    isFlag: false,
+  },
+  {
+    key: "followup",
+    header: "Follow up",
+    accessor: "followup",
+    isFlag: true,
+  },
+  {
+    key: "child_Tested_flag",
+    header: "Children testing",
+    accessor: "child_Tested_flag",
+    isFlag: true,
+  },
+  {
+    key: "spouses_Tested_flag",
+    header: "Partner testing",
+    accessor: "spouses_Tested_flag",
+    isFlag: true,
+  },
+  {
+    key: "mmd_flag",
+    header: "MMD",
+    accessor: "mmd_flag",
+    isFlag: true,
+  },
+  {
+    key: "vl_coverage",
+    header: "VL coverage",
+    accessor: "vl_coverage",
+    isFlag: true,
+  },
+  {
+    key: "vl_bleeding",
+    header: "VL bleeding",
+    accessor: "vl_bleeding",
+    isFlag: true,
+  },
+  {
+    key: "vl_tat",
+    header: "VL TAT",
+    accessor: "vl_tat",
+    isFlag: true,
+  },
+  {
+    key: "iac",
+    header: "IAC",
+    accessor: "iac",
+    isFlag: true,
+  },
+  {
+    key: "HIVDR_sampling",
+    header: " HIVDRT",
+    accessor: "HIVDR_sampling",
+    isFlag: true,
+  },
+  {
+    key: "HIVDR_tat",
+    header: "HDRT TAT",
+    accessor: "HIVDR_tat",
+    isFlag: true,
+  },
+  {
+    key: "switched",
+    header: "Switching",
+    accessor: "switched",
+    isFlag: true,
+  },
+  {
+    key: "pss",
+    header: "PSS",
+    accessor: "pss",
+    isFlag: true,
+  },
+  {
+    key: "nutrition_support_flag",
+    header: "Nutrition",
+    accessor: "nutrition_support_flag",
+    isFlag: true,
+  },
+  {
+    key: "family_planning_flag",
+    header: "F/P",
+    accessor: "family_planning_flag",
+    isFlag: true,
+  },
+  {
+    key: "tpt_flag",
+    header: " TPT",
+    accessor: "tpt_flag",
+    isFlag: true,
+  },
+  {
+    key: "cacx_flag",
+    header: "Cacx",
+    accessor: "cacx_flag",
+    isFlag: true,
+  },
+  {
+    key: "hep_b_flag",
+    header: "Hepatitis",
+    accessor: "hep_b_flag",
+    isFlag: true,
+  },
+  {
+    key: "syphilis_flag",
+    header: "Syphilis",
+    accessor: "syphilis_flag",
+    isFlag: true,
+  },
+  {
+    key: "adv_disease_flag",
+    header: "AHIVD",
+    accessor: "adv_disease_flag",
+    isFlag: true,
+  },
+  {
+    key: "ovc_flag",
+    header: "OVC",
+    accessor: "ovc_flag",
+    isFlag: true,
+  },
+];
+
+export const dynamicReportOptions = [
+  {
+    id: "cohort",
+    label: "Cohort",
+  },
+  {
+    id: "program",
+    label: "Program",
+  },
+  {
+    id: "patientSearch",
+    label: "Patient Search",
+  },
+  {
+    id: "reportDefinition",
+    label: "Report Definition",
+  },
+];
+
+export const modifiers = [
+  {
+    id: "obsDatetime",
+    label: "DateTime",
+  },
+  {
+    id: "location",
+    label: "Location",
+  },
+  {
+    id: "comment",
+    label: "Comment",
+  },
+  {
+    id: "encounterType",
+    label: "Encounter Type",
+  },
+  {
+    id: "provider",
+    label: "Provider",
+  },
+];
+
+export const personNames = [
+  {
+    id: "givenName",
+    label: "Given Name",
+    type: "PersonName",
+    modifier: 1,
+    showModifierPanel: false,
+    extras: [],
+    attributes: [],
+  },
+  {
+    id: "middleName",
+    label: "Middle Name",
+    type: "PersonName",
+    modifier: 1,
+    showModifierPanel: false,
+    extras: [],
+    attributes: [],
+  },
+  {
+    id: "familyName",
+    label: "Family Name",
+    type: "PersonName",
+    modifier: 1,
+    showModifierPanel: false,
+    extras: [],
+    attributes: [],
+  },
+  {
+    id: "familyName2",
+    label: "Family Name 2",
+    type: "PersonName",
+    modifier: 1,
+    showModifierPanel: false,
+    extras: [],
+    attributes: [],
+  },
+];
+
+export const Demographics = [
+  {
+    id: "gender",
+    label: "Gender",
+    type: "Demographics",
+    modifier: 1,
+    showModifierPanel: false,
+    extras: [],
+    attributes: [],
+  },
+  {
+    id: "birthdate",
+    label: "Birthdate",
+    type: "Demographics",
+    modifier: 1,
+    showModifierPanel: false,
+    extras: [],
+    attributes: [],
+  },
+  {
+    id: "Age",
+    label: "Age",
+    type: "Demographics",
+    modifier: 1,
+    showModifierPanel: false,
+    extras: [],
+    attributes: [],
+  },
+  {
+    id: "birthdateEstimated",
+    label: "Birth Date estimated",
+    type: "Demographics",
+    modifier: 1,
+    showModifierPanel: false,
+    extras: [],
+    attributes: [],
+  },
+  {
+    id: "dead",
+    label: "Deceased",
+    type: "Demographics",
+    modifier: 1,
+    showModifierPanel: false,
+    extras: [],
+    attributes: [],
+  },
+  {
+    id: "deathDate",
+    label: "Date of death",
+    type: "Demographics",
+    modifier: 1,
+    showModifierPanel: false,
+    extras: [],
+    attributes: [],
+  },
+];
+
+export const Address = [
+  {
+    id: "country",
+    label: "Country",
+    type: "Address",
+    modifier: 1,
+    showModifierPanel: false,
+    extras: [],
+    attributes: [],
+  },
+  {
+    id: "countyDistrict",
+    label: "District",
+    type: "Address",
+    modifier: 1,
+    showModifierPanel: false,
+    extras: [],
+    attributes: [],
+  },
+  {
+    id: "stateProvince",
+    label: "County",
+    type: "Address",
+    modifier: 1,
+    showModifierPanel: false,
+    extras: [],
+    attributes: [],
+  },
+  {
+    id: "address3",
+    label: "Sub County",
+    type: "Address",
+    modifier: 1,
+    showModifierPanel: false,
+    extras: [],
+    attributes: [],
+  },
+  {
+    id: "address4",
+    label: "Parish",
+    type: "Address",
+    modifier: 1,
+    showModifierPanel: false,
+    extras: [],
+    attributes: [],
+  },
+  {
+    id: "address5",
+    label: "Village",
+    type: "Address",
+    modifier: 1,
+    showModifierPanel: false,
+    extras: [],
+    attributes: [],
+  },
+];
+
+export const AppointmentIndicators = [
+  {
+    id: "startDate",
+    label: "Appointment Scheduled",
+    type: "Appointment",
+    modifier: 1,
+    showModifierPanel: false,
+    extras: [],
+    attributes: [],
+  },
+];

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

@@ -0,0 +1,31 @@
+import React from "react";
+
+const Illustration: React.FC = () => {
+  return (
+    <svg
+      width="100"
+      height="72"
+      viewBox="0 0 250 250"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g>
+        <g>
+          <g>
+            <path
+              fill="#7BBCB9"
+              data-title="Layer 0"
+              d="M24.1,116.2v106.2h89.7h89.7V116.2V10h-89.7H24.1V116.2L24.1,116.2z M137.1,44.7c3.7,1.9,5.7,3.8,7.6,7.3c1.7,2.9,1.8,3.6,1.8,8.9v5.7l5.8,3.5l5.8,3.5l2.7-1.6c2.4-1.3,3.5-1.5,7.8-1.5c5.7,0,8.4,1.1,12.1,4.7c3.7,3.7,4.7,6.4,4.7,12.1s-1.1,8.4-4.7,12.1c-3.7,3.7-6.4,4.7-12.1,4.7c-4.5,0-5.4-0.2-8.1-1.8c-3.5-1.9-5.4-3.9-7.4-7.6c-1.1-2-1.3-3.4-1.3-8.1l0.1-5.6l-5.8-3.6l-5.9-3.5l-2.6,1.5c-1.7,0.9-4,1.5-6.3,1.8l-3.7,0.3l-7.5,12.4l-7.5,12.4l1.7,2.1c3.3,4.2,3.9,5.9,3.9,11.3c0,5.7-1.1,8.4-4.7,12.1c-3.7,3.7-6.4,4.7-12.1,4.7c-5.7,0-8.4-1.1-12.1-4.7c-3.7-3.8-4.7-6.4-4.7-12.5v-5.3l-5.8-4l-5.8-4l-2.4,1.1c-3.7,1.7-11.1,1.5-14.4-0.2c-3.2-1.7-6.3-4.8-8-8c-1.1-2-1.4-3.4-1.4-7.5c0-4.5,0.2-5.4,1.8-8.1c1.9-3.5,3.9-5.4,7.6-7.4c1.9-1,3.4-1.3,7.4-1.3c5.7,0,8.4,1.1,12.1,4.7c3.4,3.5,4.7,6.4,4.7,11.5c0,2.4-0.2,5.2-0.5,6.3c-0.5,1.8-0.4,1.9,4.9,5.5l5.4,3.7l2.9-1.6c1.9-1,4.3-1.7,6.8-1.9l3.9-0.4l7.3-12.1c4.7-7.7,7.2-12.3,6.8-12.8c-0.2-0.4-1.2-1.8-2.1-3.1c-6.8-9.5-2.8-22.2,8.3-26.4C127.4,42.7,134,43.1,137.1,44.7z M161,156.3v4.7h-47.2H66.6v-4.7v-4.7h47.2H161V156.3z M161,184.6v4.7h-47.2H66.6v-4.7v-4.7h47.2H161V184.6z"
+            />
+            <path
+              fill="#7BBCB9"
+              data-title="Layer 1"
+              d="M208.2,38.3V43h7.1h7.1v96.8v96.8h-80.2H61.8v-4.7v-4.7h-4.7h-4.7v9.4v9.4h89.4h89.4v-38.5c0-21.1,0.2-68.9,0.4-106.2l0.4-67.7h-11.9h-11.9V38.3z"
+            />
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+};
+
+export default Illustration;