lowcoder-map-component 0.1.1

package/src/utils/echarts.util.tsx

@@ -0,0 +1,822 @@
+import { createSeriesListComp } from "@/components/SeriesComp";
+import {
+  NonUIChartDataType,
+  UIChartDataType,
+} from "@/comps/Linecharts/constants";
+import { calcXYConfig } from "@/configs/cartesianAxisConfig";
+import {
+  calculateChartRealSize,
+  getPolarConfig,
+  getSeriesConfig,
+} from "@/configs/echartConfig";
+import { EchartsLabelConfig } from "@/configs/echartsLabelConfig";
+import { EchartsLegendConfig } from "@/configs/echartsLegendConfig";
+import { EchartsTitleConfig } from "@/configs/echartsTitleConfig";
+import { EchartsTitleVerticalConfig } from "@/configs/echartsTitleVerticalConfig";
+import { LegendConfig } from "@/configs/legendConfig";
+import {
+  applyRowLimit,
+  CharOptionCompType,
+  EchartsOptionComp,
+  EndTimeControl,
+  RowLimitConfig,
+  ShowAxisControl,
+  ShowXAxisControl,
+  ShowYAxisControl,
+  StartTimeControl,
+  TimeGranularityControl,
+  TimeRangeControl,
+  UIEventOptions,
+  XAxisConfig,
+  XAxisDirectionOptions,
+  YAxisConfig,
+} from "@/controls";
+import { i18nObjs, trans } from "@/i18n/comps";
+import { EChartsOption } from "echarts-for-react";
+import {
+  BoolControl,
+  clickEvent,
+  ColorControl,
+  dropdownControl,
+  EchartDefaultChartStyle,
+  EchartDefaultTextStyle,
+  eventHandlerControl,
+  jsonControl,
+  list,
+  MultiCompBuilder,
+  NumberControl,
+  RecordConstructorToView,
+  stateComp,
+  StringControl,
+  styleControl,
+  toArray,
+  toJSONObject,
+  toJSONObjectArray,
+  toObject,
+  uiChildren,
+  withDefault,
+} from "lowcoder-sdk";
+import { getBaseConfig } from "../configs/baseConfig";
+import { transformData } from "./dataTransform.util";
+import { chartStyleWrapper } from "./style.util";
+import { processTimeData } from "./timeProcessing.util";
+import { calculateTrendline } from "./trendline.util";
+
+// ============================================================================
+// TYPES & INTERFACES
+// ============================================================================
+export type ChartSize = { w: number; h: number };
+
+export type AvailableQueries = {
+  [queryName: string]: {
+    data: any;
+    run: (params?: any) => Promise<any>;
+    isLoading: boolean;
+    error?: any;
+  };
+};
+
+export type DataKeys = {
+  label: any;
+  value: any;
+};
+
+export type InitPropsType = RecordConstructorToView<
+  typeof chartUiChildrenMap
+> & {
+  chartConfig?: any;
+  title?: string;
+  data?: ReturnType<typeof jsonControl>;
+  defaultData?: ReturnType<typeof jsonControl>;
+  series?: typeof createSeriesListComp;
+  chartType?: string;
+  type?: string;
+  type2?: string;
+  yAxisKey?: string;
+  yAxis2Key?: string;
+  yAxisName?: string;
+  yAxis2Name?: string;
+  xAxisStyle?: ReturnType<typeof styleControl>;
+  yAxisStyle?: ReturnType<typeof styleControl>;
+  yAxis2Style?: ReturnType<typeof styleControl>;
+  regionValue?: string;
+  regionName?: string;
+  value?: string;
+  regionMapType?: string;
+  borderColor?: string;
+  borderWidth?: string;
+  areaColor?: any;
+  hoverColor?: string;
+  sortBy?: string;
+  sortOrder?: string;
+  zoomLevel?: string;
+  width?: string;
+  height?: string;
+  tooltipItems?: any[];
+  columns?: any[];
+  showMaxPoint?: boolean;
+  dataZoom?: string;
+};
+
+export type EChartPropsType = RecordConstructorToView<
+  typeof chartUiChildrenMap & InitPropsType
+>;
+
+// ============================================================================
+// CONSTANTS
+// ============================================================================
+export const chartModeOptions = [
+  {
+    label: "ECharts JSON",
+    value: "json",
+  },
+] as const;
+
+const NOT_AXIS_CHART_SET: Set<CharOptionCompType> = new Set([
+  "pie",
+  "map",
+  "mapv2"
+] as const);
+const notAxisChartSubtypeSet: Set<string> = new Set(["polar"] as const);
+
+// ============================================================================
+// NO DATA CONFIGURATIONS
+// ============================================================================
+export const noDataPieChartConfig: EChartsOption = {
+  animation: false,
+  tooltip: { show: false },
+  legend: {
+    formatter: trans("chart.unknown"),
+    top: "bottom",
+    selectedMode: false,
+  },
+  color: ["#B8BBCC", "#CED0D9", "#DCDEE6", "#E6E6EB"],
+  series: [
+    {
+      type: "pie",
+      radius: "35%",
+      center: ["25%", "50%"],
+      silent: true,
+      label: { show: false },
+      data: [
+        { name: "1", value: 70 },
+        { name: "2", value: 68 },
+        { name: "3", value: 48 },
+        { name: "4", value: 40 },
+      ],
+    },
+    {
+      type: "pie",
+      radius: "35%",
+      center: ["75%", "50%"],
+      silent: true,
+      label: { show: false },
+      data: [
+        { name: "1", value: 70 },
+        { name: "2", value: 68 },
+        { name: "3", value: 48 },
+        { name: "4", value: 40 },
+      ],
+    },
+  ],
+};
+
+export const noDataAxisConfig: EChartsOption = {
+  animation: false,
+  xAxis: {
+    type: "category",
+    name: trans("chart.noData"),
+    nameLocation: "middle",
+    data: [],
+    axisLine: { lineStyle: { color: "#8B8FA3" } },
+  },
+  yAxis: {
+    type: "value",
+    axisLabel: { color: "#8B8FA3" },
+    splitLine: { lineStyle: { color: "#F0F0F0" } },
+  },
+  tooltip: { show: false },
+  series: [
+    {
+      data: [700],
+      type: "line",
+      itemStyle: { opacity: 0 },
+    },
+  ],
+};
+
+// ============================================================================
+// COMPONENT CONFIGURATIONS
+// ============================================================================
+const areaPiecesChildrenMap = {
+  color: ColorControl,
+  from: StringControl,
+  to: StringControl,
+  dataIndex: StringControl,
+};
+
+const AreaPiecesTmpComp = new MultiCompBuilder(
+  areaPiecesChildrenMap,
+  (props) => props
+)
+  .setPropertyViewFn((children) => (
+    <>
+      {children.color.propertyView({ label: trans("lineChart.color") })}
+      {children.from.propertyView({ label: trans("lineChart.from") })}
+      {children.to.propertyView({ label: trans("lineChart.to") })}
+    </>
+  ))
+  .build();
+
+export const chartUiModeChildren = {
+  animationDuration: withDefault(NumberControl, 1000),
+  areaPieces: list(AreaPiecesTmpComp),
+  availableQueries: stateComp<Array<AvailableQueries>>([]),
+  bottom: withDefault(NumberControl, trans("chart.defaultBottom")),
+  chartStyle: styleControl(EchartDefaultChartStyle, "chartStyle"),
+  data: jsonControl(toJSONObjectArray, []),
+  provinceData: jsonControl(toJSONObjectArray, []),
+  defaultStyle: jsonControl(toJSONObject, []),
+  dataQueryKey: withDefault(StringControl, "none"),
+  dataKeys: stateComp<Array<DataKeys[]>>([]),
+  eChartConfig: EchartsOptionComp,
+  echartsLabelConfig: EchartsLabelConfig,
+  echartsLegendConfig: EchartsLegendConfig,
+  echartsOption: jsonControl(toObject, i18nObjs.defaultEchartsJsonOption),
+  echartsTitle: withDefault(StringControl, trans("chart.defaultTitle")),
+  echartsTitleConfig: EchartsTitleConfig,
+  echartsTitleVerticalConfig: EchartsTitleVerticalConfig,
+  endTime: EndTimeControl,
+  left: withDefault(NumberControl, trans("chart.defaultLeft")),
+  legendConfig: LegendConfig,
+  legendStyle: styleControl(EchartDefaultTextStyle, "legendStyle"),
+  legendVisibility: withDefault(BoolControl, true),
+  mode: dropdownControl(chartModeOptions, "ui"),
+  onUIEvent: eventHandlerControl(UIEventOptions),
+  right: withDefault(NumberControl, trans("chart.defaultRight")),
+  rowLimitConfig: RowLimitConfig,
+  showAxis: ShowAxisControl,
+  showXAxis: ShowXAxisControl,
+  showYAxis: ShowYAxisControl,
+  startTime: StartTimeControl,
+  timeColumn: StringControl,
+  timeFormat: withDefault(StringControl, "DD-MM-YYYY HH:mm"),
+  timeGranularity: TimeGranularityControl,
+  timeRange: TimeRangeControl,
+  titleStyle: styleControl(EchartDefaultTextStyle, "titleStyle"),
+  tooltip: withDefault(BoolControl, true),
+  top: withDefault(NumberControl, trans("chart.defaultTop")),
+  xAxisData: jsonControl(toArray, []),
+  xAxisDirection: dropdownControl(XAxisDirectionOptions, "horizontal"),
+  xAxisKey: StringControl,
+  xConfig: XAxisConfig,
+  yConfig: YAxisConfig,
+};
+
+export const echartProps = {
+  lastInteractionData: stateComp<Array<UIChartDataType> | NonUIChartDataType>(
+    []
+  ),
+  selectedPoints: stateComp<Array<UIChartDataType>>([]),
+  onEvent: eventHandlerControl([clickEvent] as const),
+  ...chartUiModeChildren,
+};
+
+const chartUiChildrenMap = uiChildren(echartProps);
+
+// ============================================================================
+// UTILITY FUNCTIONS
+// ============================================================================
+export function isAxisChart(
+  type: CharOptionCompType,
+  subtype: string
+): boolean {
+  return !NOT_AXIS_CHART_SET.has(type) && !notAxisChartSubtypeSet.has(subtype);
+}
+
+// ============================================================================
+// DATA PROCESSING FUNCTIONS
+// ============================================================================
+function extractValueKeys(data: any[]): string[] {
+  if (!data?.length) return [];
+  const keys = Object.keys(data[0]);
+  return keys.filter((key) => key !== "date");
+}
+
+function getSeriesColumnNames(
+  chartType: string,
+  series: any[],
+  valueKeys: string[]
+): string[] {
+  if (chartType === "total") return valueKeys;
+
+  return series
+    .filter((s: any) => !s.getView().hide)
+    .map((s: any) => s.getView().columnName);
+}
+
+function processChartData(
+  props: EChartPropsType,
+  data: any[],
+  seriesColumnNames: string[]
+): any[] {
+  const { timeColumn, xAxisKey, yConfig, rowLimitConfig, sortBy, sortOrder } =
+    props;
+
+  // Time processing
+  const hasValidTime =
+    timeColumn && data.some((d: any) => d[timeColumn] !== undefined);
+  let transformedData = hasValidTime
+    ? processTimeData(
+      { ...props, timeFormat: props.timeFormat },
+      data,
+      seriesColumnNames
+    )
+    : data;
+
+  // Data transformation
+  const shouldTransform = !["category", "time", "value"].includes(yConfig.type);
+  transformedData = shouldTransform
+    ? transformData(transformedData, xAxisKey, seriesColumnNames)
+    : applyRowLimit(transformedData, rowLimitConfig.rowLimit);
+
+  // Sorting
+  if (sortBy) {
+    transformedData = [...transformedData].sort((a, b) => {
+      const va = a[sortBy] ?? 0;
+      const vb = b[sortBy] ?? 0;
+      return sortOrder === "asc" ? va - vb : vb - va;
+    });
+  }
+
+  return transformedData;
+}
+
+// ============================================================================
+// SERIES GENERATION
+// ============================================================================
+export function generateSeries(chartData: number[], props: EChartPropsType) {
+  const { chartConfig } = props;
+  if (!chartData?.length) return [];
+
+  const valueKeys = extractValueKeys(chartData);
+
+  return valueKeys.map((key) => ({
+    ...chartConfig,
+    type: "line",
+    columnName: key,
+    data: chartData.map((item: any) => item[key]),
+  }));
+}
+
+// ============================================================================
+// MAP CHART CONFIGURATION
+// ============================================================================
+function configureMapChart(
+  config: EChartsOption,
+  props: EChartsOption,
+  transformedData: any[]
+): EChartsOption {
+  const { chartConfig, series, regionValue, zoomLevel } = props;
+  const { scaleType, minColor, midColor, maxColor, colorRanges } =
+    chartConfig.colorScale;
+  const { mapType } = chartConfig;
+
+  // Parse zoom level
+  let zoom = 1;
+  if (zoomLevel) {
+    if (String(zoomLevel).endsWith("%")) {
+      zoom = parseFloat(String(zoomLevel)) / 100;
+    } else {
+      zoom = parseFloat(String(zoomLevel));
+    }
+  }
+
+  const mapSeries = getSeriesConfig(props)
+    .filter((s: any) => s.columnName === regionValue)
+    .map((s: any) => ({
+      ...s,
+      type: "map",
+      mapType: mapType || "vietnam",
+      width: props.width || "auto",
+      height: props.height || "auto",
+      center: ["50%", "50%"],
+      zoom: isNaN(zoom) ? 1 : zoom,
+      roam: true, // Enable user interaction to zoom/pan
+      data: transformedData.map((item: any) => ({
+        ...item,
+        name: item.name || "",
+        value: item[regionValue] || 0,
+      })),
+      itemStyle: {
+        areaColor: "#eee",
+        borderColor: "#fff",
+        borderWidth: 1,
+      },
+      emphasis: {
+        itemStyle: { areaColor: "#ff7f50" },
+      },
+    }));
+
+  const color =
+    scaleType === "diverging"
+      ? [minColor, midColor, maxColor]
+      : scaleType === "categorical"
+        ? colorRanges.map((i: any) => i.getView().color)
+        : [minColor, maxColor];
+
+  const visualMapConfig =
+    transformedData.length > 0 && series.length > 0
+      ? {
+        show: true,
+        min: Math.min(...transformedData.map((v: any) => v[regionValue])),
+        max: Math.max(...transformedData.map((v: any) => v[regionValue])),
+        left: "left",
+        bottom: "bottom",
+        inRange: {
+          color: color.some((i: any) => i !== "")
+            ? color
+            : ["#C6EBFF", "#2875B8"],
+        },
+      }
+      : undefined;
+
+  const tooltipItems = props.tooltipItems?.length ? props.tooltipItems : [];
+
+  return {
+    ...config,
+    series: mapSeries,
+    tooltip: {
+      trigger: "item",
+      formatter: (params: any) => {
+        const d = params.data || {};
+        let content = `<p style="font-weight:bold; margin-bottom:5px">${params.name}</p>`;
+
+        if (tooltipItems.length > 0) {
+          tooltipItems.forEach((item: any) => {
+            const view = item.getView();
+            if (view.key) {
+              content += `${view.label || view.key}: <b>${d[view.key] ?? "-"}</b><br/>`;
+            }
+          });
+        } else {
+          content += `${regionValue}: <b>${d.value ?? 0}</b>`;
+        }
+        return content;
+      },
+    },
+    visualMap: visualMapConfig,
+  };
+}
+
+// ============================================================================
+// AXIS CHART CONFIGURATION
+// ============================================================================
+function configureAxisChart(
+  config: EChartsOption,
+  props: EChartPropsType,
+  transformedData: any[],
+  chartSize?: ChartSize,
+  isPolar?: boolean
+): EChartsOption {
+  const {
+    xConfig,
+    yConfig,
+    xAxisDirection,
+    xAxisKey,
+    timeColumn,
+    showAxis,
+    showXAxis,
+    showYAxis,
+  } = props;
+
+  const chartRealSize = chartSize
+    ? calculateChartRealSize(chartSize, config.grid)
+    : undefined;
+
+  const finalXY = calcXYConfig(
+    xConfig,
+    yConfig,
+    xAxisDirection,
+    transformedData.map((d: any) => d[xAxisKey]),
+    chartRealSize
+  );
+
+  const isHide = isPolar ? false : showAxis !== "hide";
+  const xAxisType =
+    timeColumn && xAxisKey === timeColumn ? "category" : finalXY.xConfig.type;
+
+  return {
+    ...config,
+    xAxis: {
+      ...finalXY.xConfig,
+      type: xAxisType,
+      axisLabel: props?.xAxisStyle,
+      data:
+        xAxisType === "category" && props.xAxisData.length > 0
+          ? props.xAxisData
+          : transformedData.map((i: any) => i[xAxisKey]),
+      show: showXAxis ? !showXAxis : isHide,
+    },
+    yAxis: {
+      ...finalXY.yConfig,
+      axisLabel: props?.yAxisStyle,
+      show: showYAxis ? !showYAxis : isHide,
+    },
+  };
+}
+// ============================================================================
+// MIXED CHART CONFIGURATION
+// ============================================================================
+function configureMixedChart(
+  config: EChartsOption,
+  props: EChartPropsType
+): EChartsOption {
+  const {
+    type,
+    type2,
+    yAxisKey,
+    yAxis2Key,
+    yAxisName,
+    yAxis2Name,
+    yAxisStyle,
+    yAxis2Style,
+    series,
+  } = props;
+
+  const yAxisConfig = [
+    {
+      type: "value",
+      name: yAxisName || "",
+      alignTicks: true,
+      axisLine: {
+        show: true,
+        lineStyle: yAxisStyle || {},
+      },
+      axisLabel: {
+        formatter: "{value}",
+        ...yAxisStyle,
+      },
+    },
+    {
+      type: "value",
+      name: yAxis2Name || "",
+      alignTicks: true,
+      axisLine: {
+        show: true,
+        lineStyle: yAxis2Style || {},
+      },
+      axisLabel: {
+        formatter: "{value}",
+        ...yAxis2Style,
+      },
+    },
+  ];
+
+  const updatedSeries = config.series?.map((seriesItem: any, index: number) => {
+    const seriesProps = series?.[index];
+
+    if (!seriesProps) return seriesItem;
+
+    const seriesView = seriesProps.getView();
+
+    const yAxisIndex =
+      seriesView?.yAxisIndex !== undefined
+        ? seriesView.yAxisIndex
+        : index === 0
+          ? 0
+          : 1;
+
+    const name =
+      seriesView?.seriesName ||
+      (index === 0 ? yAxisKey : yAxis2Key) ||
+      seriesItem.name;
+    const columnName =
+      seriesView?.columnName ||
+      (index === 0 ? yAxisKey : yAxis2Key) ||
+      seriesItem.columnName;
+
+    return {
+      ...seriesItem,
+      type: index === 0 ? type : type2 || seriesView?.chartType,
+      yAxisIndex: yAxisIndex,
+      name: name,
+      columnName: columnName,
+      smooth:
+        seriesView?.smooth !== undefined
+          ? seriesView.smooth
+          : seriesItem.smooth,
+      itemStyle: {
+        ...(seriesItem.itemStyle || {}),
+        ...(seriesProps.itemStyle || {}),
+      },
+      lineStyle: {
+        ...(seriesItem.lineStyle || {}),
+        ...(seriesProps.lineStyle || {}),
+      },
+      label: {
+        ...(seriesItem.label || {}),
+        ...(seriesProps.label || {}),
+      },
+      animation: true,
+    };
+  });
+
+  return {
+    ...config,
+    yAxis: yAxisConfig,
+    series: updatedSeries,
+  };
+}
+// ============================================================================
+// TRENDLINE CONFIGURATION
+// ============================================================================
+function addTrendline(
+  config: EChartsOption,
+  props: EChartPropsType,
+  data: any[],
+  series: any[]
+): EChartsOption {
+  const { chartConfig } = props;
+
+  if (!chartConfig.showTrendline || series.length <= 1) return config;
+
+  const trendlineCf = chartConfig.trendlines;
+  const trendlineSeries = calculateTrendline(
+    data,
+    trendlineCf,
+    series?.[1]?.children?.columnName?.unevaledValue,
+    series?.[0]?.children?.columnName?.unevaledValue
+  );
+
+  if (!trendlineSeries.length) return config;
+
+  const trendlineConfig = {
+    ...config.series[0],
+    name: trendlineCf.name || "Trend",
+    columnName: trendlineCf.name || "Trend",
+    type: "line",
+    data: trendlineSeries,
+    smooth: false,
+    lineStyle: {
+      type: "dashed",
+      width: parseInt(config.lineWidth || "1"),
+      color: trendlineCf.color,
+      borderColor: "inherit",
+    },
+    silent: true,
+    symbolSize: chartConfig.symbolSize,
+  };
+
+  return {
+    ...config,
+    series: [...config.series, trendlineConfig],
+  };
+}
+
+// ============================================================================
+// MAIN CONFIGURATION FUNCTION
+// ============================================================================
+export function getEChartConfig(
+  props: EChartsOption,
+  chartSize?: ChartSize,
+  theme?: any
+): EChartsOption | undefined {
+  const { chartConfig, chartType, data, series, chartStyle } = props;
+
+  // Early return for no data
+  const axisChart = isAxisChart(chartType, chartConfig?.polarData?.polar);
+  const defaultConfig = getBaseConfig(props, chartType);
+
+  if (!data?.length) {
+    return {
+      ...defaultConfig,
+      ...(["map", "mapv2"].includes(chartType)
+        ? noDataPieChartConfig
+        : noDataAxisConfig),
+    };
+  }
+
+  // Extract data keys
+  const valueKeys = extractValueKeys(data);
+  const seriesColumnNames = getSeriesColumnNames(chartType, series, valueKeys);
+
+  // Process data
+  const transformedData = processChartData(props, data, seriesColumnNames);
+
+  // Base configuration
+  const isPolar = chartConfig?.polarData?.polar;
+  let config: EChartsOption = {
+    ...defaultConfig,
+    ...(isPolar ? getPolarConfig(props) : {}),
+    backgroundColor: !chartStyle.background
+      ? defaultConfig.backgroundColor
+      : chartStyle.background,
+  };
+
+  if (["map", "mapv2"].includes(chartType)) {
+    config = configureMapChart(config, props, transformedData);
+  } else if (chartType === "pie") {
+    const { xAxisKey } = props;
+
+    config = {
+      ...config,
+      tooltip: {
+        trigger: "item",
+      },
+      series: getSeriesConfig(props).map((s: any) => ({
+        ...s,
+        data: transformedData.map((row: any) => ({
+          name: row[xAxisKey],
+          value: row[s.columnName],
+        })),
+        encode: {
+          itemName: xAxisKey,
+          value: s.columnName,
+        },
+      })),
+    };
+  } else if (chartType === "mixed") {
+    const seriesConfig = getSeriesConfig(props);
+
+    config = {
+      ...config,
+      dataset: [{ source: transformedData, sourceHeader: false }],
+      dataZoom: props.rowLimitConfig.dataZoom,
+      series: seriesConfig.map((s: any) => ({
+        ...s,
+        encode: { ...s.encode, y: s.columnName },
+        lineStyle: chartStyleWrapper(props?.chartStyle, theme?.chartStyle),
+        data: transformedData.map((row: any) => row[s.columnName]),
+      })),
+    };
+
+    // Add axis configuration
+    if (axisChart) {
+      config = configureAxisChart(
+        config,
+        props,
+        transformedData,
+        chartSize,
+        isPolar
+      );
+    }
+
+    config = configureMixedChart(config, props);
+  } else {
+    // Regular chart
+    const seriesConfig = getSeriesConfig(props);
+
+    config = {
+      ...config,
+      dataset: [{ source: transformedData, sourceHeader: false }],
+      dataZoom:
+        props.zoomLevel === "1"
+          ? [
+            {
+              type: "slider",
+              show: true,
+              xAxisIndex: [0],
+              start: 0,
+              end: 100,
+              bottom: 10,
+            },
+            {
+              type: "inside",
+              xAxisIndex: [0],
+              start: 0,
+              end: 100,
+            },
+          ]
+          : props.rowLimitConfig.dataZoom,
+      series: seriesConfig.map((s: any) => ({
+        ...s,
+        encode: { ...s.encode, y: s.columnName },
+        lineStyle: chartStyleWrapper(props?.chartStyle, theme?.chartStyle),
+        data: transformedData.map((row: any) => row[s.columnName]),
+      })),
+    };
+
+    // Add axis configuration for axis charts
+    if (axisChart) {
+      config = configureAxisChart(
+        config,
+        props,
+        transformedData,
+        chartSize,
+        isPolar
+      );
+    }
+
+    // Add trendline if enabled
+    config = addTrendline(config, props, data, series);
+
+    // Handle total chart type
+    if (chartType === "total") {
+      config.series = generateSeries(transformedData, props);
+    }
+  }
+  console.log({ series: config.series });
+
+  return config;
+}