@antv/gpt-vis 0.0.5 → 0.1.0

package/dist/esm/PathMap/index.js

@@ -1,140 +1,38 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import { LarkMap, LineLayer, PointLayer, TextLayer } from '@antv/larkmap';
-import React, { useState } from 'react';
-window._AMapSecurityConfig = {
-  securityJsCode: '8803c38931b6fddc9bbfeee69df8824d'
-};
-var CONFIG = {
-  mapType: 'Gaode',
-  mapOptions: {
-    style: 'normal',
-    center: [120.210792, 30.246026],
-    zoom: 12,
-    maxZoom: 18,
-    token: 'f0230f884bbd54e2913c890cdf45aa7e'
-  }
-};
-var lineLayerOptions = {
-  autoFit: false,
-  shape: 'line',
-  size: 3,
-  color: '#6808fed1',
-  style: {
-    opacity: 1,
-    lineType: 'solid',
-    stroke: '#6808FE',
-    strokeWidth: 1
-  }
-};
-var makerLayerOptions = {
-  autoFit: false,
-  shape: 'circle',
-  color: '#fff',
-  size: 4,
-  style: {
-    stroke: '#6808FE',
-    strokeWidth: 3
-  }
-};
-var labelLayerOptions = {
-  autoFit: false,
-  field: 'address',
-  style: {
-    fill: '#fff',
-    opacity: 1,
-    fontSize: 16,
-    fontWeight: 'bold',
-    stroke: '#6808FE',
-    strokeWidth: 8,
-    textAllowOverlap: false,
-    padding: [5, 5],
-    textOffset: [0, 30]
-  }
-};
-function bbox(data) {
-  var bounds = [Infinity, Infinity, -Infinity, -Infinity];
-  data.forEach(function (_ref) {
-    var coordinates = _ref.coordinates;
-    coordinates.forEach(function (_ref2) {
-      var _ref3 = _slicedToArray(_ref2, 2),
-        lng = _ref3[0],
-        lat = _ref3[1];
-      if (bounds[0] > lng) {
-        bounds[0] = lng;
-      }
-      if (bounds[1] > lat) {
-        bounds[1] = lat;
-      }
-      if (bounds[2] < lng) {
-        bounds[2] = lng;
-      }
-      if (bounds[3] < lat) {
-        bounds[3] = lat;
-      }
-    });
-  });
-  return bounds;
-}
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["data", "markerStyle", "pathStyle"];
+import React, { useMemo } from 'react';
+import { useMapConfig } from "../ConfigProvider/hooks";
+import Map from "../Map";
+import { formatMakerStyle, formatPolylineStyle } from "../utils/map";
 var PathMap = function PathMap(props) {
-  var className = props.className,
-    style = props.style,
-    _props$data = props.data,
-    data = _props$data === void 0 ? [] : _props$data;
-  var _useState = useState({
-      data: data,
-      parser: {
-        type: 'json',
-        coordinates: 'coordinates'
+  var _useMapConfig = useMapConfig('PathMap', props),
+    _useMapConfig$data = _useMapConfig.data,
+    data = _useMapConfig$data === void 0 ? [] : _useMapConfig$data,
+    _useMapConfig$markerS = _useMapConfig.markerStyle,
+    markerStyle = _useMapConfig$markerS === void 0 ? {} : _useMapConfig$markerS,
+    _useMapConfig$pathSty = _useMapConfig.pathStyle,
+    pathStyle = _useMapConfig$pathSty === void 0 ? {} : _useMapConfig$pathSty,
+    rest = _objectWithoutProperties(_useMapConfig, _excluded);
+  var markerdata = useMemo(function () {
+    var markers = [];
+    data.forEach(function (item) {
+      if (item.markers) {
+        markers.push.apply(markers, _toConsumableArray(item.markers));
       }
-    }),
-    _useState2 = _slicedToArray(_useState, 1),
-    lineSource = _useState2[0];
-  var _useState3 = useState(function () {
-      return {
-        data: data.map(function (item) {
-          return [{
-            lngLat: item.coordinates[0],
-            address: item === null || item === void 0 ? void 0 : item.originName
-          }, {
-            lngLat: item.coordinates[item.coordinates.length - 1],
-            address: item === null || item === void 0 ? void 0 : item.destinationName
-          }];
-        }).flat().filter(function (item) {
-          return item.address;
-        }),
-        parser: {
-          type: 'json',
-          coordinates: 'lngLat'
-        }
-      };
-    }),
-    _useState4 = _slicedToArray(_useState3, 1),
-    dotSource = _useState4[0];
-  var onSceneLoaded = function onSceneLoaded(scene) {
-    if (!data.length) return;
-    var bounds = bbox(data);
-    if (scene.getType() === 'amap') {
-      var _scene$map;
-      (_scene$map = scene.map) === null || _scene$map === void 0 || _scene$map.setBounds(bounds, true, [60, 60, 60, 60]);
-    } else {
-      scene.fitBounds([[bounds[0], bounds[1]], [bounds[2], bounds[3]]]);
-    }
-  };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LarkMap, _extends({
-    className: className,
-    style: _objectSpread({
-      height: 300
-    }, style)
-  }, CONFIG, {
-    onSceneLoaded: onSceneLoaded
-  }), /*#__PURE__*/React.createElement(LineLayer, _extends({}, lineLayerOptions, {
-    source: lineSource
-  })), /*#__PURE__*/React.createElement(PointLayer, _extends({}, makerLayerOptions, {
-    source: dotSource
-  })), /*#__PURE__*/React.createElement(TextLayer, _extends({}, labelLayerOptions, {
-    source: dotSource
-  }))));
+    });
+    return formatMakerStyle(markers, markerStyle);
+  }, [data, markerStyle]);
+  var linedata = useMemo(function () {
+    var lines = data.map(function (item) {
+      return item.path;
+    });
+    return formatPolylineStyle(lines, pathStyle);
+  }, [data, pathStyle]);
+  return /*#__PURE__*/React.createElement(Map, _extends({
+    markers: markerdata,
+    polyline: linedata
+  }, rest));
 };
 export default PathMap;

package/dist/esm/Pie/index.d.ts

@@ -1,19 +1,21 @@
+import type { PieConfig } from '@ant-design/plots';
 import React from 'react';
-import { BaseChartProps } from '../types';
+import type { BasePlotProps } from '../types';
 /**
  * PieDataItem is the type for each data item in the pie chart.
  * It includes the name of the sector and its corresponding value.
- * @param name The name of the sector.
+ * @param category The name of the sector.
  * @param value The value of the sector.
  */
-export type PieDataItem = {
-    name: string;
+type PieDataItem = {
+    category: string;
     value: number;
+    [key: string]: string | number;
 };
 /**
  * the props for the Pie
  * @param data pie data
  */
-export type PieProps = BaseChartProps<PieDataItem>;
+export type PieProps = BasePlotProps<PieDataItem> & Partial<PieConfig>;
 declare const Pie: (props: PieProps) => React.JSX.Element;
 export default Pie;

package/dist/esm/Pie/index.js

@@ -1,12 +1,12 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import { Pie as ADCPie } from '@ant-design/plots';
+import { round, sumBy } from 'lodash';
 import React from 'react';
+import { usePlotConfig } from "../ConfigProvider/hooks";
 
 /**
  * PieDataItem is the type for each data item in the pie chart.
  * It includes the name of the sector and its corresponding value.
- * @param name The name of the sector.
+ * @param category The name of the sector.
  * @param value The value of the sector.
  */
 
@@ -15,29 +15,28 @@ import React from 'react';
  * @param data pie data
  */
 
-var Pie = function Pie(props) {
-  var data = props.data,
-    className = props.className,
-    style = props.style;
-  var config = {
-    data: data,
-    angleField: 'value',
-    colorField: 'name',
-    state: {
-      selected: {
-        offset: 8
-      }
-    },
+var defaultConfig = function defaultConfig(props) {
+  var _props$data = props.data,
+    data = _props$data === void 0 ? [] : _props$data,
+    _props$angleField = props.angleField,
+    angleField = _props$angleField === void 0 ? 'value' : _props$angleField,
+    _props$colorField = props.colorField,
+    colorField = _props$colorField === void 0 ? 'category' : _props$colorField;
+  var sumValue = sumBy(data, angleField);
+  return {
+    angleField: angleField,
+    colorField: colorField,
     tooltip: function tooltip(d) {
       return {
-        name: d.name,
-        value: d.value
+        name: d[colorField],
+        value: d[angleField]
       };
     },
     label: {
-      text: 'value',
-      style: {
-        fontWeight: 'bold'
+      position: 'outside',
+      // text: angleField,
+      text: function text(d) {
+        return "".concat(d[colorField], ": ").concat(round(d[angleField] / sumValue * 100, 1), "%");
       }
     },
     legend: {
@@ -52,9 +51,9 @@ var Pie = function Pie(props) {
       }
     }
   };
-  return /*#__PURE__*/React.createElement(ADCPie, _extends({
-    className: className,
-    containerStyle: _objectSpread({}, style)
-  }, config));
+};
+var Pie = function Pie(props) {
+  var config = usePlotConfig('Pie', defaultConfig, props);
+  return /*#__PURE__*/React.createElement(ADCPie, config);
 };
 export default Pie;

package/dist/esm/PinMap/index.d.ts

@@ -1,12 +1,6 @@
 import { type FC } from 'react';
-import { BaseChartProps } from '../types';
-type GeoData = {
-    address: string;
-    lng: number;
-    lat: number;
-};
-export interface PinMapProps extends BaseChartProps<GeoData> {
-    className?: string;
-}
+import type { MapProps } from '../Map';
+import type { PinMap as PinMapType } from '../types/map';
+export type PinMapProps = PinMapType & MapProps;
 declare const PinMap: FC<PinMapProps>;
 export default PinMap;

package/dist/esm/PinMap/index.js

@@ -1,114 +1,23 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import { LarkMap, PointLayer, TextLayer } from '@antv/larkmap';
-import React, { useState } from 'react';
-window._AMapSecurityConfig = {
-  securityJsCode: '8803c38931b6fddc9bbfeee69df8824d'
-};
-var CONFIG = {
-  mapType: 'Gaode',
-  mapOptions: {
-    style: 'normal',
-    center: [120.210792, 30.246026],
-    zoom: 12,
-    maxZoom: 18,
-    token: 'f0230f884bbd54e2913c890cdf45aa7e'
-  }
-};
-
-// const SVG_BLOB = new Blob(
-//   [
-//     `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="48px" width="48px" viewBox="0 0 1024 1024"><path d="M512 490.666667C453.12 490.666667 405.333333 442.88 405.333333 384 405.333333 325.12 453.12 277.333333 512 277.333333 570.88 277.333333 618.666667 325.12 618.666667 384 618.666667 442.88 570.88 490.666667 512 490.666667M512 85.333333C346.88 85.333333 213.333333 218.88 213.333333 384 213.333333 608 512 938.666667 512 938.666667 512 938.666667 810.666667 608 810.666667 384 810.666667 218.88 677.12 85.333333 512 85.333333Z" fill="#6808FE"></path></svg>`,
-//   ],
-//   { type: 'image/svg+xml;charset=utf-8' },
-// );
-// const SVG_URL = URL.createObjectURL(SVG_BLOB);
-var SVG_URL = 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*yVhwTrhcKZAAAAAAAAAAAAAADmJ7AQ/original';
-var makerLayerOptions = {
-  autoFit: false,
-  shape: 'marker',
-  size: 22,
-  style: {}
-};
-var labelLayerOptions = {
-  autoFit: false,
-  field: 'address',
-  style: {
-    fill: '#fff',
-    opacity: 1,
-    fontSize: 16,
-    fontWeight: 'bold',
-    stroke: '#6808FE',
-    strokeWidth: 8,
-    textAllowOverlap: false,
-    padding: [2, 2],
-    textOffset: [0, 50]
-  }
-};
-function bbox(data) {
-  var bounds = [Infinity, Infinity, -Infinity, -Infinity];
-  data.forEach(function (_ref) {
-    var lng = _ref.lng,
-      lat = _ref.lat;
-    if (bounds[0] > lng) {
-      bounds[0] = lng;
-    }
-    if (bounds[1] > lat) {
-      bounds[1] = lat;
-    }
-    if (bounds[2] < lng) {
-      bounds[2] = lng;
-    }
-    if (bounds[3] < lat) {
-      bounds[3] = lat;
-    }
-  });
-  return bounds;
-}
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["data", "markerStyle"];
+import React, { useMemo } from 'react';
+import { useMapConfig } from "../ConfigProvider/hooks";
+import Map from "../Map";
+import { formatMakerStyle } from "../utils/map";
 var PinMap = function PinMap(props) {
-  var className = props.className,
-    style = props.style,
-    _props$data = props.data,
-    data = _props$data === void 0 ? [] : _props$data;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    loadedImages = _useState2[0],
-    setLoadedImages = _useState2[1];
-  var _useState3 = useState({
-      data: data,
-      parser: {
-        type: 'json',
-        x: 'lng',
-        y: 'lat'
-      }
-    }),
-    _useState4 = _slicedToArray(_useState3, 1),
-    source = _useState4[0];
-  var onSceneLoaded = function onSceneLoaded(scene) {
-    scene.addImage('marker', SVG_URL).then(function () {
-      setLoadedImages(true);
-    });
-    if (!data.length) return;
-    var bounds = bbox(data);
-    if (scene.getType() === 'amap') {
-      var _scene$map;
-      (_scene$map = scene.map) === null || _scene$map === void 0 || _scene$map.setBounds(bounds, true, [50, 50, 50, 50]);
-    } else {
-      scene.fitBounds([[bounds[0], bounds[1]], [bounds[2], bounds[3]]]);
-    }
-  };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LarkMap, _extends({
-    className: className,
-    style: _objectSpread({
-      height: 300
-    }, style)
-  }, CONFIG, {
-    onSceneLoaded: onSceneLoaded
-  }), loadedImages && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PointLayer, _extends({}, makerLayerOptions, {
-    source: source
-  })), /*#__PURE__*/React.createElement(TextLayer, _extends({}, labelLayerOptions, {
-    source: source
-  })))));
+  var _useMapConfig = useMapConfig('PinMap', props),
+    _useMapConfig$data = _useMapConfig.data,
+    data = _useMapConfig$data === void 0 ? [] : _useMapConfig$data,
+    _useMapConfig$markerS = _useMapConfig.markerStyle,
+    markerStyle = _useMapConfig$markerS === void 0 ? {} : _useMapConfig$markerS,
+    rest = _objectWithoutProperties(_useMapConfig, _excluded);
+  var markerdata = useMemo(function () {
+    return formatMakerStyle(data, markerStyle);
+  }, [data, markerStyle]);
+  return /*#__PURE__*/React.createElement(Map, _extends({
+    markers: markerdata,
+    includePoints: markerdata
+  }, rest));
 };
 export default PinMap;

package/dist/esm/Radar/index.d.ts

@@ -0,0 +1,11 @@
+import type { RadarConfig } from '@ant-design/plots';
+import React from 'react';
+import type { BasePlotProps } from '../types';
+export type RadarDataItem = {
+    name: string;
+    value: number;
+    [key: string]: string | number;
+};
+export type RadarProps = BasePlotProps<RadarDataItem> & Partial<RadarConfig>;
+declare const Radar: (props: RadarProps) => React.JSX.Element;
+export default Radar;

package/dist/esm/Radar/index.js

@@ -0,0 +1,54 @@
+import { Radar as ADCRadar } from '@ant-design/plots';
+import { get } from 'lodash';
+import React from 'react';
+import { usePlotConfig } from "../ConfigProvider/hooks";
+var defaultConfig = function defaultConfig(props) {
+  var data = props.data,
+    _props$xField = props.xField,
+    xField = _props$xField === void 0 ? 'name' : _props$xField,
+    _props$yField = props.yField,
+    yField = _props$yField === void 0 ? 'value' : _props$yField;
+  var hasGroupField = get(data, '[0].group') !== undefined;
+  return {
+    xField: xField,
+    yField: yField,
+    colorField: hasGroupField ? 'group' : undefined,
+    area: {
+      style: {
+        fillOpacity: 0.5
+      }
+    },
+    scale: {
+      x: {
+        padding: 0.6,
+        align: 0
+      },
+      y: {
+        nice: true
+      }
+    },
+    axis: {
+      x: {
+        title: false,
+        grid: true
+      },
+      y: {
+        zIndex: 1,
+        title: false,
+        gridConnect: 'line',
+        gridLineWidth: 1
+      }
+    },
+    tooltip: function tooltip(d) {
+      return {
+        name: d[xField],
+        value: d[yField]
+      };
+    }
+  };
+};
+var Radar = function Radar(props) {
+  var config = usePlotConfig('Radar', defaultConfig, props);
+  return /*#__PURE__*/React.createElement(ADCRadar, config);
+};
+export default Radar;

package/dist/esm/Scatter/index.d.ts

@@ -0,0 +1,11 @@
+import type { ScatterConfig } from '@ant-design/plots';
+import React from 'react';
+import type { BasePlotProps } from '../types';
+type ScatterDataItem = {
+    x: number;
+    y: number;
+    [key: string]: string | number;
+};
+export type ScatterProps = BasePlotProps<ScatterDataItem> & Partial<ScatterConfig>;
+declare const Scatter: (props: ScatterProps) => React.JSX.Element;
+export default Scatter;

package/dist/esm/Scatter/index.js

@@ -0,0 +1,30 @@
+import { Scatter as ADCScatter } from '@ant-design/plots';
+import { get } from 'lodash';
+import React from 'react';
+import { usePlotConfig } from "../ConfigProvider/hooks";
+var defaultConfig = function defaultConfig(props) {
+  var data = props.data,
+    _props$xField = props.xField,
+    xField = _props$xField === void 0 ? 'x' : _props$xField,
+    _props$yField = props.yField,
+    yField = _props$yField === void 0 ? 'y' : _props$yField;
+  var axisXTitle = get(props, 'axis.x.title');
+  var axisYTitle = get(props, 'axis.y.title');
+  return {
+    data: data,
+    xField: xField,
+    yField: yField,
+    tooltip: [{
+      channel: 'x',
+      name: axisXTitle || 'x'
+    }, {
+      channel: 'y',
+      name: axisYTitle || 'y'
+    }]
+  };
+};
+var Scatter = function Scatter(props) {
+  var config = usePlotConfig('Scatter', defaultConfig, props);
+  return /*#__PURE__*/React.createElement(ADCScatter, config);
+};
+export default Scatter;

package/dist/esm/Text/VisText.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { VisTextProps } from './types';
+declare const VisText: (props: VisTextProps) => React.JSX.Element;
+export default VisText;

package/dist/esm/Text/VisText.js

@@ -0,0 +1,34 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { Tooltip, Typography } from 'antd';
+import { pick, toString } from 'lodash';
+import React from 'react';
+import { useComponentGlobalConfig } from "../ConfigProvider/hooks";
+import { STATICS_KEY } from "./config";
+var Text = Typography.Text;
+function renderPrefixSuffix(symbol, staticsConfig, props) {
+  if (!symbol) return null;
+  var Component = staticsConfig === null || staticsConfig === void 0 ? void 0 : staticsConfig[symbol];
+  if (Component) return /*#__PURE__*/React.createElement(Component, props);
+  return symbol;
+}
+var VisText = function VisText(props) {
+  var children = props.children,
+    className = props.className,
+    style = props.style,
+    type = props.type,
+    origin = props.origin;
+  var textConfig = useComponentGlobalConfig('VisText');
+  var encoding = type ? textConfig === null || textConfig === void 0 ? void 0 : textConfig[type] : {};
+  var staticsConfig = textConfig === null || textConfig === void 0 ? void 0 : textConfig[STATICS_KEY];
+  return (
+    /*#__PURE__*/
+    // TODO  @羽熙 暂时简单处理 tooltip 直接显示 origin，后续可以根据 origin 类型分类处理
+    React.createElement(Tooltip, {
+      title: toString(origin)
+    }, /*#__PURE__*/React.createElement(Text, {
+      className: className,
+      style: _objectSpread(_objectSpread({}, style), pick(encoding, ['color', 'backgroundColor', 'fontWeight']))
+    }, renderPrefixSuffix(encoding === null || encoding === void 0 ? void 0 : encoding.prefix, staticsConfig, props), children, renderPrefixSuffix(encoding === null || encoding === void 0 ? void 0 : encoding.suffix, staticsConfig, props)))
+  );
+};
+export default VisText;

package/dist/esm/Text/config.d.ts

@@ -0,0 +1,18 @@
+import type { CSSProperties } from 'react';
+import type { VisTextProps } from './types';
+declare const INNER_ENTITY_TYPES: readonly ["metric_name", "metric_value", "other_metric_value", "time_desc", "dim_value", "trend_desc", "delta_value", "ratio_value", "delta_value_pos", "delta_value_neg", "ratio_value_pos", "ratio_value_neg", "proportion", "contribute_ratio"];
+export type InnerEntityType = (typeof INNER_ENTITY_TYPES)[number];
+export type TextEntityType = InnerEntityType | string;
+export type TextEncoding = Partial<Pick<CSSProperties, 'color' | 'backgroundColor' | 'fontWeight'> & {
+    /** 前缀 */
+    prefix: string;
+    /** 后缀 */
+    suffix: string;
+}>;
+export declare const STATICS_KEY: "__statics";
+/** 文本组件配置信息 */
+export type TextConfig = Record<InnerEntityType & string, TextEncoding> & {
+    [STATICS_KEY]: Record<string, React.FC<VisTextProps>>;
+};
+export declare const DEFAULT_VIS_TEXT_CONFIG: TextConfig;
+export {};