@gisce/react-ooui 2.0.0-rc.8 → 2.0.0

package/src/widgets/views/Graph/Graph.tsx

@@ -1,145 +0,0 @@
-import React, {
-  useState,
-  useEffect,
-  useContext,
-  forwardRef,
-  useImperativeHandle,
-} from "react";
-import {
-  Graph as GraphOoui,
-  parseGraph,
-  GraphIndicator as GraphIndicatorOoui,
-  GraphIndicatorField,
-} from "@gisce/ooui";
-import { LoadingOutlined } from "@ant-design/icons";
-import ConnectionProvider from "@/ConnectionProvider";
-import { GraphIndicator } from "./GraphIndicator";
-import { GraphChart } from "./GraphChart";
-import { GraphView } from "@/types";
-import {
-  ActionViewContext,
-  ActionViewContextType,
-} from "@/context/ActionViewContext";
-
-export type GraphProps = {
-  view_id: number;
-  model: string;
-  domain: any;
-  context: any;
-  limit?: number;
-  manualIds?: number[];
-};
-
-const GraphComp = (props: GraphProps, ref: any) => {
-  const { view_id, model, context, domain, limit, manualIds } = props;
-  const [loading, setLoading] = useState(false);
-  const [graphOoui, setGraphOoui] = useState<GraphOoui>();
-  const [graphXml, setGraphXml] = useState<string>();
-  const actionViewContext = useContext(
-    ActionViewContext
-  ) as ActionViewContextType;
-  const { setGraphIsLoading = undefined } = actionViewContext || {};
-
-  useImperativeHandle(ref, () => ({
-    refresh: () => {
-      fetchData();
-    },
-  }));
-
-  useEffect(() => {
-    fetchData();
-  }, [view_id]);
-
-  async function fetchData() {
-    setLoading(true);
-    setGraphIsLoading?.(true);
-
-    try {
-      const viewData = (await ConnectionProvider.getHandler().getView({
-        model,
-        id: view_id,
-        type: "graph",
-        context,
-      })) as GraphView;
-
-      setGraphXml(viewData.arch);
-      const graph = parseGraph(viewData.arch);
-      setGraphOoui(graph);
-    } catch (err) {
-      console.error(err);
-      return <>{JSON.stringify(err)}</>;
-    }
-
-    setLoading(false);
-    setGraphIsLoading?.(false);
-  }
-
-  if (loading) {
-    return (
-      <div
-        style={{
-          width: "100%",
-          display: "flex",
-          height: "20%",
-          justifyContent: "center",
-          alignContent: "center",
-          padding: "1rem",
-        }}
-      >
-        <LoadingOutlined style={{ height: "12px" }} />
-      </div>
-    );
-  }
-
-  if (!graphOoui) {
-    return null;
-  }
-
-  switch (graphOoui.type) {
-    case "indicatorField":
-    case "indicator": {
-      const indicator = graphOoui as GraphIndicatorOoui;
-      const indicatorFieldopts =
-        indicator.type === "indicatorField"
-          ? {
-              field: (indicator as GraphIndicatorField).field,
-              operator: (indicator as GraphIndicatorField).operator,
-            }
-          : {};
-
-      return (
-        <GraphIndicator
-          showPercent={indicator.showPercent}
-          totalDomain={indicator.totalDomain!}
-          colorCondition={indicator.color}
-          model={model}
-          context={context}
-          domain={domain}
-          icon={indicator.icon!}
-          suffix={indicator.suffix!}
-          manualIds={manualIds}
-          {...indicatorFieldopts}
-        />
-      );
-    }
-    case "line":
-    case "bar":
-    case "pie": {
-      return (
-        <GraphChart
-          model={model}
-          context={context}
-          domain={domain}
-          xml={graphXml!}
-          limit={limit}
-          manualIds={manualIds}
-        />
-      );
-    }
-    default: {
-      return <>{`Graph ${graphOoui.type} not implemented`}</>;
-    }
-  }
-};
-
-export const Graph = forwardRef(GraphComp);

package/src/widgets/views/Graph/GraphChart.tsx

@@ -1,113 +0,0 @@
-import React, { useContext } from "react";
-import { Line, Column, Pie } from "@ant-design/plots";
-import GraphDefaults from "./GraphDefaults";
-import { useGraphData } from "./useGraphData";
-import { Alert, Spin } from "antd";
-import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
-
-const types = {
-  line: Line,
-  bar: Column,
-  pie: Pie,
-};
-
-export type GraphChartProps = {
-  model: string;
-  domain: any;
-  context: any;
-  xml: string;
-  limit?: number;
-  manualIds?: number[];
-};
-
-export const GraphChart = (props: GraphChartProps) => {
-  const { model, domain, context, xml, limit, manualIds } = props;
-  const { t } = useContext(LocaleContext) as LocaleContextType;
-
-  const { error, loading, values, type, evaluatedEntries } = useGraphData({
-    model,
-    xml,
-    limit,
-    domain,
-    context,
-    uninformedString: t("uninformed"),
-    manualIds,
-  });
-
-  if (error) {
-    return <Alert message={error} type="error" banner />;
-  }
-
-  if (loading) {
-    return <Spin />;
-  }
-
-  if (!values) {
-    return <Alert message="No data to display" type="info" />;
-  }
-
-  const { data, isGroup, isStack } = values;
-
-  const Chart = (types as any)[type!];
-
-  if (!Chart) {
-    return <>{`Unknown graph type: ${type}`}</>;
-  }
-
-  return (
-    <div style={{ padding: "1rem" }}>
-      <p style={{ textAlign: "right" }}>
-        {`${t("totalRegisters")} ${evaluatedEntries?.length?.toLocaleString(
-          "es-ES",
-          {
-            useGrouping: true,
-          }
-        )}`}
-      </p>
-      <Chart
-        {...getGraphProps({
-          type,
-          data,
-          isGroup,
-          isStack,
-        })}
-      />
-    </div>
-  );
-};
-
-type GetGraphPropsType = {
-  type: string;
-  isStack: boolean;
-  isGroup: boolean;
-  data: any[];
-};
-
-function getGraphProps(props: GetGraphPropsType) {
-  const { type, data, isGroup, isStack } = props;
-  let graphProps = (GraphDefaults as any)[type];
-
-  if (!graphProps) {
-    graphProps = (GraphDefaults as any)["default"];
-  }
-
-  graphProps.data = data;
-
-  if (type === "pie") {
-    graphProps.colorField = "x";
-    graphProps.angleField = "value";
-  } else {
-    graphProps.xField = "x";
-    graphProps.yField = "value";
-    graphProps.seriesField = "type";
-
-    graphProps.isGroup = isGroup;
-
-    if (isStack) {
-      graphProps.isStack = true;
-      graphProps.groupField = "stacked";
-    }
-  }
-
-  return graphProps;
-}

package/src/widgets/views/Graph/GraphDefaults.ts

@@ -1,170 +0,0 @@
-import dayjs from "dayjs";
-
-const formatter = (graphType: "pie" | "default" | "barGrouped") => {
-  return (object: any) => {
-    const formattedValue = object.value.toLocaleString("es-ES", {
-      useGrouping: true,
-    });
-    const name = graphType === "pie" ? object.x : object.type;
-    return { name, value: formattedValue };
-  };
-};
-
-const axisFormatter = (value: any) => {
-  if (typeof value === "string" && stringIsValidNumeric(value)) {
-    return parseFloat(value).toLocaleString("es-ES", {
-      useGrouping: true,
-    });
-  } else if (isNumber(value)) {
-    return value.toLocaleString("es-ES", {
-      useGrouping: true,
-    });
-  } else if (isValidDateString(value)) {
-    const dateType = getDateType(value);
-    if (dateType === null) {
-      return value;
-    }
-    return dayjs(value, (dateFormats.input as any)[dateType]).format(
-      (dateFormats.output as any)[dateType]
-    );
-  } else {
-    return value;
-  }
-};
-
-const stringIsValidNumeric = (value: string) => {
-  const regex = /^[-+]?[0-9]*\.?[0-9]+([eE][-+]?[0-9]+)?$/;
-  return regex.test(value);
-};
-
-const isNumber = (value: any) => {
-  return typeof value === "number" && !isNaN(value);
-};
-
-const DefaultGraphOptions = {
-  default: {
-    padding: "auto",
-    xAxis: {
-      tickCount: 5,
-      label: {
-        formatter: axisFormatter,
-      },
-    },
-    yAxis: {
-      label: {
-        formatter: axisFormatter,
-      },
-    },
-    legend: {
-      maxWidthRatio: 0.5,
-      maxItemWidth: 1000,
-    },
-    tooltip: {
-      formatter: formatter("default"),
-    },
-  },
-  pie: {
-    appendPadding: 10,
-    radius: 0.9,
-    label: {
-      type: "inner",
-      offset: "-30%",
-      content: ({ percent }: any) => `${(percent * 100).toFixed(0)}%`,
-      style: {
-        fontSize: 14,
-        textAlign: "center",
-      },
-    },
-    legend: {
-      maxWidthRatio: 0.5,
-      maxItemWidth: 1000,
-    },
-    tooltip: {
-      formatter: formatter("pie"),
-    },
-    interactions: [
-      {
-        type: "element-active",
-      },
-    ],
-  },
-  barGrouped: {
-    isGroup: true,
-    legend: {
-      maxWidthRatio: 0.5,
-      maxItemWidth: 1000,
-    },
-    tooltip: {
-      formatter: formatter("barGrouped"),
-    },
-    xAxis: {
-      label: {
-        formatter: axisFormatter,
-      },
-    },
-    yAxis: {
-      label: {
-        formatter: axisFormatter,
-      },
-    },
-    label: {
-      position: "middle",
-      layout: [
-        {
-          type: "interval-adjust-position",
-        },
-        {
-          type: "interval-hide-overlap",
-        },
-        {
-          type: "adjust-color",
-        },
-      ],
-    },
-  },
-};
-
-function isValidDateString(variable: any): boolean {
-  // Check if the variable is defined and is a string
-  if (typeof variable !== "string" || variable === undefined) {
-    return false;
-  }
-
-  // Check if the string is a valid date
-  const date = new Date(variable);
-  return date.toString() !== "Invalid Date";
-}
-
-const dateFormats = {
-  input: {
-    hours: "YYYY-MM-DD HH:mm",
-    days: "YYYY-MM-DD",
-    weeks: "YYYY-[W]WW",
-    months: "YYYY-MM",
-    years: "YYYY",
-  },
-  output: {
-    hours: "DD/MM/YYYY HH:mm",
-    days: "DD/MM/YYYY",
-    weeks: "[W]WW/YYYY",
-    months: "MM/YYYY",
-    years: "YYYY",
-  },
-};
-
-function getDateType(dateString: string): string | null {
-  for (const format in dateFormats.input) {
-    const isValidFormat = dayjs(
-      dateString,
-      (dateFormats.input as any)[format],
-      true
-    ).isValid();
-    if (isValidFormat) {
-      return format;
-    }
-  }
-
-  return null;
-}
-
-export default DefaultGraphOptions;