@titaui/pc 1.9.99 → 1.9.103

package/src/components/tita-chart/charts/liquid-ball.tsx

@@ -1,106 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { measureTextWidth } from "@antv/g2plot";
-import Liquid from "../plots/liquid";
-import { getLocale } from "../../../utils/getLocale";
-
-// import "../index.scss";
-
-interface Props {
-  PrePercentNum: number;// 上一次百分数
-  percentNum: number;// 当前百分数
-  name: string;// 名称
-  textFillDivide?: number;// 文本样式改变边界数值
-  liquidFillDivide?: number;// 水球样式改变的分界值
-  emptyColor?: string;
-  fillColor?: string;
-  styles?: React.CSSProperties;// 容器样式
-  // 如果后续需要什么属性设置，就再加
-}
-
-export default function TitaLiquid(props: Props) {
-  const {
-    PrePercentNum,
-    percentNum,
-    name,
-    textFillDivide = 0.7,
-    liquidFillDivide = 0.45,
-    emptyColor = "#5B8FF9",
-    fillColor = "#5B8FF9",
-    styles = { height: "100px", width: "100px" },
-  } = props;
-  const [percent, setPercent] = useState(percentNum);
-  let ref;
-  const config = {
-    percent,
-    radius: 1,
-    statistic: {
-      title: {
-        formatter: function formatter() {
-          return name;
-        },
-        style: function style(_ref) {
-          const { percent } = _ref;
-          return { fill: percent > textFillDivide ? "white" : "#89919F" };
-        },
-      },
-      content: {
-        style: function style(_ref2) {
-          const { percent } = _ref2;
-          return {
-            fontSize: 12,
-            lineHeight: 1,
-            fill: percent > textFillDivide ? "white" : "#141C28",
-          };
-        },
-        customHtml: function customHtml(container, view, _ref3) {
-          const { percent } = _ref3;
-          const _container$getBoundin = container.getBoundingClientRect();
-          const { width } = _container$getBoundin;
-          const { height } = _container$getBoundin;
-          const d = Math.sqrt((width / 2) ** 2 + (height / 2) ** 2);
-          const text = "".concat((percent * 100).toFixed(0), getLocale("OKR_MyO_Pop_Upd_Percentage"));
-          // @ts-ignore
-          const textWidth = (0, measureTextWidth)(text, { fontSize: 60 });
-          const scale = Math.min(d / textWidth, 1);
-          return "<div style=\"width:"
-            .concat(`${d}`, "px;display:flex;align-items:center;justify-content:center;font-size:")
-            .concat("18", "px;line-height:")
-            .concat(scale <= 1 ? "1" : "inherit", "\">")
-            .concat(text, "</div>");
-        },
-      },
-    },
-    liquidStyle: function liquidStyle(_ref4) {
-      const { percent } = _ref4;
-      return {
-        fill: percent > liquidFillDivide ? fillColor : emptyColor,
-      };
-    },
-    color: function color() {
-      return "#5B8FF9";
-    },
-    wave: {
-      length: 80,
-    },
-  };
-  useEffect(() => {
-    setPercent(percentNum);
-    let data = PrePercentNum * 0.01;
-    var interval = setInterval(() => {
-      data += 0.01;
-      if (Math.floor(data * 100) <= percentNum) {
-        setPercent(data);
-      } else {
-        clearInterval(interval);
-      }
-    }, 10);
-    return () => {
-      clearInterval(interval);
-    };
-  }, [percentNum]);
-  return (
-    <div style={styles}>
-      <Liquid {...config} chartRef={(chartRef) => (ref = chartRef)} />
-    </div>
-  );
-}

package/src/components/tita-chart/charts/pie.tsx

@@ -1,105 +0,0 @@
-import React from "react";
-import PieChart from "../plots/pie";
-import { getLocale } from "../../../utils/getLocale";
-
-interface Props {
-  size?: React.CSSProperties;// 容器样式
-  Data: DataItem[], // 数据
-  handlePieLegendClick?: Function
-}
-
-interface DataItem {
-  type: string;
-  value: number;
-}
-
-export default function TitaPieChart(props: Props) {
-  const {
-    size = { width: "400px", height: "300px" },
-    Data,
-    handlePieLegendClick = () => { },
-  } = props;
-  let totalData = 0;
-  Data.map((item) => totalData += item.value);
-
-  // data要发请求取到
-  const config = {
-    data: Data,
-    appendPadding: 0,
-    angleField: "value",
-    colorField: "type",
-    color: ["l(0) 0:#94C2FD 1:#5B8FF9", "l(0) 0:#FFCE6B 1:#FAAD14", "l(0) 0:#FF9C9C 1:#F36E6E", "l(0) 0:#96A9C4 1:#7585A2"],
-    radius: 1,
-    innerRadius: 0.65,
-    // 线出来对标注
-    label: false,
-    legend: {
-      position: "right",
-      layout: "vertical",
-      itemHeight: 20,
-      itemSpacing: 20,
-      itemName: {
-        style: {
-          cursor: "pointer",
-        },
-      },
-    },
-    // 交互的配置
-    interactions: [
-      { type: "tooltip" },
-      { type: "element-selected", enable: false },
-      { type: "element-active", enable: false },
-      { type: "legend-visible-filter", enable: false },
-      { type: "legend-filter", enable: false },
-    ],
-    // 状态样式/default/active/selected/inactive
-    state: {
-      active: {
-        // animate: { duration: 100, easing: 'easeLinear' },
-        style: {
-          lineWidth: 0,
-        },
-      },
-    },
-    // 环里面：
-    statistic: {
-      title: {
-        style: {
-          whiteSpace: "pre-wrap",
-          overflow: "hidden",
-          textOverflow: "ellipsis",
-          color: "#A4ACB9",
-          fontSize: "12px",
-        },
-        offsetY: -10,
-        content: getLocale("HP_Onumber"),
-      },
-      content: {
-        style: {
-          whiteSpace: "pre-wrap",
-          overflow: "hidden",
-          textOverflow: "ellipsis",
-          color: "#3F4755",
-          fontSize: "24px",
-          fontWeight: "500",
-        },
-        content: totalData,
-      },
-    },
-  };
-  //
-  return (
-    <div style={{
-      display: "flex", alignItems: "center", justifyContent: "center", ...size,
-    }}
-    >
-      { /* @ts-ignore */}
-      <PieChart
-        {...config}
-        onReady={(plot) => {
-          plot.on("legend-item:click", handlePieLegendClick);
-        }}
-      />
-    </div>
-  );
-}

package/src/components/tita-chart/charts/words-cloud.tsx

@@ -1,91 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { getLocale } from "../../../utils/getLocale";
-import WordsCloud from "../plots/wordscloud";
-
-import "./index.scss";
-
-interface WordDataItem {
-  value: number;
-  text: string;
-}
-
-export type WordsData = WordDataItem[]
-
-interface Props {
-  styles?: React.CSSProperties;
-  wordsData: WordsData;// words数据
-  ImageMask?: string;
-  fontSize?: [number, number]
-}
-
-const defaultWordsCouldDate = new Array(10).fill([
-  { text: getLocale("Menu_Title_OKRs"), value: 10 },
-  { text: "对齐", value: 3 },
-  { text: getLocale("Mod_Objective"), value: 3 },
-  { text: getLocale("Mod_KeyResults"), value: 1 },
-  { text: "聚焦", value: 1 },
-  { text: "执行", value: 2 },
-  { text: getLocale("OKR_MyO_Butt_Update"), value: 2 },
-  { text: getLocale("Feed_Tab_Title_Progress"), value: 2 },
-  { text: getLocale("OKR_MyO_E_Pop_Coordination"), value: 2 },
-  { text: "execute", value: 1 },
-  { text: "objective", value: 4 },
-]).reduce((a, b) => [...a, ...b]);
-
-function TitaWordsCloud(props: Props) {
-  const {
-    styles = {
-      width: "100%", height: "100%", minHeight: "200px", minWidth: "300px",
-    },
-    wordsData,
-    ImageMask,
-    fontSize = [8, 64],
-  } = props;
-
-  const config = {
-    data: wordsData.length ? wordsData : defaultWordsCouldDate,
-    wordField: "text", // 单词字段名
-    weightField: "value", // 大小字段名
-    colorField: "text", // 颜色字段名
-    color: [
-      "#2879ff",
-      "#FFA99E",
-      "#26D8F0",
-      "#3D26F0",
-      "#62d600",
-      "#9EC3FF",
-      "#4D90ff",
-      "#00D685",
-      "#A226F0",
-      "#2879FF",
-      "#F0A326",
-    ],
-    autoFit: true,
-    imageMask: ImageMask,
-    wordStyle: {
-      fontFamily: "Avenir",
-      fontSize,
-    },
-    limitInPlot: true,
-    // state: {
-    //     active: {
-    //         style: {
-    //             lineWidth: 0,
-    //             shadowBlur: 4,
-    //             shadowColor: 'rgba(0,0,0,0.3)',
-    //         },
-    //     },
-    // },
-    interactions: [{ type: "tooltip", enable: wordsData.length !== 0 }],
-  };
-  return (
-    <div
-      style={{ opacity: `${wordsData.length === 0 ? 0.3 : 1}`, ...styles }}
-      className={`${wordsData.length === 0 && "words-cloud-mock-data"}`}
-    >
-      <WordsCloud {...config} />
-    </div>
-  );
-}
-
-export default TitaWordsCloud;

package/src/components/tita-chart/errorBoundary/index.tsx

@@ -1,50 +0,0 @@
-import React, { Fragment } from "react";
-
-class ErrorBoundary extends React.Component<any> {
-  static getDerivedStateFromError(error: Error) {
-    return { hasError: true, error };
-  }
-
-  static getDerivedStateFromProps(nextProps: any, state: any) {
-    if (state.children !== nextProps.children) {
-      return {
-        children: nextProps.children,
-        hasError: false,
-        error: undefined,
-      };
-    }
-    return null;
-  }
-
-  state: {
-        hasError: boolean;
-        error?: Error;
-    } = {
-      hasError: false,
-    };
-
-  renderError = (e: Error) => {
-    const { errorTemplate } = this.props;
-    switch (e) {
-      default:
-        // fallback
-        return errorTemplate && typeof errorTemplate === "function" ? (
-          errorTemplate(e)
-        ) : (
-          <h5>
-            组件出错了，请核查后重试：
-            {e.message}
-          </h5>
-        );
-    }
-  };
-
-  render() {
-    if (this.state.hasError) {
-      return this.renderError(this.state.error!);
-    }
-    return <>{this.props.children}</>;
-  }
-}
-
-export default ErrorBoundary;

package/src/components/tita-chart/hooks/useChart.ts

@@ -1,183 +0,0 @@
-import { ReactNode, useRef, useEffect } from "react";
-import { isEqual } from "@antv/util";
-// import type { Options as BaseOptions, G2, Plot, Tooltip as BaseTooltip } from '@antv/g2plot';
-import createNode from "../util/createNode";
-import {
-  hasPath, isType, deepClone, clone, setPath,
-} from "../util";
-
-export interface Tooltip extends Omit<any, "customContent"> {
-    customContent?: (title: string, data: any[]) => ReactNode | string | unknown;
-    container?: ReactNode;
-}
-
-export interface Options {
-    tooltip?: boolean | Tooltip;
-    data?: any;
-    yAxis?: [];
-    [key: string]: any;
-}
-
-export interface Base {
-    __proto__?: any;
-}
-
-export default function useInit<T extends Base, U extends Options>(ChartClass: any, config: U) {
-  const chart = useRef<T>();
-  const chartOptions = useRef<U>();
-  const container = useRef<HTMLDivElement>(null);
-  const { onReady, onEvent } = config;
-
-  /**
-     * Get data base64
-     * @param {string} type A DOMString indicating the image format. The default format type is image/png.
-     * @param {number} encoderOptions A Number between 0 and 1 indicating the image quality
-     */
-  const toDataURL = (type = "image/png", encoderOptions?: number) => chart.current && chart.current.chart.canvas.cfg.el.toDataURL(type, encoderOptions);
-
-  /**
-     * Download Iamge
-     * @param {string} name A name of image
-     * @param {string} type A DOMString indicating the image format. The default format type is image/png.
-     * @param {number} encoderOptions A Number between 0 and 1 indicating the image quality
-     */
-  const downloadImage = (
-    name = "download",
-    type = "image/png",
-    encoderOptions?: number,
-  ): string => {
-    let imageName = name;
-    if (name.indexOf(".") === -1) {
-      imageName = `${name}.${type.split("/")[1]}`;
-    }
-    const base64 = chart.current && chart.current.chart.canvas.cfg.el.toDataURL(type, encoderOptions);
-    let a: HTMLAnchorElement | null = document.createElement("a");
-    a.href = base64;
-    a.download = imageName;
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-    a = null;
-    return imageName;
-  };
-
-  const reactDomToString = (source: U, path: string[], type?: string) => {
-    const statisticCustomHtml = hasPath(source, path);
-    setPath(source, path, (...arg: any[]) => {
-      const statisticDom = isType(statisticCustomHtml, "Function")
-        ? statisticCustomHtml(...arg)
-        : statisticCustomHtml;
-      if (
-        isType(statisticDom, "String")
-                || isType(statisticDom, "Number")
-                || isType(statisticDom, "HTMLDivElement")
-      ) {
-        return statisticDom;
-      }
-      return createNode(statisticDom, type);
-    });
-  };
-
-  const processConfig = () => {
-    // statistic
-    if (hasPath(config, ["statistic", "content", "customHtml"])) {
-      reactDomToString(config, ["statistic", "content", "customHtml"]);
-    }
-    if (hasPath(config, ["statistic", "title", "customHtml"])) {
-      reactDomToString(config, ["statistic", "title", "customHtml"]);
-    }
-    // tooltip
-    if (typeof config.tooltip === "object") {
-      if (hasPath(config, ["tooltip", "container"])) {
-        reactDomToString(config, ["tooltip", "container"], "tooltip");
-      }
-      if (hasPath(config, ["tooltip", "customContent"])) {
-        reactDomToString(config, ["tooltip", "customContent"], "tooltip");
-      }
-    }
-  };
-
-  useEffect(() => {
-    if (chart.current && !isEqual(chartOptions.current, config)) {
-      let changeData = false;
-      if (chartOptions.current) {
-        // 从 options 里面取出 data 、value 、 percent 进行比对，判断是否仅数值发生改变
-        const {
-          data: currentData,
-          value: currentValue,
-          percent: currentPercent,
-          ...currentConfig
-        } = chartOptions.current;
-        const {
-          data: inputData,
-          value: inputValue,
-          percent: inputPercent,
-          ...inputConfig
-        } = config;
-        changeData = isEqual(currentConfig, inputConfig);
-      }
-      if (changeData) {
-        let changeType = "data";
-        const typeMaps = ["percent"]; // 特殊类型的图表 data 字段，例如 RingProgress
-        const currentKeys = Object.keys(config);
-        typeMaps.forEach((type: string) => {
-          if (currentKeys.includes(type)) {
-            changeType = type;
-          }
-        });
-        chart.current.changeData(config && config[changeType] || []);
-      } else {
-        processConfig();
-        chart.current.update(config);
-      }
-      chartOptions.current = deepClone(config);
-    }
-  }, [config]);
-
-  useEffect(() => {
-    if (!container.current) {
-      return function () {
-        return null;
-      };
-    }
-    processConfig();
-    const chartInstance: T = new (ChartClass as any)(container.current, {
-      ...config,
-    });
-
-    ChartClass.prototype.toDataURL = (type?: string, encoderOptions?: number) => toDataURL(type, encoderOptions);
-    ChartClass.prototype.downloadImage = (
-      name?: string,
-      type?: string,
-      encoderOptions?: number,
-    ) => downloadImage(name, type, encoderOptions);
-    chartInstance.render();
-    if (!chartOptions.current) {
-      chartOptions.current = deepClone(config);
-    }
-    chart.current = clone(chartInstance) as T;
-    if (onReady) {
-      onReady(chartInstance);
-    }
-    const handler = (event) => {
-      if (onEvent) {
-        onEvent(chartInstance, event);
-      }
-    };
-    chartInstance.on("*", handler);
-
-    // 组件销毁时销毁图表
-    return () => {
-      if (chart.current) {
-        chart.current.destroy();
-        chart.current.off("*", handler);
-        chart.current = undefined;
-      }
-    };
-  }, []);
-
-  return {
-    chart,
-    container,
-  };
-}

package/src/components/tita-chart/index.ts

@@ -1,11 +0,0 @@
-import TitaPieChart from "./charts/pie";
-import TitaLiquidBall from "./charts/liquid-ball";
-import TitaWordsCloud from "./charts/words-cloud";
-
-const TitaChart = {
-  Pie: TitaPieChart,
-  LiquidBall: TitaLiquidBall,
-  WordsCloud: TitaWordsCloud,
-};
-
-export default TitaChart;

package/src/components/tita-chart/interface.ts

@@ -1,54 +0,0 @@
-import {
-  Plot,
-  Options,
-  G2,
-  DualAxesOptions,
-  GaugeOptions,
-  BulletOptions,
-  MixOptions,
-  TreemapOptions,
-} from "@antv/g2plot";
-
-interface TinyPlotOptions extends Omit<Options, "data" | "legend" | "label"> {
-    data: number[];
-}
-
-export type AllBaseConfig =
-    | Options
-    | DualAxesOptions
-    | GaugeOptions
-    | TinyPlotOptions
-    | BulletOptions
-    | MixOptions
-    | TreemapOptions;
-
-export type ChartRefConfig =
-    | ((chart: Plot<AllBaseConfig>) => void)
-    | React.MutableRefObject<Plot<AllBaseConfig> | undefined>;
-
-export type PlotEvent = G2.Event;
-export interface ContainerConfig<O extends AllBaseConfig = Options, P extends Plot<O> = Plot<O>> {
-    style?: React.CSSProperties;
-    className?: string;
-    loading?: boolean;
-    loadingTemplate?: React.ReactElement;
-    errorTemplate?: (e: Error) => React.ReactNode;
-    /** 图表渲染完成回调 */
-    onReady?: (chart: P) => void;
-    /** 任何其他的图形事件 */
-    onEvent?: (chart: P, event: PlotEvent) => void;
-}
-
-export interface GraphContainerConfig {
-    style?: React.CSSProperties;
-    className?: string;
-    loading?: boolean;
-    loadingTemplate?: React.ReactElement;
-    errorTemplate?: (e: Error) => React.ReactNode;
-}
-
-// export {  };
-
-export * from "./graphs/interface";
-
-export * from "./plots/interface";

package/src/components/tita-chart/plots/liquid/index.tsx

@@ -1,40 +0,0 @@
-import React, { useEffect, useImperativeHandle, forwardRef } from "react";
-import { Liquid as G2plotLiquid, LiquidOptions as G2plotConfig } from "@antv/g2plot";
-import useChart from "../../hooks/useChart";
-import { getChart } from "../../util";
-import { ChartRefConfig, ContainerConfig } from "../../interface";
-import { ErrorBoundary } from "../../base";
-import ChartLoading from "../../util/createLoading";
-
-export interface LiquidConfig extends G2plotConfig, ContainerConfig<G2plotConfig> {
-    chartRef?: ChartRefConfig;
-}
-
-const LiquidChart = forwardRef((props: LiquidConfig, ref) => {
-  const {
-    chartRef,
-    style = {
-      height: "inherit",
-    },
-    className,
-    loading,
-    loadingTemplate,
-    errorTemplate,
-    ...rest
-  } = props;
-  const { chart, container } = useChart<G2plotLiquid, LiquidConfig>(G2plotLiquid, rest);
-  useEffect(() => {
-    getChart(chartRef, chart.current);
-  }, [chart.current]);
-  useImperativeHandle(ref, () => ({
-    getChart: () => chart.current,
-  }));
-  return (
-    <ErrorBoundary errorTemplate={errorTemplate}>
-      {loading && <ChartLoading loadingTemplate={loadingTemplate} />}
-      <div className={className} style={style} ref={container} />
-    </ErrorBoundary>
-  );
-});
-
-export default LiquidChart;

package/src/components/tita-chart/plots/pie/index.tsx

@@ -1,40 +0,0 @@
-import React, { useEffect, useImperativeHandle, forwardRef } from "react";
-import { Pie as G2plotPie, PieOptions as G2plotConfig } from "@antv/g2plot";
-import useChart from "../../hooks/useChart";
-import { getChart } from "../../util";
-import { ChartRefConfig, ContainerConfig } from "../../interface";
-import { ErrorBoundary } from "../../base";
-import ChartLoading from "../../util/createLoading";
-
-export interface PieConfig extends G2plotConfig, ContainerConfig<G2plotConfig> {
-  chartRef?: ChartRefConfig;
-}
-
-const PieChart = forwardRef((props: PieConfig, ref) => {
-  const {
-    chartRef,
-    style = {
-      height: "inherit",
-    },
-    className,
-    loading,
-    loadingTemplate,
-    errorTemplate,
-    ...rest
-  } = props;
-  const { chart, container } = useChart<G2plotPie, PieConfig>(G2plotPie, rest);
-  useEffect(() => {
-    getChart(chartRef, chart.current);
-  }, [chart.current]);
-  useImperativeHandle(ref, () => ({
-    getChart: () => chart.current,
-  }));
-  return (
-    <ErrorBoundary errorTemplate={errorTemplate}>
-      {loading && <ChartLoading loadingTemplate={loadingTemplate} />}
-      <div className={className} style={style} ref={container} />
-    </ErrorBoundary>
-  );
-});
-
-export default PieChart;