Download CSV from useEvaStateHistory hook

download_csv.tsx

import { useMemo } from "react";
import {
  get_engine,
  useEvaStateHistory,
  generateStateHistoryCSV,
  StateHistoryOIDColMapping
} from "@eva-ics/webengine-react";
import { Eva, StateProp } from "@eva-ics/webengine";
import { Timestamp } from "bmat/time";
import { downloadCSV } from "bmat/dom";

const App = () => {
  const args = useMemo(() => {
    return {
      database: "ts1"
    };
  }, []);

  const oids = useMemo(() => {
    return ["sensor:tests/temp"];
  }, []);

  const records = useEvaStateHistory({
    oid: oids,
    timeframe: "1H",
    fill: "1T",
    args: args,
    prop: StateProp.Any
  });

  return (
    <>
      Build: {(get_engine() as Eva)?.server_info?.build}{" "}
      <button
        onClick={() => {
          /** BEGIN DOWNLOAD CSV EXAMPLE **/
          const mapping: StateHistoryOIDColMapping[] = [
            {
              oid: "sensor:tests/temp",
              name: "temp.status",
              prop: StateProp.Status
            },
            {
              oid: "sensor:tests/temp",
              name: "temp.value"
            }
          ];
          // just for example, if RFC3339 is fine, time formatter is not required
          const timeFormatter = (n: number): string => {
            return new Timestamp(n).toRFC3339();
          };
          const csvContent = generateStateHistoryCSV({
            data: records.data,
            mapping,
            timeFormatter
          });
          if (csvContent) {
            downloadCSV(csvContent, "data.csv");
          }
          /** END DOWNLOAD CSV EXAMPLE **/
        }}
      >
        CSV
      </button>{" "}
    </>
  );
};