@gisce/react-ooui 2.0.0-alpha.61 → 2.0.0-alpha.63

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

@@ -1,421 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { LoadingOutlined } from "@ant-design/icons";
-import ConnectionProvider from "@/ConnectionProvider";
-import Title from "antd/lib/typography/Title";
-import Measure from "react-measure";
-import iconMapper from "@/helpers/iconMapper";
-import { Alert, Col, Row } from "antd";
-import { Operator, graphProcessor } from "@gisce/ooui";
-
-const { getValueForOperator } = graphProcessor;
-
-const fontGrowFactor = 0.7;
-const minFontSize = 30;
-
-export type GraphInidicatorProps = {
-  model: string;
-  domain: any;
-  context: any;
-  colorCondition?: string | null;
-  totalDomain?: string;
-  showPercent?: boolean;
-  icon?: string;
-  suffix?: string;
-  field?: string;
-  operator?: Operator;
-  manualIds?: number[];
-};
-
-export const GraphIndicator = (props: GraphInidicatorProps) => {
-  const {
-    model,
-    domain,
-    context,
-    colorCondition,
-    totalDomain,
-    showPercent = false,
-    icon: iconProps,
-    suffix,
-    field,
-    operator,
-    manualIds,
-  } = props;
-  const [loading, setLoading] = useState(false);
-  const [value, setValue] = useState<number>();
-  const [percent, setPercent] = useState<number>();
-  const [totalValue, setTotalValue] = useState<number>();
-  const [height, setHeight] = useState<number>(0);
-  const [width, setWidth] = useState<number>(0);
-  const [color, setColor] = useState<string>();
-  const [icon, setIcon] = useState<string>();
-  const [error, setError] = useState<string>();
-
-  useEffect(() => {
-    fetchData();
-  }, [model, colorCondition]);
-
-  async function fetchValue({
-    domain,
-    isTotal,
-  }: {
-    domain: any;
-    isTotal: boolean;
-  }) {
-    if (isTotal) {
-      return await fetchTotalValue({ domain });
-    }
-
-    if (field && operator) {
-      const resultIds =
-        manualIds ||
-        (await ConnectionProvider.getHandler().searchAllIds({
-          params: domain,
-          model,
-          context,
-        }));
-
-      const results = await ConnectionProvider.getHandler().readObjects({
-        model,
-        ids: resultIds,
-        fieldsToRetrieve: [field],
-        context,
-      });
-
-      return getValueForOperator({
-        values: results.map((r: any) => r[field]),
-        operator,
-      });
-    } else {
-      return manualIds
-        ? manualIds.length
-        : await ConnectionProvider.getHandler().searchCount({
-            model,
-            params: domain,
-            context,
-          });
-    }
-  }
-
-  async function fetchTotalValue({ domain }: { domain: any }) {
-    if (field && operator) {
-      const resultIds = await ConnectionProvider.getHandler().searchAllIds({
-        params: domain,
-        model,
-        context,
-      });
-
-      const results = await ConnectionProvider.getHandler().readObjects({
-        model,
-        ids: resultIds,
-        fieldsToRetrieve: [field],
-        context,
-      });
-
-      return getValueForOperator({
-        values: results.map((r: any) => r[field]),
-        operator,
-      });
-    } else {
-      return await ConnectionProvider.getHandler().searchCount({
-        model,
-        params: domain,
-        context,
-      });
-    }
-  }
-  async function fetchData() {
-    setLoading(true);
-    let totalRetrievedValue;
-    let percent;
-
-    try {
-      const retrievedValue = await fetchValue({ domain, isTotal: false });
-
-      setValue(retrievedValue);
-
-      if (totalDomain) {
-        const parsedDomain = await ConnectionProvider.getHandler().evalDomain({
-          domain: totalDomain,
-          values: {},
-          context,
-        });
-        totalRetrievedValue = await fetchValue({
-          domain: parsedDomain,
-          isTotal: true,
-        });
-
-        setTotalValue(totalRetrievedValue);
-      }
-
-      if (totalRetrievedValue) {
-        percent =
-          Math.round((retrievedValue / totalRetrievedValue) * 100 * 100) / 100;
-        setPercent(percent);
-      } else {
-        setPercent(0);
-      }
-
-      if (colorCondition) {
-        const conditionEval =
-          await ConnectionProvider.getHandler().parseCondition({
-            condition: colorCondition,
-            values: { value: retrievedValue, percent },
-            context,
-          });
-        setColor(conditionEval);
-      }
-
-      if (iconProps) {
-        if (iconProps.indexOf(":") !== -1) {
-          const iconEval = await ConnectionProvider.getHandler().parseCondition(
-            {
-              condition: iconProps,
-              values: { value: retrievedValue, percent },
-              context,
-            },
-          );
-          setIcon(iconEval);
-        } else {
-          setIcon(iconProps);
-        }
-      }
-    } catch (err) {
-      setError(JSON.stringify(err));
-    }
-
-    setLoading(false);
-  }
-
-  if (error) {
-    return <Alert className="mt-10" message={error} type="error" banner />;
-  }
-
-  if (loading) {
-    return (
-      <div style={{ padding: "1rem" }}>
-        <LoadingOutlined style={{ height: "12px" }} />
-      </div>
-    );
-  }
-
-  return (
-    <Measure
-      bounds
-      onResize={(contentRect) => {
-        setHeight(contentRect.bounds?.height!);
-        setWidth(contentRect.bounds?.width!);
-      }}
-    >
-      {({ measureRef }) => {
-        if (showPercent) {
-          return (
-            <PercentageIndicator
-              value={value!}
-              total={totalValue!}
-              percent={percent!}
-              measureRef={measureRef}
-              height={height}
-              width={width}
-              color={color}
-              icon={icon}
-              suffix={suffix}
-            />
-          );
-        } else {
-          return (
-            <CommonIndicator
-              value={value!}
-              total={totalValue}
-              measureRef={measureRef}
-              height={height}
-              width={width}
-              color={color}
-              icon={icon}
-              suffix={suffix}
-            />
-          );
-        }
-      }}
-    </Measure>
-  );
-};
-
-function getTextWidth(text: string, font: string) {
-  const canvas = document.createElement("canvas");
-  const context = canvas.getContext("2d");
-
-  context!.font = font || getComputedStyle(document.body).font;
-  return context!.measureText(text).width;
-}
-
-function CommonIndicator({
-  measureRef,
-  width,
-  height,
-  total,
-  value,
-  color,
-  icon,
-  suffix,
-}: {
-  measureRef: any;
-  width: number;
-  height: number;
-  total: number | undefined;
-  value: number;
-  color: string | undefined;
-  icon?: string;
-  suffix?: string;
-}) {
-  let fontSize =
-    height * fontGrowFactor < minFontSize
-      ? minFontSize
-      : height * fontGrowFactor;
-
-  const localeValue = value?.toLocaleString("es-ES", {
-    useGrouping: true,
-  });
-
-  let finalValue = total ? `${localeValue}/${total}` : `${localeValue}`;
-
-  if (suffix) {
-    finalValue += " " + suffix;
-  }
-
-  let tw = getTextWidth(
-    finalValue,
-    `bold ${Math.floor(fontSize * 1.03)}px sans-serif`,
-  );
-
-  if (icon) {
-    tw = tw * 2;
-  }
-
-  if (tw >= width * 0.85) {
-    const maxFontSize = ((width * 0.85) / tw) * fontSize;
-    fontSize = maxFontSize;
-  }
-
-  const IconElement: any =
-    icon && iconMapper(icon, { style: { fontSize: fontSize * 0.7 } });
-
-  return (
-    <div
-      ref={measureRef}
-      style={{
-        width: "100%",
-        height: "100%",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        overflow: "hidden",
-      }}
-    >
-      <Title style={{ fontSize, margin: 0, color }}>
-        {IconElement && <IconElement style={{ fontSize: fontSize * 0.7 }} />}
-        {IconElement ? ` ${finalValue}` : finalValue}
-      </Title>
-    </div>
-  );
-}
-
-function PercentageIndicator({
-  measureRef,
-  height,
-  width,
-  percent,
-  total,
-  value,
-  color,
-  icon,
-  suffix,
-}: {
-  measureRef: any;
-  height: number;
-  width: number;
-  percent: number;
-  total: number;
-  value: number;
-  color: string | undefined;
-  icon?: string;
-  suffix?: string;
-}) {
-  const twoLinesHeight = height * 0.65;
-  let fontSize =
-    twoLinesHeight * fontGrowFactor < minFontSize
-      ? minFontSize
-      : twoLinesHeight * fontGrowFactor;
-
-  const localeValue = value?.toLocaleString("es-ES", {
-    useGrouping: true,
-  });
-
-  let finalValue = total
-    ? `${localeValue}/${total?.toLocaleString("es-ES", {
-        useGrouping: true,
-      })}`
-    : `${localeValue}`;
-
-  if (suffix) {
-    finalValue += " " + suffix;
-  }
-
-  const percentValue = `${percent?.toLocaleString("es-ES", {
-    useGrouping: true,
-  })}%`;
-
-  let tw = getTextWidth(
-    percentValue,
-    `bold ${Math.floor(fontSize * 1.03)}px sans-serif`,
-  );
-
-  if (icon) {
-    tw = tw * 1.5;
-  }
-
-  if (tw >= width * 0.85 || fontSize * 2 < twoLinesHeight) {
-    const maxFontSize = ((width * 0.85) / tw) * fontSize;
-    fontSize = maxFontSize;
-  }
-
-  const IconElement: any = icon && iconMapper(icon, { style: { fontSize } });
-
-  return (
-    <div
-      ref={measureRef}
-      style={{
-        width: "100%",
-        height: "100%",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        overflow: "hidden",
-        flexDirection: "column",
-        padding: "0.2rem",
-      }}
-    >
-      <Row align={"middle"}>
-        {IconElement && (
-          <Col style={{ fontSize: fontSize * 1, color, paddingRight: "10px" }}>
-            <IconElement />
-          </Col>
-        )}
-        <Col>
-          <Title style={{ fontSize: fontSize * 0.8, margin: 0, color }}>
-            {IconElement ? ` ${percent}%` : `${percent}%`}
-          </Title>
-          <Title
-            style={{
-              fontSize: fontSize * 0.4,
-              margin: 0,
-              color,
-              textAlign: "center",
-            }}
-          >
-            {finalValue}
-          </Title>
-        </Col>
-      </Row>
-    </div>
-  );
-}

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

@@ -1,176 +0,0 @@
-import { useState } from "react";
-import {
-  parseGraph,
-  GraphChart as GraphChartOoui,
-  graphProcessor,
-  graphFieldUtils,
-  GraphType,
-} from "@gisce/ooui";
-import useDeepCompareEffect from "use-deep-compare-effect";
-import ConnectionProvider from "@/ConnectionProvider";
-
-const { processGraphData } = graphProcessor;
-const { getFieldsToRetrieve } = graphFieldUtils;
-
-export type GraphDataQueryOpts = {
-  model: string;
-  domain?: any;
-  context?: any;
-  limit?: number;
-  manualIds?: number[];
-};
-
-export type GraphDataOpts = GraphDataQueryOpts & {
-  xml: string;
-  uninformedString: string;
-};
-
-export const useGraphData = (opts: GraphDataOpts) => {
-  const {
-    model,
-    domain = [],
-    context = {},
-    xml,
-    limit,
-    uninformedString,
-    manualIds,
-  } = opts;
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<any>();
-  const [processedValues, setProcessedValues] = useState<any>();
-  const [evaluatedEntries, setEvaluatedEntries] = useState<any[]>();
-  const [type, setType] = useState<GraphType>("line");
-
-  useDeepCompareEffect(() => {
-    (async () => {
-      setLoading(true);
-      setError(undefined);
-
-      // // First we parse the xml with ooui library
-      const ooui = parseGraph(xml) as GraphChartOoui;
-      setType(ooui.type || "line");
-
-      // // Then we fetch the data
-      const fieldsToRetrieve = getFieldsToRetrieve({ ooui });
-      let values, fields;
-
-      try {
-        // Use connection provider or whatever service you need to use
-        ({ values, fields } = await retrieveData({
-          model,
-          domain,
-          context,
-          limit,
-          order: ooui.timerange ? ooui.x.name : null,
-          fields: fieldsToRetrieve,
-          manualIds,
-        }));
-      } catch (e) {
-        setError("Error fetching graph data values: " + JSON.stringify(e));
-        setLoading(false);
-        return;
-      }
-
-      try {
-        if (!values || !fields) {
-          setError("No values or fields returned");
-          setLoading(false);
-          return;
-        }
-
-        setEvaluatedEntries(values);
-        const _processedValues = processGraphData({
-          ooui,
-          values,
-          fields,
-          options: {
-            uninformedString,
-          },
-        });
-        setProcessedValues(_processedValues);
-      } catch (e) {
-        setError("Error processing graph data: " + e);
-        setLoading(false);
-        return;
-      }
-
-      setLoading(false);
-    })();
-  }, [xml, model, limit, context, domain]);
-
-  return {
-    loading,
-    error,
-    type,
-    values: processedValues,
-    evaluatedEntries,
-  };
-};
-
-async function getFieldsForModel({
-  model,
-  context,
-  fields,
-}: {
-  model: string;
-  context: any;
-  fields: string[];
-}) {
-  const viewData = await ConnectionProvider.getHandler().getFields({
-    model,
-    context,
-    fields,
-  });
-  return viewData;
-}
-
-async function retrieveData({
-  fields,
-  model,
-  domain,
-  context,
-  order,
-  limit,
-  manualIds,
-}: {
-  fields: string[];
-  model: string;
-  domain: any;
-  context: any;
-  order: string | null;
-  limit?: number;
-  manualIds?: number[];
-}) {
-  const fieldsDefinition = await getFieldsForModel({ model, context, fields });
-
-  if (manualIds) {
-    let values: any[] = (await ConnectionProvider.getHandler().readObjects({
-      model,
-      ids: manualIds,
-      fieldsToRetrieve: fields,
-      context,
-    })) as any;
-
-    if (order) {
-      values = [...values].sort((a, b) => a[order] - b[order]);
-    }
-
-    return {
-      values,
-      fields: fieldsDefinition,
-    };
-  }
-
-  const values: any[] = (await ConnectionProvider.getHandler().search({
-    model,
-    params: domain,
-    fieldsToRetrieve: fields,
-    context,
-    limit,
-    order,
-  })) as any;
-  return {
-    values,
-    fields: fieldsDefinition,
-  };
-}