add stories and funcs

frontend/packages/core/src/Charts/helpers.tsx

-// TODO: add more formatting funcs
 export const localTimeFormatter = (timestamp: number) => {
   return new Date(timestamp).toLocaleTimeString();
 };
 
+export const isoTimeFormatter = (timestamp: number) => {
+  return new Date(timestamp).toISOString();
+};
+
+export const dateTimeFormatter = (timestamp: number) => {
+  return new Date(timestamp).toDateString();
+};
+
 const getMinAndMaxOfRangeUsingKey = (data: any, key: string) => {
   const filtered = data.filter(d => d[key]).map(d => d[key]);
   return { min: Math.min(...filtered), max: Math.max(...filtered) };

frontend/packages/core/src/stories/timeseries.stories.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import styled from "@emotion/styled";
 import type { Meta } from "@storybook/react";
 
+import { dateTimeFormatter, isoTimeFormatter } from "../Charts/helpers";
 import TimeseriesChart, { TimeseriesReferenceLineProps } from "../Charts/timeseries";
 
 export default {
@@ -67,6 +68,26 @@ export const SingleDataLine = () => {
         yDomainSpread={0.3}
         regularIntervalTicks
       />
+      <TimeseriesChart
+        data={mockDataSingleLine}
+        xAxisDataKey="timestamp"
+        yAxisDataKey="value"
+        lines={mockLines}
+        xDomainSpread={0.3}
+        yDomainSpread={0.3}
+        regularIntervalTicks
+        tickFormatterFunc={isoTimeFormatter}
+      />
+      <TimeseriesChart
+        data={mockDataSingleLine}
+        xAxisDataKey="timestamp"
+        yAxisDataKey="value"
+        lines={mockLines}
+        xDomainSpread={0.3}
+        yDomainSpread={0.3}
+        regularIntervalTicks
+        tickFormatterFunc={dateTimeFormatter}
+      />
     </ChartContainer>
   );
 };