import { ComponentMetadata, Snippet } from "@alilc/lowcode-types";
import { chartWrap } from "../common/chartWrap";

const LineChartMeta: ComponentMetadata = {
  componentName: "Line",
  title: "折线图",
  category: "图表",
  group: "精选组件",
  docUrl: "",
  screenshot: "",
  devMode: "proCode",
  npm: {
    package: "@pisell/charts-materials",
    version: "1.0.0",
    exportName: "Line",
    main: "src/index.ts",
    destructuring: true,
    subName: "",
  },
  props: [
    // 数据
    {
      name: "data",
      type: "group",
      display: "accordion",
      title: {
        label: "数据",
      },
      items: [
        {
          name: "data",
          title: "图表数据",
          setter: "JsonSetter",
        },
        {
          name: "xField",
          title: {
            label: "x轴字段名",
            tip: "x 方向映射对应的数据字段名",
          },
          setter: "StringSetter",
        },
        {
          name: "yField",
          title: {
            label: "y轴字段名",
            tip: "y 方向映射所对应的数据字段名",
          },
          setter: "StringSetter",
        },
        {
          name: "seriesField",
          title: {
            label: "分组字段",
            tip: "用于同时看一个维度中不同情况的指标需求",
          },
          setter: "StringSetter",
        },
        {
          title: "others",
          name: "others",
          setter: ["JsonSetter","VariableSetter"],
        },
      ],
    },

    // 图标容器
    chartWrap,
    // 图形属性
    {
      name: "",
      type: "group",
      display: "accordion",
      title: {
        label: "图形属性",
      },
      items: [
        {
          name: "color",
          title: "颜色",
          setter: [
            "ColorSetter",
            {
              componentName: "ArraySetter",
              props: {
                itemSetter: {
                  componentName: "ColorSetter",
                },
              },
            },
          ],
        },
        {
          name: "lineStyle.lineWidth",
          title: "粗细",
          setter: "NumberSetter",
        },
        {
          name: "smooth",
          title: "平滑",
          setter: "BoolSetter",
        },
        {
          name: "point",
          title: "显示点",
          setter: "BoolSetter",
        },
        {
          name: "label",
          title: "显示标签",
          setter: "BoolSetter",
        },
        {
          name: "autoFit",
          title: "自适应容器宽高",
          setter: "BoolSetter",
        },
      ],
    },
  ],
  configure: {},
};
const snippets: Snippet[] = [
  {
    title: "折线图",
    screenshot:
      "https://img.alicdn.com/imgextra/i2/O1CN01ChN5mm1txOQnh6kTh_!!6000000005968-55-tps-56-56.svg",
    schema: {
      componentName: "Line",
      props: {
        data: [
          { year: "1991", value: 72345678 },
          { year: "1992", value: 4321132 },
          { year: "1993", value: 33121112.5 },
          { year: "1994", value: 45227221 },
          { year: "1995", value: 4321221.9 },
          { year: "1996", value: 6322121 },
          { year: "1997", value: 78312213 },
          { year: "1998", value: 4192312 },
          { year: "1999", value: 6212332 },
          { year: "2000", value: 3192312 },
        ],
        xField: "year",
        yField: "value",
        autoFit: true,
        label: {
          visible: true,
        },
      },
    },
  },
];

export default {
  ...LineChartMeta,
  snippets,
};