@oneuptime/common 7.0.2990 → 7.0.3010

package/UI/Components/Charts/ChartLibrary/Types/ChartDataPoint.ts

@@ -0,0 +1,3 @@
+export default interface ChartDataPoint {
+  [x: string]: number | string;
+}

package/UI/Components/Charts/ChartLibrary/Utils/ChartColors.ts

@@ -0,0 +1,117 @@
+// Tremor Raw chartColors [v0.1.0]
+
+export type ColorUtility = "bg" | "stroke" | "fill" | "text";
+
+export const chartColors: {
+  [color: string]: {
+    [key in ColorUtility]: string;
+  };
+} = {
+  blue: {
+    bg: "bg-blue-500",
+    stroke: "stroke-blue-500",
+    fill: "fill-blue-500",
+    text: "text-blue-500",
+  },
+  emerald: {
+    bg: "bg-emerald-500",
+    stroke: "stroke-emerald-500",
+    fill: "fill-emerald-500",
+    text: "text-emerald-500",
+  },
+  violet: {
+    bg: "bg-violet-500",
+    stroke: "stroke-violet-500",
+    fill: "fill-violet-500",
+    text: "text-violet-500",
+  },
+  amber: {
+    bg: "bg-amber-500",
+    stroke: "stroke-amber-500",
+    fill: "fill-amber-500",
+    text: "text-amber-500",
+  },
+  gray: {
+    bg: "bg-gray-500",
+    stroke: "stroke-gray-500",
+    fill: "fill-gray-500",
+    text: "text-gray-500",
+  },
+  cyan: {
+    bg: "bg-cyan-500",
+    stroke: "stroke-cyan-500",
+    fill: "fill-cyan-500",
+    text: "text-cyan-500",
+  },
+  pink: {
+    bg: "bg-pink-500",
+    stroke: "stroke-pink-500",
+    fill: "fill-pink-500",
+    text: "text-pink-500",
+  },
+  lime: {
+    bg: "bg-lime-500",
+    stroke: "stroke-lime-500",
+    fill: "fill-lime-500",
+    text: "text-lime-500",
+  },
+  fuchsia: {
+    bg: "bg-fuchsia-500",
+    stroke: "stroke-fuchsia-500",
+    fill: "fill-fuchsia-500",
+    text: "text-fuchsia-500",
+  },
+  indigo: {
+    bg: "bg-indigo-500",
+    stroke: "stroke-indigo-500",
+    fill: "fill-indigo-500",
+    text: "text-indigo-500",
+  },
+  rose: {
+    bg: "bg-rose-500",
+    stroke: "stroke-rose-500",
+    fill: "fill-rose-500",
+    text: "text-rose-500",
+  },
+};
+
+export type AvailableChartColorsKeys = keyof typeof chartColors;
+
+export const AvailableChartColors: AvailableChartColorsKeys[] = Object.keys(
+  chartColors,
+) as Array<AvailableChartColorsKeys>;
+
+export const constructCategoryColors: (
+  categories: string[],
+  colors: AvailableChartColorsKeys[],
+) => Map<string, AvailableChartColorsKeys> = (
+  categories: string[],
+  colors: AvailableChartColorsKeys[],
+): Map<string, AvailableChartColorsKeys> => {
+  const categoryColors: Map<string, AvailableChartColorsKeys> = new Map<
+    string,
+    AvailableChartColorsKeys
+  >();
+  categories.forEach((category: string, index: number) => {
+    categoryColors.set(category, colors[index % colors.length]!);
+  });
+  return categoryColors;
+};
+
+export const getColorClassName: (
+  color: AvailableChartColorsKeys,
+  type: ColorUtility,
+) => string = (color: AvailableChartColorsKeys, type: ColorUtility): string => {
+  const fallbackColor: {
+    bg: string;
+    stroke: string;
+    fill: string;
+    text: string;
+  } = {
+    bg: "bg-gray-500",
+    stroke: "stroke-gray-500",
+    fill: "fill-gray-500",
+    text: "text-gray-500",
+  };
+  return chartColors[color]?.[type] ?? fallbackColor[type];
+};

package/UI/Components/Charts/ChartLibrary/Utils/Cx.ts

@@ -0,0 +1,8 @@
+// Tremor Raw cx [v0.0.0]
+
+import clsx, { type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cx(...args: ClassValue[]): string {
+  return twMerge(clsx(...args));
+}

package/UI/Components/Charts/ChartLibrary/Utils/GetYAxisDomain.ts

@@ -0,0 +1,15 @@
+// Tremor Raw getYAxisDomain [v0.0.0]
+
+export const getYAxisDomain: (
+  autoMinValue: boolean,
+  minValue: number | undefined,
+  maxValue: number | undefined,
+) => (number | "auto")[] = (
+  autoMinValue: boolean,
+  minValue: number | undefined,
+  maxValue: number | undefined,
+): (number | "auto")[] => {
+  const minDomain: number | "auto" = autoMinValue ? "auto" : minValue ?? 0;
+  const maxDomain: number | "auto" = maxValue ?? "auto";
+  return [minDomain, maxDomain];
+};

package/UI/Components/Charts/ChartLibrary/Utils/HasOnlyOneValueForKey.ts

@@ -0,0 +1,19 @@
+// Tremor Raw hasOnlyOneValueForKey [v0.1.0]
+
+export function hasOnlyOneValueForKey(
+  array: any[],
+  keyToCheck: string,
+): boolean {
+  const val: any[] = [];
+
+  for (const obj of array) {
+    if (Object.prototype.hasOwnProperty.call(obj, keyToCheck)) {
+      val.push(obj[keyToCheck]);
+      if (val.length > 1) {
+        return false;
+      }
+    }
+  }
+
+  return true;
+}

package/UI/Components/Charts/ChartLibrary/Utils/UseWindowOnResize.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+
+export const useOnWindowResize: (handler: () => void) => void = (
+  handler: () => void,
+): void => {
+  React.useEffect(() => {
+    const handleResize: () => void = () => {
+      handler();
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [handler]);
+};

package/UI/Components/Charts/Line/LineChart.tsx

@@ -1,240 +1,73 @@
-import { Box, CartesianMarkerProps } from "@nivo/core";
-import { LegendProps } from "@nivo/legends";
-import { Point, ResponsiveLine } from "@nivo/line";
-import { ChartColors } from "Common/Types/BrandColors";
-import Color from "Common/Types/Color";
-import OneUptimeDate from "Common/Types/Date";
-import React, { FunctionComponent, ReactElement } from "react";
+import { LineChart } from "../ChartLibrary/LineChart/LineChart";
+import React, { FunctionComponent, ReactElement, useEffect } from "react";
+import SeriesPoint from "../Types/SeriesPoints";
+import { XAxis } from "../Types/XAxis/XAxis";
+import YAxis from "../Types/YAxis/YAxis";
+import ChartCurve from "../Types/ChartCurve";
+import ChartDataPoint from "../ChartLibrary/Types/ChartDataPoint";
+import DataPointUtil from "../Utils/DataPoint";
 
-export type XValue = string | number | Date;
-export type YValue = number;
-
-export interface LineChartDataItem {
-  x: XValue;
-  y: YValue;
-}
-
-export enum ChartCurve {
-  LINEAR = "linear",
-  MONOTONE_X = "monotoneX",
-  STEP = "step",
-  STEP_BEFORE = "stepBefore",
-  STEP_AFTER = "stepAfter",
-}
-
-export enum XScaleType {
-  TIME = "time",
-}
-
-export enum XScalePrecision {
-  SECOND = "second",
-  MINUTE = "minute",
-  HOUR = "hour",
-  DAY = "day",
-  MONTH = "month",
-  YEAR = "year",
-}
-
-export type XScaleMaxMin = "auto" | number | Date;
-export type YScaleMaxMin = "auto" | number;
-
-export interface XScale {
-  type: XScaleType;
-  min: XScaleMaxMin;
-  max: XScaleMaxMin;
-  precision: XScalePrecision;
-}
-
-export interface LineChartData {
-  seriesName: string;
-  data: Array<LineChartDataItem>;
-}
-
-export enum YScaleType {
-  LINEAR = "linear",
-}
-
-export interface YScale {
-  type: YScaleType;
-  min: YScaleMaxMin;
-  max: YScaleMaxMin;
-}
-
-export enum AxisType {
-  Date = "date",
-  Time = "time",
-  Number = "number",
-}
-
-export interface AxisBottom {
-  legend: string;
-  type: AxisType;
-}
-
-export interface AxisLeft {
-  legend: string;
-  type: AxisType;
-}
-
-export interface LineChartPoint {
-  x: XValue;
-  y: YValue;
-  seriesName: string;
-  seriesColor: Color;
+export interface ComponentProps {
+  data: Array<SeriesPoint>;
+  xAxis: XAxis;
+  yAxis: YAxis;
+  curve: ChartCurve;
+  sync: boolean;
 }
 
-export interface ComponentProps {
-  data: Array<LineChartData>;
-  curve?: ChartCurve;
-  xScale: XScale;
-  yScale: YScale;
-  axisBottom: AxisBottom;
-  axisLeft: AxisLeft;
-  onHoverXAxis?: (x: XValue) => void;
-  xAxisMarker?: {
-    value: XValue | undefined;
-  };
-  getHoverTooltip?: (data: { points: Array<LineChartPoint> }) => ReactElement;
+export interface LineInternalProps extends ComponentProps {
+  syncId: string;
 }
 
-const LineChart: FunctionComponent<ComponentProps> = (
-  props: ComponentProps,
+const LineChartElement: FunctionComponent<LineInternalProps> = (
+  props: LineInternalProps,
 ): ReactElement => {
-  const markers: Array<CartesianMarkerProps> = [];
-
-  if (props.xAxisMarker && props.xAxisMarker.value) {
-    markers.push({
-      axis: "x",
-      legend: "",
-      lineStyle: {
-        stroke: "#cbd5e1",
-        strokeWidth: 2,
-      },
-      value: props.xAxisMarker.value,
-    });
-  }
+  const [records, setRecords] = React.useState<Array<ChartDataPoint>>([]);
 
-  let legends: Array<LegendProps> = [];
+  const categories: Array<string> = props.data.map((item: SeriesPoint) => {
+    return item.seriesName;
+  });
 
-  const showLegends: boolean = props.data.length > 1;
+  useEffect(() => {
+    if (!props.data || props.data.length === 0) {
+      setRecords([]);
+    }
 
-  const margin: Box = { bottom: 60, left: 60, top: 20 };
-
-  if (showLegends) {
-    margin.right = 200;
+    const records: Array<ChartDataPoint> = DataPointUtil.getChartDataPoints({
+      seriesPoints: props.data,
+      xAxis: props.xAxis,
+      yAxis: props.yAxis,
+    });
 
-    legends = [
-      {
-        anchor: "bottom-right",
-        direction: "column",
-        justify: false,
-        translateX: 100,
-        translateY: 0,
-        itemsSpacing: 0,
-        itemDirection: "left-to-right",
-        itemWidth: 80,
-        itemHeight: 20,
-        itemOpacity: 0.75,
-        symbolSize: 12,
-        symbolShape: "circle",
-        symbolBorderColor: "rgba(0, 0, 0, .5)",
-        effects: [
-          {
-            on: "hover",
-            style: {
-              itemBackground: "rgba(0, 0, 0, .03)",
-              itemOpacity: 1,
-            },
-          },
-        ],
-      },
-    ];
-  }
+    setRecords(records);
+  }, [props.data]);
 
   return (
-    <div className="h-96 w-full">
-      <ResponsiveLine
-        data={props.data.map((series: LineChartData) => {
-          return {
-            id: series.seriesName,
-            data: series.data,
-          };
-        })}
-        onMouseMove={(data: Point) => {
-          if (props.onHoverXAxis) {
-            const xValue: XValue = ((data as any).points as Array<any>)?.[0]
-              ?.data?.x;
-            props.onHoverXAxis(xValue);
-          }
-        }}
-        margin={margin}
-        curve={props.curve || ChartCurve.LINEAR}
-        markers={markers}
-        xScale={{
-          type: props.xScale.type,
-          max: props.xScale.max as any,
-          min: props.xScale.min as any,
-          precision: props.xScale.precision,
-        }}
-        yScale={{
-          type: props.yScale.type,
-          min: props.yScale.min,
-          max: props.yScale.max,
-        }}
-        axisTop={null}
-        axisRight={null}
-        axisBottom={{
-          legend: props.axisBottom.legend,
-          format: (value: XValue) => {
-            let strLabel: string = "";
-            if (props.axisBottom.type === AxisType.Date) {
-              strLabel = OneUptimeDate.getDateAsLocalFormattedString(
-                value as Date,
-                true,
-              );
-            } else if (props.axisBottom.type === AxisType.Time) {
-              strLabel = OneUptimeDate.getLocalHourAndMinuteFromDate(
-                value as Date,
-              );
-            } else {
-              strLabel = value.toString();
-            }
-
-            return strLabel;
-          },
-        }}
-        useMesh={true}
-        axisLeft={{
-          legend: props.axisLeft.legend,
-        }}
-        enableSlices="x"
-        sliceTooltip={(data: {
-          slice: {
-            points: readonly Point[];
-          };
-        }) => {
-          if (!props.getHoverTooltip) {
-            return <></>;
-          }
-
-          return props.getHoverTooltip({
-            points: data.slice.points.map((point: Point) => {
-              return {
-                x: point.data.x as XValue,
-                y: point.data.y as YValue,
-                seriesName: point.serieId.toString(),
-                seriesColor: new Color(point.color),
-              };
-            }),
-          });
-        }}
-        colors={ChartColors.map((item: Color) => {
-          return item.toString();
-        })}
-        legends={legends}
-      />
-    </div>
+    <LineChart
+      className="h-80"
+      data={records}
+      tickGap={1}
+      index={"Time"}
+      categories={categories}
+      colors={[
+        "indigo",
+        "rose",
+        "emerald",
+        "amber",
+        "cyan",
+        "gray",
+        "pink",
+        "lime",
+        "fuchsia",
+      ]}
+      valueFormatter={props.yAxis.options.formatter || undefined}
+      showTooltip={true}
+      connectNulls={true}
+      curve={props.curve}
+      syncId={props.sync ? props.syncId : undefined}
+      yAxisWidth={60}
+    />
   );
 };
 
-export default LineChart;
+export default LineChartElement;

package/UI/Components/Charts/Types/ChartCurve.ts

@@ -0,0 +1,7 @@
+enum ChartCurve {
+  LINEAR = "linear",
+  MONOTONE = "monotone",
+  STEP = "step",
+}
+
+export default ChartCurve;

package/UI/Components/Charts/Types/DataPoint.ts

@@ -0,0 +1,7 @@
+import XValue from "./XValue";
+import YValue from "./YValue";
+
+export default interface DataPoint {
+  x: XValue;
+  y: YValue;
+}

package/UI/Components/Charts/Types/SeriesPoint.ts

@@ -0,0 +1,7 @@
+import Color from "../../../../Types/Color";
+import DataPoint from "./DataPoint";
+
+export interface SeriesPoint extends DataPoint {
+  seriesName: string;
+  seriesColor: Color;
+}

package/UI/Components/Charts/Types/SeriesPoints.ts

@@ -0,0 +1,6 @@
+import DataPoint from "./DataPoint";
+
+export default interface SeriesPoints {
+  data: Array<DataPoint>;
+  seriesName: string;
+}

package/UI/Components/Charts/Types/XAxis/XAxis.ts

@@ -0,0 +1,21 @@
+import XAxisMaxMin from "./XAxisMaxMin";
+import XAxisType from "./XAxisType";
+
+export enum XAxisAggregateType {
+  Average = "Average",
+  Sum = "Sum",
+  Max = "Max",
+  Min = "Min",
+}
+
+export interface XAxisOptions {
+  type: XAxisType;
+  min: XAxisMaxMin;
+  max: XAxisMaxMin;
+  aggregateType: XAxisAggregateType;
+}
+
+export interface XAxis {
+  legend: string;
+  options: XAxisOptions;
+}

package/UI/Components/Charts/Types/XAxis/XAxisMaxMin.ts

@@ -0,0 +1,3 @@
+type XAxisMaxMin = number | Date;
+
+export default XAxisMaxMin;

package/UI/Components/Charts/Types/XAxis/XAxisPrecision.ts

@@ -0,0 +1,26 @@
+enum XAxisPrecision {
+  EVERY_SECOND = "second",
+  EVERY_FIVE_SECONDS = "fiveSeconds",
+  EVERY_TEN_SECONDS = "tenSeconds",
+  EVERY_THIRTY_SECONDS = "thirtySeconds",
+  EVERY_MINUTE = "minute",
+  EVERY_FIVE_MINUTES = "fiveMinutes",
+  EVERY_TEN_MINUTES = "tenMinutes",
+  EVERY_THIRTY_MINUTES = "thirtyMinutes",
+  EVERY_HOUR = "hour",
+  EVERY_TWO_HOURS = "twoHours",
+  EVERY_THREE_HOURS = "threeHours",
+  EVERY_SIX_HOURS = "sixHours",
+  EVERY_TWELVE_HOURS = "twelveHours",
+  EVERY_DAY = "day",
+  EVERY_TWO_DAYS = "twoDays",
+  EVERY_WEEK = "week",
+  EVERY_TWO_WEEKS = "twoWeeks",
+  EVERY_MONTH = "month",
+  EVERY_TWO_MONTHS = "twoMonths",
+  EVERY_THREE_MONTHS = "threeMonths",
+  EVERY_SIX_MONTHS = "sixMonths",
+  EVERY_YEAR = "year",
+}
+
+export default XAxisPrecision;

package/UI/Components/Charts/Types/XAxis/XAxisType.ts

@@ -0,0 +1,6 @@
+enum XAxisType {
+  Time = "time",
+  Date = "date",
+}
+
+export default XAxisType;

package/UI/Components/Charts/Types/XValue.ts

@@ -0,0 +1,3 @@
+type XValue = Date;
+
+export default XValue;

package/UI/Components/Charts/Types/YAxis/YAxis.ts

@@ -0,0 +1,22 @@
+import YAxisMaxMin from "./YAxisMaxMin";
+import YAxisType from "./YAxisType";
+
+export enum YAxisPrecision {
+  NoDecimals = "NoDecimals",
+  OneDecimal = "OneDecimal",
+  TwoDecimals = "TwoDecimals",
+  ThreeDecimals = "ThreeDecimals",
+}
+
+export interface YAxisOptions {
+  type: YAxisType;
+  min: YAxisMaxMin;
+  max: YAxisMaxMin;
+  formatter: (value: number) => string;
+  precision: YAxisPrecision;
+}
+
+export default interface YAxis {
+  legend: string;
+  options: YAxisOptions;
+}

package/UI/Components/Charts/Types/YAxis/YAxisMaxMin.ts

@@ -0,0 +1,3 @@
+type YScaleMaxMin = "auto" | number;
+
+export default YScaleMaxMin;

package/UI/Components/Charts/Types/YAxis/YAxisType.ts

@@ -0,0 +1,5 @@
+enum YAxisType {
+  Number = "number",
+}
+
+export default YAxisType;

package/UI/Components/Charts/Types/YValue.ts

@@ -0,0 +1,3 @@
+type YValue = number;
+
+export default YValue;