@churchapps/apphelper 0.0.1

package/src/components/material/iconPicker/IconPicker.tsx

@@ -0,0 +1,153 @@
+import * as React from "react";
+import { styled, Icon, InputBase, Typography, debounce, Grid, IconButton, Pagination, Stack } from "@mui/material";
+import MuiPaper from "@mui/material/Paper";
+import IconNamesList from "./IconNamesList"
+
+const UPDATE_SEARCH_INDEX_WAIT_MS = 220;
+
+const FlexSearch = require("flexsearch");
+const StyledIconSpan = styled("span")(({ theme }) => ({
+  display: "inline-flex",
+  flexDirection: "column",
+  color: theme.palette.text.secondary,
+  margin: "0 4px",
+  "& > div": {
+    display: "flex"
+  },
+  "& > div > *": {
+    flexGrow: 1,
+    fontSize: ".6rem",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    textAlign: "center",
+    width: 0
+  }
+}));
+
+const StyledIcon: any = styled(Icon)(({ theme }) => ({
+  boxSizing: "content-box",
+  cursor: "pointer",
+  color: theme.palette.text.primary,
+  borderRadius: theme.shape.borderRadius,
+  transition: theme.transitions.create(["background-color", "box-shadow"], {
+    duration: theme.transitions.duration.shortest
+  }),
+  padding: theme.spacing(1),
+  margin: theme.spacing(0.5, 0),
+  "&:hover": {
+    backgroundColor: theme.palette.background.paper,
+    boxShadow: theme.shadows[1]
+  }
+}));
+
+const Icons = React.memo(function Icons(props: { icons: string[]; handleOpenClick: (name: string) => void; }) {
+  const { icons, handleOpenClick } = props;
+
+  const handleIconClick = (name: string) => {
+    const camel = name.substring(0, 1).toLocaleLowerCase() + name.substring(1, name.length);
+    const underscored = camel.replace(/[A-Z]/g, m => "_" + m.toLowerCase());
+    handleOpenClick(underscored)
+  }
+
+  return (
+    <div>
+      {icons.map((icon) => (
+        <StyledIconSpan key={icon}>
+          <StyledIcon tabIndex={-1} sx={{ fontSize: "34px !important" }} onClick={() => { handleIconClick(icon) }}>
+            {icon}
+          </StyledIcon>
+        </StyledIconSpan>
+      ))}
+    </div>
+  );
+});
+
+const Paper = styled(MuiPaper)(({ theme }) => ({ padding: "2px 4px", display: "flex", alignItems: "center", marginBottom: theme.spacing(2), width: "100%" }));
+
+const Input = styled(InputBase)({ marginLeft: 8, flex: 1 });
+
+const searchIndex = new FlexSearch.Index({ tokenize: "full" });
+
+function createSearchIndex() {
+  // create component names from icons list
+  const iconsAndComponentNames = IconNamesList.map(icon => {
+    const split = icon.split("_");
+    const capitalizedSplit = split.map(s => {
+      if (isAlphabet(s[0])) {
+        s = s[0].toUpperCase() + s.slice(1)
+      }
+      return s
+    })
+    return {
+      iconName: icon,
+      componentName: capitalizedSplit.join("")
+    };
+  })
+
+  // create search index
+  iconsAndComponentNames.forEach(icon => {
+    let searchTerm = icon.iconName + " " + icon.componentName;
+
+    searchIndex.addAsync(icon.iconName, searchTerm)
+  })
+
+}
+
+function isAlphabet(character: string) {
+  return /[a-zA-Z]/.test(character);
+}
+
+createSearchIndex();
+
+type Props = {
+  onSelect: (iconName: string) => void;
+};
+
+const defaultIcons = ["person", "group", "groups", "contact_mail", "mail", "church", "favorite", "volunteer_activism", "link", "home", "apps", "web", "public", "rss_feed", "videocam", "live_tv", "music_note", "menu_book", "star", "accessible", "woman", "man", "child_care", "handshake", "location_on", "restaurant", "local_cafe" ];
+
+export default function SearchIcons(props: Props) {
+  const pageSize = 27;
+  const [keys, setKeys] = React.useState<any[] | null>(null);
+  const [query, setQuery] = React.useState("");
+  const [page, setPage] = React.useState(1);
+
+  const updateSearchResults = React.useMemo(
+    () =>
+      debounce((value) => {
+        if (value === "") setKeys(defaultIcons);
+        else searchIndex.searchAsync(value, { limit: 3000 }).then((results: any) => { setKeys(results); setPage(1); });
+      }, UPDATE_SEARCH_INDEX_WAIT_MS),
+    []
+  );
+
+  React.useEffect(() => { updateSearchResults(query); return () => { updateSearchResults.clear(); }; }, [query, updateSearchResults]);
+
+  function paged<T>(array: Array<T>, p: number) {
+    return array.slice((p - 1) * pageSize, p * pageSize);
+  }
+
+  const icons = keys || IconNamesList;
+
+  const pagesCount = Math.ceil(icons.length / pageSize);
+
+  return (
+    <Grid container sx={{ minHeight: 360, padding: "16px" }}>
+      <Grid item>
+        <Paper>
+          <IconButton sx={{ padding: "10px" }} aria-label="search">
+            <Icon>search</Icon>
+          </IconButton>
+          <Input autoFocus value={query} onChange={(event) => setQuery(event.target.value)} placeholder="Search icons…" inputProps={{ "aria-label": "search icons" }} />
+        </Paper>
+        {(query === "") && <Typography sx={{ mb: 1 }}>{`${IconNamesList.length} icons available`}</Typography>}
+        {(query !== "") && <Typography sx={{ mb: 1 }}>{`${icons.length} matching results`}</Typography>}
+
+        <Icons icons={paged(icons, page)} handleOpenClick={props.onSelect} />
+      </Grid>
+
+      <Stack spacing={2} sx={{ margin: "0 auto" }}>
+        <Pagination count={pagesCount} page={page} onChange={(_, p) => setPage(p)} size="small" />
+      </Stack>
+    </Grid>
+  );
+}

package/src/components/material/index.tsx

@@ -0,0 +1,5 @@
+export { NavItem } from "./NavItem";
+export { AppList } from "./AppList";
+export { SiteWrapper } from "./SiteWrapper";
+export { ChurchList } from "./ChurchList";
+export { UserMenu } from "./UserMenu";

package/src/components/notes/AddNote.tsx

@@ -0,0 +1,90 @@
+import React, { useState, useEffect } from "react"
+import { ApiHelper, PersonHelper } from "../../helpers"
+import { MessageInterface, UserContextInterface } from "../../interfaces"
+import { Icon, Stack, TextField } from "@mui/material"
+import { ErrorMessages } from "../ErrorMessages"
+import { SmallButton } from "../SmallButton"
+
+type Props = {
+  messageId?: string;
+  onUpdate: () => void;
+  createConversation: () => Promise<string>;
+  conversationId?: string;
+  context: UserContextInterface
+};
+
+export function AddNote({ context, ...props }: Props) {
+  const [message, setMessage] = useState<MessageInterface>()
+  const [errors, setErrors] = React.useState<string[]>([]);
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+  const headerText = props.messageId ? "Edit note" : "Add a note"
+
+  useEffect(() => {
+    if (props.messageId) ApiHelper.get(`/messages/${props.messageId}`, "MessagingApi").then(n => setMessage(n));
+    else setMessage({ conversationId: props.conversationId, content: "" });
+    return () => {
+      setMessage(null);
+    };
+  }, [props.messageId, props.conversationId])
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
+    setErrors([]);
+    const m = { ...message } as MessageInterface;
+    m.content = e.target.value;
+    setMessage(m);
+  }
+
+  const validate = () => {
+    const result = [];
+    if (!message.content.trim()) result.push("Please enter a note.");
+    setErrors(result);
+    return result.length === 0;
+  }
+
+  async function handleSave() {
+    if (validate()) {
+      setIsSubmitting(true);
+      let cId = props.conversationId;
+      if (!cId) cId = await props.createConversation();
+
+      const m = { ...message };
+      m.conversationId = cId;
+      ApiHelper.post("/messages", [m], "MessagingApi")
+        .then(() => {
+          props.onUpdate();
+          const m = { ...message } as MessageInterface;
+          m.content = "";
+          setMessage(m);
+        })
+        .finally(() => { setIsSubmitting(false); });
+    }
+  };
+
+  async function deleteNote() {
+    await ApiHelper.delete(`/messages/${props.messageId}`, "MessagingApi")
+    props.onUpdate()
+  }
+
+  const deleteFunction = props.messageId ? deleteNote : null;
+
+  const image = PersonHelper.getPhotoUrl(context?.person)
+
+  return (
+    <>
+      <ErrorMessages errors={errors} />
+
+      <Stack direction="row" spacing={1.5} style={{ marginTop: 15 }} justifyContent="end">
+
+        {image ? <img src={image} alt="user" style={{ width: 60, height: 45, borderRadius: 5, marginLeft: 8 }} /> : <Icon>person</Icon>}
+        <Stack direction="column" spacing={2} style={{ width: "100%" }} justifyContent="end">
+          <div><b>{context?.person?.name?.display}</b></div>
+          <TextField fullWidth name="noteText" aria-label={headerText} placeholder="Add a note" multiline style={{ marginTop: 0, border: "none" }} variant="standard" onChange={handleChange} value={message?.content} />
+        </Stack>
+        <Stack direction="column" spacing={1} justifyContent="end">
+          <SmallButton icon="send" onClick={handleSave} />
+          {deleteFunction && <SmallButton icon="delete" onClick={deleteFunction} disabled={isSubmitting} />}
+        </Stack>
+      </Stack>
+    </>
+  );
+}

package/src/components/notes/Conversation.tsx

@@ -0,0 +1,82 @@
+import { Box, Paper, Stack } from "@mui/material";
+import React from "react";
+import { ApiHelper, ArrayHelper, DateHelper, PersonHelper } from "../../helpers";
+import { ConversationInterface, MessageInterface, UserContextInterface } from "../../interfaces";
+import { AddNote } from "./AddNote";
+import { Note } from "./Note";
+
+interface Props {
+  conversation: ConversationInterface;
+  context: UserContextInterface;
+  showCommentCount?: boolean;
+  noWrapper?: boolean;
+}
+
+export function Conversation(props: Props) {
+  const [conversation, setConversation] = React.useState<ConversationInterface>(null)
+  const [editMessageId, setEditMessageId] = React.useState(null)
+
+  const loadNotes = async () => {
+    const messages: MessageInterface[] = (conversation.id) ? await ApiHelper.get("/messages/conversation/" + conversation.id, "MessagingApi") : [];
+    if (messages.length > 0) {
+      const peopleIds = ArrayHelper.getIds(messages, "personId");
+      const people = await ApiHelper.get("/people/ids?ids=" + peopleIds.join(","), "MembershipApi");
+      messages.forEach(n => {
+        n.person = ArrayHelper.getOne(people, "id", n.personId);
+      })
+    }
+    const c = { ...conversation }
+    c.messages = messages;
+    setConversation(c);
+    setEditMessageId(null);
+  };
+
+  React.useEffect(() => { setConversation(props.conversation) }, [props.conversation]); //eslint-disable-line
+
+  if (conversation === null) return null;
+  else {
+    const message = conversation.messages[0];
+    const photoUrl = PersonHelper.getPhotoUrl(message.person);
+    let datePosted = new Date(message.timeUpdated || message.timeSent);
+    const displayDuration = DateHelper.getDisplayDuration(datePosted);
+
+    const isEdited = message.timeUpdated && message.timeUpdated !== message.timeSent && <>(edited)</>;
+    const contents = message.content?.split("\n");
+
+    const getNotes = () => {
+      let noteArray: React.ReactNode[] = [];
+      for (let i = 1; i < conversation.messages.length; i++) noteArray.push(<Note message={conversation.messages[i]} key={conversation.messages[i].id} showEditNote={setEditMessageId} />);
+      return noteArray;
+    }
+
+    let result = (<>
+      <div className="conversation">
+        <div className="postedBy">
+          <img src={photoUrl} alt="avatar" />
+        </div>
+        <Box sx={{ width: "100%" }} className="conversationContents">
+          <Stack direction="row" justifyContent="space-between">
+            <div>
+              <b>{message.person?.name?.display}</b> · <span className="text-grey">{displayDuration}{isEdited}</span>
+              {contents.map((c, i) => c ? <p key={i}>{c}</p> : <br />)}
+            </div>
+          </Stack>
+        </Box>
+      </div>
+      {props.showCommentCount && (
+        <div className="commentCount">
+          <div>{(conversation.postCount === 1) ? "1 comment" : conversation.postCount + " comments"}</div>
+          {(conversation.postCount > conversation.messages.length) ? <a href="about:blank" onClick={(e) => { e.preventDefault(); loadNotes(); }}>View all {conversation.postCount} comments</a> : <>&nbsp;</>}
+        </div>
+      )}
+      <div className="messages">
+        {getNotes()}
+        <AddNote context={props.context} conversationId={props.conversation.id} onUpdate={loadNotes} createConversation={async () => (props.conversation.id)} messageId={editMessageId} />
+      </div>
+    </>);
+
+
+    if (props.noWrapper) return result;
+    else return (<Paper sx={{ padding: 1, marginBottom: 2 }}>{result}</Paper>);
+  }
+};

package/src/components/notes/Conversations.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { Loading } from "../";
+import { ApiHelper, ArrayHelper } from "../../helpers";
+import { ConversationInterface, UserContextInterface } from "../../interfaces";
+import { Conversation } from "./Conversation";
+import { NewConversation } from "./NewConversation";
+
+interface Props {
+  contentType: string;
+  contentId: string;
+  groupId: string;
+  context: UserContextInterface;
+}
+
+export function Conversations(props: Props) {
+
+  const [conversations, setConversations] = React.useState<ConversationInterface[]>(null)
+  //const [editMessageId, setEditMessageId] = React.useState(null)
+
+  const loadConversations = async () => {
+    const conversations: ConversationInterface[] = (props.contentId) ? await ApiHelper.get("/conversations/" + props.contentType + "/" + props.contentId, "MessagingApi") : [];
+    if (conversations.length > 0) {
+      const peopleIds: string[] = [];
+      conversations.forEach(c => {
+        c.messages.forEach(m => {
+          if (peopleIds.indexOf(m.personId) === -1) peopleIds.push(m.personId);
+        });
+      })
+      const people = await ApiHelper.get("/people/ids?ids=" + peopleIds.join(","), "MembershipApi");
+      conversations.forEach(c => {
+        c.messages.forEach(m => {
+          m.person = ArrayHelper.getOne(people, "id", m.personId);
+        });
+      })
+    }
+    setConversations(conversations);
+    //setEditMessageId(null);
+  };
+
+  const getConversations = () => {
+    if (conversations.length === 0) return <></>
+    else {
+      let noteArray: React.ReactNode[] = [];
+      for (let i = 0; i < conversations.length; i++) noteArray.push(<Conversation context={props.context} conversation={conversations[i]} key={conversations[i].id} />);
+      return noteArray;
+    }
+  }
+
+  React.useEffect(() => { loadConversations() }, [props.contentId]); //eslint-disable-line
+
+  if (!conversations) return <Loading />
+  else return (
+    <>
+      <NewConversation context={props.context} contentType={props.contentType} contentId={props.contentId} onUpdate={loadConversations} groupId={props.groupId} visibility="public" />
+      {getConversations()}
+    </>
+  );
+};

package/src/components/notes/NewConversation.tsx

@@ -0,0 +1,78 @@
+import { Icon, Paper, Stack, TextField } from "@mui/material";
+import React from "react";
+import { ApiHelper, PersonHelper } from "../../helpers";
+import { ConversationInterface, MessageInterface, UserContextInterface } from "../../interfaces";
+import { ErrorMessages } from "../ErrorMessages";
+import { SmallButton } from "../SmallButton";
+
+interface Props {
+  contentType: string;
+  contentId: string;
+  groupId: string;
+  visibility: "public" | "hidden";
+  context: UserContextInterface;
+  onUpdate: () => void;
+}
+
+export function NewConversation({ context, ...props }: Props) {
+  const [message, setMessage] = React.useState<MessageInterface>({})
+  const [errors, setErrors] = React.useState<string[]>([]);
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
+    setErrors([]);
+    const m = { ...message } as MessageInterface;
+    m.content = e.target.value;
+    setMessage(m);
+  }
+
+  const validate = () => {
+    const result = [];
+    if (!message.content.trim()) result.push("Please enter a note.");
+    setErrors(result);
+    return result.length === 0;
+  }
+
+  async function handleSave() {
+    if (validate()) {
+      setIsSubmitting(true);
+
+      const conv: ConversationInterface = { contentType: props.contentType, contentId: props.contentId, title: props.contentType + " " + props.contentId + " Conversation", groupId: props.groupId, visibility: props.visibility, allowAnonymousPosts: false }
+      const result = await ApiHelper.post("/conversations", [conv], "MessagingApi");
+      const cId = result[0].id;
+
+      const m = { ...message };
+      m.conversationId = cId;
+      ApiHelper.post("/messages", [m], "MessagingApi")
+        .then(() => {
+          props.onUpdate();
+          const m = { ...message } as MessageInterface;
+          m.content = "";
+          setMessage(m);
+        })
+        .finally(() => { setIsSubmitting(false); });
+
+    }
+  };
+
+  const image = PersonHelper.getPhotoUrl(context?.person)
+
+  return (
+    <Paper sx={{ padding: 1, marginBottom: 2 }}>
+      <ErrorMessages errors={errors} />
+
+      <Stack direction="row" spacing={1.5} style={{ marginTop: 15 }} justifyContent="end">
+
+        {image ? <img src={image} alt="user" style={{ width: 60, height: 45, borderRadius: 5, marginLeft: 8 }} /> : <Icon>person</Icon>}
+        <Stack direction="column" spacing={2} style={{ width: "100%" }} justifyContent="end">
+          <div><b>{context?.person?.name?.display}</b></div>
+          <TextField fullWidth name="noteText" aria-label={"Start a conversation"} placeholder="Start a conversation" multiline style={{ marginTop: 0, border: "none" }} variant="standard" onChange={handleChange} value={message.content} />
+        </Stack>
+        <Stack direction="column" spacing={1} justifyContent="end">
+          <SmallButton icon="send" onClick={handleSave} disabled={isSubmitting} />
+        </Stack>
+      </Stack>
+    </Paper>
+  );
+
+};

package/src/components/notes/Note.tsx

@@ -0,0 +1,44 @@
+import { Icon, IconButton, Stack, Box } from "@mui/material";
+import React, { useState, useEffect } from "react";
+import { DateHelper, PersonHelper } from "../../helpers"
+import { MessageInterface } from "../../interfaces"
+
+interface Props {
+  message: MessageInterface;
+  showEditNote: (noteId?: string) => void
+}
+
+export const Note: React.FC<Props> = (props) => {
+  const [message, setMessage] = useState<MessageInterface>(null);
+
+  useEffect(() => setMessage(props.message), [props.message]);
+
+  if (message === null) return null;
+  const photoUrl = PersonHelper.getPhotoUrl(message.person);
+  let datePosted = new Date(message.timeUpdated || message.timeSent);
+  const displayDuration = DateHelper.getDisplayDuration(datePosted);
+
+  const isEdited = message.timeUpdated && message.timeUpdated !== message.timeSent && <>(edited)</>;
+  const contents = message.content?.split("\n");
+  return (
+    <div className="note">
+      <div className="postedBy">
+        <img src={photoUrl} alt="avatar" />
+      </div>
+      <Box sx={{ width: "100%" }} className="note-contents">
+        <Stack direction="row" justifyContent="space-between">
+          <div>
+            <b>{message.person?.name?.display}</b> · <span className="text-grey">{displayDuration}{isEdited}</span>
+            {contents.map((c, i) => c ? <p key={i}>{c}</p> : <br />)}
+          </div>
+          <div>
+            <IconButton aria-label="editNote" onClick={() => props.showEditNote(message.id)}>
+              <Icon style={{ color: "#03a9f4" }}>edit</Icon>
+            </IconButton>
+          </div>
+        </Stack>
+
+      </Box>
+    </div>
+  );
+};

package/src/components/notes/Notes.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { Note } from "./Note";
+import { AddNote } from "./AddNote";
+import { DisplayBox, Loading } from "../";
+import { ApiHelper, ArrayHelper } from "../../helpers";
+import { MessageInterface, UserContextInterface } from "../../interfaces";
+
+interface Props {
+  //showEditNote: (messageId?: string) => void;
+  conversationId: string;
+  createConversation?: () => Promise<string>;
+  noDisplayBox?: boolean;
+  context: UserContextInterface;
+}
+
+export function Notes(props: Props) {
+
+  const [messages, setMessages] = React.useState<MessageInterface[]>(null)
+  const [editMessageId, setEditMessageId] = React.useState(null)
+
+  const loadNotes = async () => {
+    const messages: MessageInterface[] = (props.conversationId) ? await ApiHelper.get("/messages/conversation/" + props.conversationId, "MessagingApi") : [];
+    if (messages.length > 0) {
+      const peopleIds = ArrayHelper.getIds(messages, "personId");
+      const people = await ApiHelper.get("/people/ids?ids=" + peopleIds.join(","), "MembershipApi");
+      messages.forEach(n => {
+        n.person = ArrayHelper.getOne(people, "id", n.personId);
+      })
+    }
+    setMessages(messages);
+    setEditMessageId(null);
+  };
+
+  const getNotes = () => {
+    if (!messages) return <Loading />
+    if (messages.length === 0) return <></>
+    else {
+      let noteArray: React.ReactNode[] = [];
+      for (let i = 0; i < messages.length; i++) noteArray.push(<Note message={messages[i]} key={messages[i].id} showEditNote={setEditMessageId} />);
+      return noteArray;
+    }
+  }
+
+  React.useEffect(() => { loadNotes() }, [props.conversationId]); //eslint-disable-line
+
+  let result = <>
+    {getNotes()}
+    {messages && (<AddNote context={props.context} conversationId={props.conversationId} onUpdate={loadNotes} createConversation={props.createConversation} messageId={editMessageId} />)}
+  </>
+  if (props.noDisplayBox) return result;
+  else return (<DisplayBox id="notesBox" data-cy="notes-box" headerIcon="sticky_note_2" headerText="Notes">{result}</DisplayBox>);
+};

package/src/components/reporting/ChartReport.tsx

@@ -0,0 +1,98 @@
+import React from "react";
+import { Chart } from "react-google-charts";
+import { ColumnInterface, ReportOutputInterface, ReportResultInterface } from "../../interfaces";
+import { DateHelper } from "../../helpers";
+
+interface Props { reportResult: ReportResultInterface, output: ReportOutputInterface }
+
+export const ChartReport = (props: Props) => {
+  let rows: any = [];
+
+  const getChartData = () => {
+    if (props.output.columns.length === 2) return getSingleData();
+    else return getMultiData();
+  }
+
+  const getHeaders = () => {
+    const result: string[] = [];
+    const uniqueValues: string[] = [];
+
+    props.reportResult.table.forEach(d => {
+      const val = getField(props.output.columns[1], d);
+      if (uniqueValues.indexOf(val) === -1) uniqueValues.push(val);
+    });
+
+    result.push(props.output.columns[0].header);
+    uniqueValues.forEach(v => result.push(v));
+
+    return result;
+  }
+
+  const getHeaderIndex = (headers: string[], header: string) => {
+    let result = -1;
+    let i = 0;
+    headers.forEach(h => {
+      if (h === header) result = i;
+      i++;
+    })
+    return result;
+  }
+
+  const transformData = (headers: string[]) => {
+    const result: any[] = [];
+    props.reportResult.table.forEach(d => {
+      const firstVal = getField(props.output.columns[0], d);
+      const secondVal = getField(props.output.columns[1], d);
+      const headerIndex = getHeaderIndex(headers, secondVal);
+
+      let row: any[] = []
+      if (result.length === 0 || firstVal !== result[result.length - 1][0]) {
+        row[0] = firstVal;
+        for (let i = 1; i < headers.length; i++) row[i] = 0;
+        result.push(row);
+      } else row = result[result.length - 1];
+
+      row[headerIndex] = parseFloat(d[props.output.columns[2].value]);
+    });
+
+    return result;
+  }
+
+  const getMultiData = () => {
+    const headers = getHeaders();
+    rows = [];
+    rows.push(headers);
+    transformData(headers).forEach(d => {
+      rows.push(d);
+    })
+
+    return rows;
+  }
+
+  const getSingleData = () => {
+    rows = [];
+    rows.push([props.output.columns[0].header, props.output.columns[1].header]);
+    props.reportResult.table.forEach(d => {
+      rows.push([getField(props.output.columns[0], d), parseFloat(getField(props.output.columns[1], d))])
+    });
+    return rows;
+  }
+
+  const getField = (column: ColumnInterface, dataRow: any) => {
+    let result = dataRow[column.value].toString() || "";
+
+    switch (column.formatter) {
+      case "date":
+        let dt = new Date(result);
+        result = DateHelper.prettyDate(dt);
+        break;
+    }
+    return result;
+  }
+
+  let result = <p>There is no data to display</p>
+  if (props.reportResult.table?.length > 0) result = (<Chart chartType="ColumnChart" data={getChartData()} width="100%" height="400px" options={{ height: 400, legend: { position: "top", maxLines: 3 }, bar: { groupWidth: "75%" }, isStacked: true }} />);
+
+  return result;
+
+}