admin-ui/src/utils/dataUiOptions.ts

export function getTheme() {
  // ("zen" | "hack" | "concrete" | "")
  return localStorage.isDark ? 'hack' : ''
}

export function getLineData({ xAxis = [] as any[], datas = [] as number[][], legend = [] as string[], suffix = '', width = 1000, height = 400, responsive = false, zoom = false, modulo = 10, padding = 30, useArea = true }) {
  const colors = ['#6376DD', '#FBBB04']

  const maxVal = Math.max(...datas.flat())
  // 设置最大值为 接近这个数值并且比这个数值稍大的整数
  const radio = 10 ** (maxVal.toString().length - 2)
  const max = Math.ceil(maxVal * 1.4 / radio) * radio
  const config = {
    theme: getTheme(),
    responsive,
    "chart": {
      "fontFamily": "inherit",
      "paddingTop": 0,
      height,
      width,
      "zoom": {
        "show": zoom
      },
      "padding": {
        "top": 30,
        "right": padding,
        "bottom": 34,
        "left": padding
      },
      "grid": {
        "position": "start",
        "labels": {
          "show": true,
          "fontSize": 12,
          "axis": {
            "fontSize": 12
          },
          "yAxis": {
            "commonScaleSteps": 10,
            "scaleMin": 0,
            "scaleMax": max,
          },
          "xAxisLabels": {
            "show": true,
            "values": xAxis,
            "fontSize": 12,
            "showOnlyFirstAndLast": false,
            "showOnlyAtModulo": true,
            modulo,
            "yOffset": 8
          }
        }
      },
      "labels": {
        "fontSize": 12,
        "prefix": "",
        suffix
      },
      "legend": {
        "show": legend.length > 1,
        "fontSize": 12
      },
      "title": {
        "text": " ",
        "show": false
      },
      "userOptions": {
        "show": false
      },
    },
    "line": {
      "radius": 3,
      "useGradient": true,
      "strokeWidth": 2,
      "labels": {},
      "area": {
        "useGradient": true,
        "opacity": "26"
      }
    },
  }

  const dataset = datas.map((data, i) => {
    return {
      "name": legend[i],
      "series": data,
      "color": colors[i],
      "type": "line",
      "shape": "circle",
      "useArea": useArea,
      "useProgression": false,
      "dataLabels": true,
      "smooth": true,
      "dashed": false,
      "useTag": "none"
    }
  })

  return { config, dataset }
}

export function getBarData({ xAxis = [] as any[], datas = [] as number[][], legend = [] as string[], suffix = '', width = 1000, height = 400, responsive = false, zoom = false, modulo = 10, padding = 30, colors = ['#6376DD', '#FBBB04'] }) {
  const config = {
    theme: getTheme(),
    responsive,
    "chart": {
      "fontFamily": "inherit",
      "paddingTop": 0,
      height,
      width,
      "zoom": {
        "show": zoom
      },
      "padding": {
        "top": 20,
        "right": padding,
        "bottom": 20,
        "left": padding
      },
      "grid": {
        "position": "middle",
        "labels": {
          "show": true,
          "fontSize": 16,
          "axis": {
            "fontSize": 16
          },
          "yAxis": {
            "commonScaleSteps": 10,
            "scaleMin": 0,
          },
          "xAxisLabels": {
            "show": true,
            "values": xAxis,
            "fontSize": 16,
            "showOnlyFirstAndLast": false,
            "showOnlyAtModulo": true,
            modulo: xAxis.length < modulo ? xAxis.length : modulo,
            "yOffset": 2
          }
        }
      },
      "labels": {
        "fontSize": 16,
        "prefix": "",
        suffix
      },
      "legend": {
        "show": legend.length > 1,
        "fontSize": 16
      },
      "title": {
        "text": " ",
        "show": false
      },
      "userOptions": {
        "show": false
      },
    },
    "bar": {
      "borderRadius": 2,
      "useGradient": true,
      "periodGap": 0.5,
      "border": {
        "useSerieColor": false,
        "strokeWidth": 1,
        "stroke": "#FFFFFFff"
      },
      "labels": {
        "show": true,
        "offsetY": -5,
        "rounding": 0,
        "color": "#1A1A1Aff",
        "formatter": null
      },
      "serieName": {
        "show": false,
        "offsetY": -6,
        "useAbbreviation": true,
        "abbreviationSize": 3,
        "useSerieColor": true,
        "color": "#1A1A1Aff",
        "bold": false
      }
    },
  }

  const dataset = datas.map((data, i) => {
    return {
      "name": legend[i],
      "series": data,
      "color": colors[i],
      "type": "bar",
      scaleSteps: 10,
      scaleLabel: "Blue circles"
    }
  })

  return { config, dataset }
}


export function getLine2Data({ xAxis = [] as any[], datas = [] as number[][], legend = [] as string[], suffix = '', width = 500, height = 300, color = 'rgb(1, 191, 236)' }) {

  const max = 100
  const config = {
    theme: getTheme(),
    "responsive": false,
    "chart": {
      "fontFamily": "inherit",
      "paddingTop": 0,
      "backgroundColor": "transparent",
      "color": "#888888",
      height,
      width,
      "zoom": {
        "show": false
      },
      "padding": {
        "top": 10,
        "right": 24,
        "bottom": 30,
        "left": 24
      },
      "grid": {
        "position": "start",
        "labels": {
          "color": "#888888",
          "fontSize": 14,
          "axis": {
            "fontSize": 14
          },
          "yAxis": {
            "commonScaleSteps": 10,
            "scaleMin": 0,
            "scaleMax": max,
          },
          "xAxisLabels": {
            "show": true,
            "color": "#888888",
            "values": xAxis,
            "fontSize": 14,
            "modulo": 112,
            "showOnlyFirstAndLast": false,
            "yOffset": 8
          }
        }
      },
      "labels": {
        "fontSize": 14,
        "prefix": "",
        suffix
      },
      "legend": {
        "show": legend.length > 1,
        "color": "#888888",
        "fontSize": 14
      },
      "title": {
        "text": " ",
        "show": false
      },
      "userOptions": {
        "show": false
      }
    },
    "line": {
      "radius": 3,
      "useGradient": true,
      "strokeWidth": 2,
      "labels": {
        "rounding": 22,
      },
      "area": {
        "useGradient": true,
        "opacity": "26"
      }
    },
  }

  const dataset = datas.map((data, i) => {
    return {
      "name": legend[i],
      "series": data,
      "color": color,
      "type": "line",
      "shape": "circle",
      "useArea": true,
      "useProgression": false,
      "dataLabels": true,
      "smooth": true,
      "dashed": false,
      "useTag": "none"
    }
  })

  return { config, dataset }
}

export function getPieData({ datas = [] as number[][], legend = [] as string[], types = [] as number[], width = 500, height = 1300, responsive = false }) {

  const colorList = ['#4285F4', '#2ecc71', '#FBBB04', '#e67e22', '#FF0000'].reverse()

  const config = {
    theme: getTheme(),
    "responsive": responsive,
    "backgroundColor": "transparent",
    style: {
      "backgroundColor": "transparent",
      chart: {
        "fontFamily": "inherit",
        "paddingTop": 0,
        "backgroundColor": "transparent",
        height,
        width,
        "padding": {
          "top": 0,
          "right": 0,
          "bottom": 0,
          "left": 0
        },
        "title": {
          "text": " ",
          "show": false,
        },
        "legend": {
          "show": true,
          "bold": false,
          "backgroundColor": "transparent",
          "fontSize": 14,
          "roundingValue": 0,
          "roundingPercentage": 0
        },
        "layout": {
          "labels": {
            value: { rounding: 0, show: true, formatter: null },
            percentage: {
              bold: true,
              fontSize: 14,
              rounding: 0,
              formatter: null,
            },
            name: { bold: false, fontSize: 14 },
            "hollow": {
              "total": {
                "fontSize": 18,
                "text": "总计",
                "value": {
                  "fontSize": 18,
                }
              },
              "average": {
                "show": false,
              },
            },
          },
        },
      },
    },
    "userOptions": {
      "show": false
    },
  }

  // const dataset = [{ "name": "Series 1", "values": [100] }, { "name": "Series 2", "values": [50] }, { "name": "Series 3", "values": [25] }, { "name": "Series 4", "values": [12.5] }]

  const dataset = datas.map((data, i) => {
    return { "name": legend[i], "values": data, color: colorList[types[i] - 1] }
  })

  return { config, dataset }
}

export function getPieSmallData({ datas = [] as number[][], legend = [] as string[], colors = ['#2ecc71', '#4285F4', '#FBBB04', '#FF0000', '#e67e22'].reverse() as string[], width = 500, height = 1300, responsive = false }) {

  const config = {
    theme: getTheme(),
    "responsive": responsive,
    "backgroundColor": "transparent",
    style: {
      "backgroundColor": "transparent",
      chart: {
        "fontFamily": "inherit",
        "paddingTop": 0,
        "gradientIntensity": "0",
        "backgroundColor": "transparent",
        height,
        width,
        "padding": {
          "top": 0,
          "right": 0,
          "bottom": 0,
          "left": 0
        },
        "title": {
          "text": "",
          "show": false,
        },
        "legend": {
          "show": true,
          "bold": false,
          "backgroundColor": "transparent",
          "fontSize": 14,
          "roundingValue": 0,
          "roundingPercentage": 0
        },
        "layout": {
          "donut": {
            "strokeWidth": "40",
            "borderWidth": "2",
            "useShadow": false,
          },
          "labels": {
            "dataLabels": {
              "show": true,
              "useLabelSlots": false,
              "hideUnderValue": 0,
              "prefix": "",
              "suffix": ""
            },
            value: { rounding: 0, show: true, formatter: null },
            percentage: {
              bold: true,
              fontSize: 14,
              rounding: 0,
              formatter: null,
            },
            name: { bold: false, fontSize: 14 },
            "hollow": {
              "total": {
                "fontSize": 18,
                "text": "总计",
                "value": {
                  "fontSize": 18,
                }
              },
              "average": {
                "show": false,
              },
            },
          },
        },
      },
    },
    "userOptions": {
      "show": false
    },
  }

  // const dataset = [{ "name": "Series 1", "values": [100] }, { "name": "Series 2", "values": [50] }, { "name": "Series 3", "values": [25] }, { "name": "Series 4", "values": [12.5] }]

  const dataset = datas.map((data, i) => {
    return { "name": legend[i], "values": data, color: colors[i] }
  })

  return { config, dataset }
}

export function getGaugeData({ value = 50 }) {

  const config = {
    theme: getTheme(),
    "responsive": false,
    "customPalette": [],
    "style": {
      "fontFamily": "inherit",
      "chart": {
        "backgroundColor": "#FFFFFFff",
        "color": "#1A1A1Aff",
        "animation": {
          "use": true,
          "speed": 0.5,
          "acceleration": 0.5
        },
        "layout": {
          "track": {
            "size": 1,
            "useGradient": true,
            "gradientIntensity": 20
          },
          "markers": {
            "color": "#1A1A1Aff",
            "bold": true,
            "fontSizeRatio": 1,
            "offsetY": 0,
            "roundingValue": 0
          },
          "pointer": {
            "type": "pointy",
            "size": 1,
            "stroke": "#1A1A1Aff",
            "strokeWidth": 12,
            "useRatingColor": true,
            "color": "#CCCCCCff",
            "circle": {
              "radius": 10,
              "stroke": "#1A1A1Aff",
              "strokeWidth": 2,
              "color": "#FFFFFFff"
            }
          }
        },
        "legend": {
          "fontSize": 48,
          "prefix": "",
          "suffix": "%",
          "roundingValue": 2,
          "showPlusSymbol": false,
          "useRatingColor": true,
          "color": "#1A1A1Aff",
          "formatter": null
        },
        "title": {
          "text": " ",
          "show": true,
        }
      }
    },
    "userOptions": {
      "show": false,
    },
    "translations": {
      "base": "Base"
    }
  }

  const dataset = {
    "series": [{ "from": 0, "to": 25, "color": "#4DABF7", "id": "111" }, { "from": 25, "to": 50, "color": "#69DB7C", "id": "111" }, { "from": 50, "to": 75, "color": "#FFA94D", "id": "111" }, { "from": 75, "to": 100, "color": "#FF6B6B", "id": "222" }],
    value
  }


  return { config, dataset }
}