@gisce/react-ooui 0.1.0

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

@@ -0,0 +1,108 @@
+import React, { useState, useEffect } 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";
+
+export type GraphProps = {
+  view_id: number;
+  model: string;
+  domain: any;
+  context: any;
+  limit: number;
+};
+
+export const Graph = (props: GraphProps) => {
+  const { view_id, model, context, domain, limit } = props;
+  const [loading, setLoading] = useState(false);
+  const [graphOoui, setGraphOoui] = useState<GraphOoui>();
+  const [graphXml, setGraphXml] = useState<string>();
+
+  useEffect(() => {
+    fetchData();
+  }, [view_id]);
+
+  async function fetchData() {
+    setLoading(true);
+
+    try {
+      const viewData = await ConnectionProvider.getHandler().getView({
+        model,
+        id: view_id,
+        type: "graph",
+        context,
+      });
+
+      setGraphXml(viewData.arch);
+      const graph = parseGraph(viewData.arch);
+      setGraphOoui(graph);
+    } catch (err) {
+      console.error(err);
+      return <>{JSON.stringify(err)}</>;
+    }
+
+    setLoading(false);
+  }
+
+  if (loading) {
+    return (
+      <div style={{ 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!}
+          {...indicatorFieldopts}
+        />
+      );
+    }
+    case "line":
+    case "bar":
+    case "pie": {
+      return (
+        <GraphChart
+          model={model}
+          context={context}
+          domain={domain}
+          xml={graphXml!}
+          limit={limit}
+        />
+      );
+    }
+    default: {
+      return <>{`Graph ${graphOoui.type} not implemented`}</>;
+    }
+  }
+};

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

@@ -0,0 +1,102 @@
+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;
+};
+
+export const GraphChart = (props: GraphChartProps) => {
+  const { model, domain, context, xml, limit } = props;
+  const { t } = useContext(LocaleContext) as LocaleContextType;
+
+  const { error, loading, values, type } = useGraphData({
+    model,
+    xml,
+    limit,
+    domain,
+    context,
+    uninformedString: t("uninformed"),
+  });
+
+  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" }}>
+      <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.groupField = "stacked";
+    }
+  }
+
+  return graphProps;
+}

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

@@ -0,0 +1,57 @@
+const DefaultGraphOptions = {
+  default: {
+    padding: "auto",
+    xAxis: {
+      tickCount: 5,
+    },
+    legend: {
+      maxWidthRatio: 0.5,
+      maxItemWidth: 1000,
+    },
+  },
+  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,
+    },
+    interactions: [
+      {
+        type: "element-active",
+      },
+    ],
+  },
+  barGrouped: {
+    isGroup: true,
+    legend: {
+      maxWidthRatio: 0.5,
+      maxItemWidth: 1000,
+    },
+    label: {
+      position: "middle",
+      layout: [
+        {
+          type: "interval-adjust-position",
+        },
+        {
+          type: "interval-hide-overlap",
+        },
+        {
+          type: "adjust-color",
+        },
+      ],
+    },
+  },
+};
+
+export default DefaultGraphOptions;

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

@@ -0,0 +1,360 @@
+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 } from "@gisce/ooui";
+import { getValueForOperator } from "@gisce/ooui/dist/Graph/processor/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;
+};
+
+export const GraphIndicator = (props: GraphInidicatorProps) => {
+  const {
+    model,
+    domain,
+    context,
+    colorCondition,
+    totalDomain,
+    showPercent = false,
+    icon: iconProps,
+    suffix,
+    field,
+    operator,
+  } = 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 fetchTotalValue(queryDomain: any) {
+    if (field && operator) {
+      const resultIds = await ConnectionProvider.getHandler().searchAllIds({
+        params: queryDomain,
+        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: queryDomain,
+        context,
+      });
+    }
+  }
+
+  async function fetchData() {
+    setLoading(true);
+    let totalRetrievedValue;
+    let percent;
+
+    try {
+      const retrievedValue = await fetchTotalValue(domain);
+
+      setValue(retrievedValue);
+
+      if (totalDomain) {
+        const parsedDomain = await ConnectionProvider.getHandler().evalDomain({
+          domain: totalDomain,
+          values: {},
+          context,
+        });
+        totalRetrievedValue = await fetchTotalValue(parsedDomain);
+
+        setTotalValue(totalRetrievedValue);
+      }
+
+      if (totalRetrievedValue) {
+        percent =
+          Math.round((retrievedValue / totalRetrievedValue) * 100 * 100) / 100;
+        setPercent(percent);
+      }
+
+      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;
+
+  let finalValue = total ? `${value}/${total}` : `${value}`;
+
+  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);
+
+  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;
+
+  let finalValue = total ? `${value}/${total}` : `${value}`;
+
+  if (suffix) {
+    finalValue += " " + suffix;
+  }
+
+  const percentValue = `${percent}%`;
+
+  let tw = getTextWidth(
+    percentValue,
+    `bold ${Math.floor(fontSize * 1.03)}px sans-serif`
+  );
+
+  if (icon) {
+    tw = tw * 1.5;
+  }
+
+  const IconElement: any = icon && iconMapper(icon);
+
+  if (tw >= width * 0.85 || fontSize * 2 < twoLinesHeight) {
+    const maxFontSize = ((width * 0.85) / tw) * fontSize;
+    fontSize = maxFontSize;
+  }
+
+  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>
+            <IconElement
+              style={{ fontSize: fontSize * 1, color, paddingRight: "10px" }}
+            />
+          </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>
+  );
+}