lowcoder-map-component 0.1.1

package/src/components/ChartPropertyView.tsx

@@ -0,0 +1,961 @@
+import { trans } from "@/i18n/comps";
+import { extractColumnsFromData } from "@/utils/columnExtractor.util";
+import { EChartPropsType } from "@/utils/echarts.util";
+import { getDataKeys } from "@/utils/getDataKey.util";
+import { move } from "@/utils/move.util";
+import { Flex } from "antd";
+import {
+  changeChildAction,
+  childrenToProps,
+  CompAction,
+  Dropdown,
+  EditorContext,
+  hiddenPropertyView,
+  Option,
+  RedButton,
+  Section,
+  sectionNames,
+} from "lowcoder-sdk";
+import { useContext, useEffect, useMemo, useRef } from "react";
+import { newSeries } from "./SeriesComp";
+
+export function ChartPropertyView(
+  children: EChartPropsType,
+  dispatch: (action: CompAction) => void
+) {
+  const {
+    xAxisKey,
+    chartType,
+    data,
+    series,
+    dataKeys,
+    dataQueryKey,
+    regionValue,
+    regionName,
+    sortBy,
+    sortOrder,
+    value,
+    showAxis,
+    yAxisKey,
+    yAxis2Key,
+    timeColumn,
+    timeGranularity,
+    timeRange,
+  } = childrenToProps(children);
+
+  const editorState: any = useContext(EditorContext);
+  const queriesList = editorState?.getQueriesComp()?.getView();
+
+  // region Default mock data
+  const defaultMockData = [
+    {
+      children: {
+        name: { getView: () => "users" },
+        compType: { getView: () => "restApi" },
+        data: {
+          getView: () => [
+            {
+              id: "1",
+              name: "Nguyễn Văn A",
+              email: "nguyenvana@email.com",
+              age: 28,
+              department: "Sales",
+              salary: 15000000,
+              status: "active",
+              joinDate: "2023-01-15",
+              avatar: "https://via.placeholder.com/50",
+            },
+            {
+              id: "2",
+              name: "Trần Thị B",
+              email: "tranthib@email.com",
+              age: 32,
+              department: "Marketing",
+              salary: 18000000,
+              status: "active",
+              joinDate: "2022-08-20",
+              avatar: "https://via.placeholder.com/50",
+            },
+            {
+              id: "3",
+              name: "Lê Văn C",
+              email: "levanc@email.com",
+              age: 25,
+              department: "IT",
+              salary: 20000000,
+              status: "inactive",
+              joinDate: "2023-05-10",
+              avatar: "https://via.placeholder.com/50",
+            },
+            {
+              id: "4",
+              name: "Phạm Thị D",
+              email: "phamthid@email.com",
+              age: 29,
+              department: "HR",
+              salary: 12000000,
+              status: "active",
+              joinDate: "2021-11-30",
+              avatar: "https://via.placeholder.com/50",
+            },
+            {
+              id: "5",
+              name: "Hoàng Văn E",
+              email: "hoangvane@email.com",
+              age: 35,
+              department: "Finance",
+              salary: 25000000,
+              status: "active",
+              joinDate: "2020-03-15",
+              avatar: "https://via.placeholder.com/50",
+            },
+          ],
+        },
+        description: { getView: () => "List of users" },
+      },
+    },
+    {
+      children: {
+        name: { getView: () => "products" },
+        compType: { getView: () => "sql" },
+        data: {
+          getView: () => [
+            {
+              id: "P001",
+              name: "iPhone 14 Pro",
+              category: "Phone",
+              price: 25990000,
+              stock: 45,
+              status: "available",
+              rating: 4.8,
+              sales: 1200,
+              image: "https://via.placeholder.com/100",
+              description: "iPhone 14 Pro 128GB",
+            },
+            {
+              id: "P002",
+              name: "Samsung Galaxy S23",
+              category: "Phone",
+              price: 18990000,
+              stock: 32,
+              status: "available",
+              rating: 4.6,
+              sales: 850,
+              image: "https://via.placeholder.com/100",
+              description: "Samsung Galaxy S23 256GB",
+            },
+            {
+              id: "P003",
+              name: "MacBook Air M2",
+              category: "Laptop",
+              price: 32990000,
+              stock: 15,
+              status: "low_stock",
+              rating: 4.9,
+              sales: 420,
+              image: "https://via.placeholder.com/100",
+              description: "MacBook Air M2 13 inch",
+            },
+            {
+              id: "P004",
+              name: "AirPods Pro",
+              category: "Accessory",
+              price: 5990000,
+              stock: 0,
+              status: "out_of_stock",
+              rating: 4.7,
+              sales: 2100,
+              image: "https://via.placeholder.com/100",
+              description: "AirPods Pro 2",
+            },
+            {
+              id: "P005",
+              name: "iPad Air",
+              category: "Tablet",
+              price: 15990000,
+              stock: 28,
+              status: "available",
+              rating: 4.5,
+              sales: 680,
+              image: "https://via.placeholder.com/100",
+              description: "iPad Air 10.9 inch",
+            },
+          ],
+        },
+        description: { getView: () => "List of products" },
+      },
+    },
+  ];
+
+  const queryItems = queriesList?.length ? queriesList : defaultMockData;
+
+  // region Memoized query data
+  const newQuery = useMemo(
+    () =>
+      queryItems.map((q: any) => ({
+        name: q.children.name.getView(),
+        data: q.children.data.getView(),
+      })),
+    [queryItems]
+  );
+
+  // region Memoized query options
+  const queryOptions = useMemo(
+    () => [
+      { label: "none", value: "none" },
+      ...(newQuery?.map((q: any) => ({
+        label: q.name,
+        value: q.name,
+      })) || []),
+    ],
+    [newQuery]
+  );
+
+  // region Refs for tracking
+  const prevKeysRef = useRef("");
+  const isInitializedRef = useRef(false);
+
+  // region Initialize data keys and columns
+  useEffect(() => {
+    getDataKeys({
+      data,
+      fallBack: (keys) => {
+        const extractedKeys =
+          chartType === "map" && typeof keys === "object" && "all" in keys
+            ? keys.number || []
+            : Array.isArray(keys)
+              ? keys
+              : keys.all || [];
+
+        if (extractedKeys.length === 0) return;
+
+        const keysSignature = extractedKeys.join("|");
+
+        if (
+          !isInitializedRef.current ||
+          keysSignature !== prevKeysRef.current
+        ) {
+          dispatch(
+            changeChildAction(
+              "dataKeys",
+              extractedKeys.map((key) => ({ label: key, value: key }))
+            )
+          );
+          if (["total", "pie"].includes(chartType))
+            dispatch(
+              changeChildAction(
+                "xAxisKey",
+                (keys as any)?.string?.[0] || extractedKeys?.[0] || ""
+              )
+            );
+
+          // region Update table columns
+          if (chartType === "table") {
+            const cols = children.columns.getView();
+            for (let i = cols.length - 1; i >= 0; i--) {
+              children.columns.dispatch(children.columns.deleteAction(i));
+            }
+            extractColumnsFromData(data).forEach((col) => {
+              children.columns.dispatch(children.columns.pushAction(col));
+            });
+          }
+
+          prevKeysRef.current = keysSignature;
+          isInitializedRef.current = true;
+        }
+      },
+      dataType: ["number", "string"],
+      targetKey: chartType === "total" ? "chartData" : undefined,
+    });
+  }, [data, chartType, children.columns, dispatch]);
+
+  // region Set query data
+  useEffect(() => {
+    if (dataQueryKey !== "none" && newQuery?.length > 0) {
+      dispatch(
+        changeChildAction(
+          "data",
+          JSON.stringify(
+            newQuery.find((q: any) => q.name === dataQueryKey).data
+          )
+        )
+      );
+    } else if (dataQueryKey === "none" || !data.length) {
+      dispatch(
+        changeChildAction(
+          "data",
+          JSON.stringify(children.defaultData.getView())
+        )
+      );
+    }
+  }, [dataQueryKey, children.defaultData]);
+
+  useEffect(() => {
+    const provinceData = children.provinceData?.getView?.();
+    if (provinceData && provinceData.length > 0) {
+      dispatch(
+        changeChildAction("defaultProvinceData", JSON.stringify(provinceData))
+      );
+    }
+  }, [children.provinceData]);
+
+
+  useEffect(() => {
+    const defaultStyle = children.defaultStyle?.getView?.();
+    console.log('defaultStyle',defaultStyle);
+    if (defaultStyle) {
+      dispatch(
+        changeChildAction("defaultMapStyle", defaultStyle)
+      );
+    }
+  }, [children.defaultStyle]);
+
+  // region Initialize map region value
+  useEffect(() => {
+    if (chartType === "map" && !regionValue) {
+      dispatch(changeChildAction("regionValue", "value"));
+    }
+  }, [chartType, regionValue, dispatch]);
+
+  // region Render map configuration section
+  const renderMapSection = () => (
+    <Section name="Map Configuration">
+      {children.chartConfig.getPropertyView()}
+      {/* <Option
+        items={dataKeys}
+        title={trans("mapChart.regionValue")}
+        itemTitle={(col) => col.label}
+        popoverTitle={() => trans("tableChart.columnSettings")}
+        content={() => null}
+        onMove={(fromIndex, toIndex) => {
+          const newDataKeys: any = move(dataKeys, fromIndex, toIndex);
+          dispatch(changeChildAction("regionValue", newDataKeys[0].value));
+          children.dataKeys.dispatch(
+            children.dataKeys.changeValueAction(newDataKeys)
+          );
+        }}
+        dataIndex={(col) => col.value}
+      /> */}
+      <Dropdown
+        value={regionName}
+        options={dataKeys}
+        label={trans("mapChart.regionName")}
+        onChange={(val: any) => {
+          dispatch(changeChildAction("regionName", val));
+        }}
+      />
+      {children.rowLimitConfig.getPropertyView()}
+      <Dropdown
+        value={sortBy}
+        options={dataKeys}
+        label={trans("chart.sortBy")}
+        onChange={(val: any) => {
+          dispatch(changeChildAction("sortBy", val));
+        }}
+      />
+      <Dropdown
+        value={sortOrder}
+        options={[
+          { label: trans("chart.ascending"), value: "asc" },
+          { label: trans("chart.descending"), value: "desc" },
+        ]}
+        label={trans("chart.sortOrder")}
+        onChange={(val: any) => {
+          dispatch(changeChildAction("sortOrder", val));
+        }}
+      />
+    </Section>
+  );
+
+  const renderMapSectionV2 = () => (
+    <>
+      <Section name="Map Configuration">
+        {children.chartConfig.getPropertyView()}
+        <Option
+          items={dataKeys}
+          title={trans("mapChart.regionValue")}
+          itemTitle={(col) => col.label}
+          popoverTitle={() => trans("tableChart.columnSettings")}
+          content={() => null}
+          onMove={(fromIndex, toIndex) => {
+            const newDataKeys: any = move(dataKeys, fromIndex, toIndex);
+            dispatch(changeChildAction("regionValue", newDataKeys[0].value));
+            children.dataKeys.dispatch(
+              children.dataKeys.changeValueAction(newDataKeys)
+            );
+          }}
+          dataIndex={(col) => col.value}
+        />
+        <Dropdown
+          value={regionName}
+          options={dataKeys}
+          label={trans("mapChart.regionName")}
+          onChange={(val: any) => {
+            dispatch(changeChildAction("regionName", val));
+          }}
+        />
+        {children.rowLimitConfig.getPropertyView()}
+        <Dropdown
+          value={sortBy}
+          options={dataKeys}
+          label={trans("chart.sortBy")}
+          onChange={(val: any) => {
+            dispatch(changeChildAction("sortBy", val));
+          }}
+        />
+        <Dropdown
+          value={sortOrder}
+          options={[
+            { label: trans("chart.ascending"), value: "asc" },
+            { label: trans("chart.descending"), value: "desc" },
+          ]}
+          label={trans("chart.sortOrder")}
+          onChange={(val: any) => {
+            dispatch(changeChildAction("sortOrder", val));
+          }}
+        />
+      </Section>
+      {/* <Section name="Style">
+        {children.borderColor.propertyView({ label: "Border Color" })}
+        {children.borderWidth.propertyView({ label: "Border Width" })}
+        {children.areaColor.propertyView({ label: "Area Color" })}
+        {children.hoverColor.propertyView({ label: "Hover Color" })}
+
+        {children.zoomLevel.propertyView({ label: "Zoom Level" })}
+        {children.width.propertyView({ label: "Width" })}
+        {children.width.propertyView({ label: "Width" })}
+        {children.height.propertyView({ label: "Height" })}
+      </Section> */}
+      <Section name="Tooltip">
+        <Option
+          items={children.tooltipItems.getView()}
+          title="Tooltip Fields"
+          itemTitle={(item) => item.getView().label || item.getView().key}
+          popoverTitle={() => "Tooltip Field"}
+          content={(item, index) => (
+            <>
+              <Dropdown
+                value={item.getView().key}
+                options={dataKeys}
+                label="Column"
+                onChange={(val: any) => {
+                  item.children.key.dispatchChangeValueAction(val);
+                  if (!item.getView().label) {
+                    item.children.label.dispatchChangeValueAction(val);
+                  }
+                }}
+              />
+              {item.children.label.propertyView({ label: "Label" })}
+              <RedButton
+                onClick={() => {
+                  children.tooltipItems.dispatch(
+                    children.tooltipItems.deleteAction(index)
+                  );
+                }}
+              >
+                Delete
+              </RedButton>
+            </>
+          )}
+          onAdd={() => {
+            children.tooltipItems.dispatch(
+              children.tooltipItems.pushAction({ key: "", label: "" })
+            );
+          }}
+          onMove={(from, to) => {
+            children.tooltipItems.dispatch(
+              children.tooltipItems.arrayMoveAction(from, to)
+            );
+          }}
+          hide={() => false}
+          onHide={() => null}
+          dataIndex={(item) => item.getView().key}
+        />
+      </Section>
+    </>
+  );
+
+  // region Render table columns section
+  const renderTableColumnsSection = () => (
+    <Option
+      items={children.columns.getView()}
+      title={trans("tableChart.columns")}
+      itemTitle={(col) => col.getView().title || col.getView().dataIndex}
+      popoverTitle={() => trans("tableChart.columnSettings")}
+      content={(col, index) => (
+        <Flex vertical gap={5}>
+          {col.getPropertyView()}
+          <RedButton
+            onClick={() => {
+              children.columns.dispatch(children.columns.deleteAction(index));
+            }}
+          >
+            {trans("chart.delete")}
+          </RedButton>
+        </Flex>
+      )}
+      onAdd={() => {
+        children.columns.dispatch(
+          children.columns.pushAction({
+            title: trans("tableChart.newColumn"),
+            dataIndex: `column_${Date.now()}`,
+            key: `column_${Date.now()}`,
+            visible: true,
+            sortable: true,
+            defaultSortOrder: "none",
+            fixed: "none",
+          })
+        );
+      }}
+      onMove={(fromIndex, toIndex) => {
+        children.columns.dispatch(
+          children.columns.arrayMoveAction(fromIndex, toIndex)
+        );
+      }}
+      hide={(col) => !col.getView().visible}
+      onHide={() => null}
+      dataIndex={(col) => col.getView().dataIndex}
+    />
+  );
+
+  // region Render series section
+  const renderSeriesSection = () => (
+    <div className="chart-series-option-wrapper">
+      <Option
+        items={series}
+        title={trans("chart.chartSeries")}
+        itemTitle={(s) => s.getView().seriesName}
+        popoverTitle={(s) => s.getView().columnName}
+        content={(s, index) => (
+          <>
+            {s.getPropertyViewWithData(dataKeys)}
+            <RedButton
+              onClick={() => {
+                children.series.dispatch(children.series.deleteAction(index));
+              }}
+            >
+              {trans("chart.delete")}
+            </RedButton>
+          </>
+        )}
+        onAdd={() => {
+          if (dataKeys.length > 0) {
+            children.series.dispatch(
+              children.series.pushAction(
+                newSeries(
+                  trans("chart.customSeries"),
+                  dataKeys[0].value,
+                  chartType
+                )
+              )
+            );
+          }
+        }}
+        onMove={(fromIndex, toIndex) => {
+          console.log("run move");
+          children.series.dispatch(
+            children.series.arrayMoveAction(fromIndex, toIndex)
+          );
+        }}
+        hide={(s) => s.getView().hide}
+        onHide={(s, hide) => s.children.hide.dispatchChangeValueAction(hide)}
+        dataIndex={(s) => s.getView().dataIndex}
+      />
+    </div>
+  );
+
+  // region Render area pieces section for line charts
+  const renderAreaPiecesSection = () => (
+    <Option
+      items={children.areaPieces.getView()}
+      title={trans("chart.areaPieces")}
+      itemTitle={(s) =>
+        `[${s.getView().from}-${s.getView().to}] ${s.getView().color}`
+      }
+      popoverTitle={() => trans("chart.areaPiece")}
+      content={(s, index) => (
+        <>
+          {s.getPropertyView({ label: "Type" })}
+          <RedButton
+            onClick={() => {
+              children.areaPieces.dispatch(
+                children.areaPieces.deleteAction(index)
+              );
+            }}
+          >
+            {trans("chart.delete")}
+          </RedButton>
+        </>
+      )}
+      onAdd={() => {
+        children.areaPieces.dispatch(children.areaPieces.pushAction({}));
+      }}
+      onMove={(fromIndex, toIndex) => {
+        children.areaPieces.dispatch(
+          children.areaPieces.arrayMoveAction(fromIndex, toIndex)
+        );
+      }}
+      hide={() => true}
+      onHide={() => null}
+      dataIndex={(s) => s.getView().dataIndex}
+    />
+  );
+
+  const renderAreaPiecesSectionv2 = () => (
+    <>
+      {children.areaColor.getPropertyView({ label: "Area Color" })}
+      {children.showMaxPoint.propertyView({ label: "Show Max Point" })}
+      {children.zoomLevel.propertyView({ label: "Zoom Level" })}
+      <Option
+        items={children.areaPieces.getView()}
+        title={trans("chart.areaPieces")}
+        itemTitle={(s) =>
+          `[${s.getView().from}-${s.getView().to}] ${s.getView().color}`
+        }
+        popoverTitle={() => trans("chart.areaPiece")}
+        content={(s, index) => (
+          <>
+            {s.getPropertyView({ label: "Type" })}
+            <RedButton
+              onClick={() => {
+                children.areaPieces.dispatch(
+                  children.areaPieces.deleteAction(index)
+                );
+              }}
+            >
+              {trans("chart.delete")}
+            </RedButton>
+          </>
+        )}
+        onAdd={() => {
+          children.areaPieces.dispatch(children.areaPieces.pushAction({}));
+        }}
+        onMove={(fromIndex, toIndex) => {
+          children.areaPieces.dispatch(
+            children.areaPieces.arrayMoveAction(fromIndex, toIndex)
+          );
+        }}
+        hide={() => true}
+        onHide={() => null}
+        dataIndex={(s) => s.getView().dataIndex}
+      />
+    </>
+  );
+
+  // region Render axis configuration for non-pie/map charts
+  const renderAxisConfig = () => (
+    <>
+      {children.xAxisDirection.propertyView({
+        label: trans("chart.xAxisDirection"),
+        radioButton: true,
+      })}
+      {children.xConfig.getPropertyView()}
+      {children.yConfig.getPropertyView()}
+    </>
+  );
+
+  // region Render axis style sections
+  const renderAxisStyleSections = () => (
+    <>
+      <Section name={sectionNames.xAxisStyle}>
+        {children.xAxisStyle?.getPropertyView()}
+      </Section>
+
+      {chartType === "mixed" ? (
+        <>
+          <Section name="Y-axis 1">
+            <Dropdown
+              value={yAxisKey}
+              options={dataKeys}
+              label={trans("chart.value")}
+              onChange={(val: any) => {
+                dispatch(changeChildAction("yAxisKey", val));
+              }}
+            />
+            {children.type?.propertyView({
+              label: trans("chart.type"),
+            })}
+            {children.yAxisStyle?.getPropertyView()}
+          </Section>
+          <Section name="Y-axis 2">
+            <Dropdown
+              value={yAxis2Key}
+              options={dataKeys}
+              label={trans("chart.value")}
+              onChange={(val: any) => {
+                dispatch(changeChildAction("yAxis2Key", val));
+              }}
+            />
+            {children.type2?.propertyView({
+              label: trans("chart.type"),
+            })}
+            {children.yAxis2Style?.getPropertyView()}
+          </Section>
+        </>
+      ) : (
+        <Section name={sectionNames.yAxisStyle}>
+          {children.yAxisStyle?.getPropertyView()}
+        </Section>
+      )}
+    </>
+  );
+
+  const isMapChart = chartType === "map";
+  const isMapChartV2 = chartType === "mapv2";
+  const isTableChart = chartType === "table";
+  const isPieChart = chartType === "pie";
+  const isBarChart = chartType === "bar";
+  const isLineChart = chartType === "line";
+  const isLineChartv2 = chartType === "linev2";
+  const isTotalChart = chartType === "total";
+  const isMapCompent = chartType === "mapComponent";
+
+  return (
+    <div>
+      {/* Map Configuration */}
+      {isMapChart && renderMapSection()}
+      {isMapCompent && renderMapSection()}
+
+      {isMapChartV2 && renderMapSectionV2()}
+
+      {/* Data Section */}
+      <Section name={trans("chart.data")}>
+        <Dropdown
+          value={dataQueryKey}
+          options={queryOptions}
+          label={trans("chart.dataQueries")}
+          onChange={(val: any) => {
+            dispatch(changeChildAction("dataQueryKey", val));
+          }}
+        />
+
+        {isTableChart && renderTableColumnsSection()}
+
+        {isMapChart && (
+          <>
+            <Dropdown
+              value={value}
+              options={dataKeys}
+              label={trans("mapChart.value")}
+              onChange={(val: any) => {
+                dispatch(changeChildAction("value", val));
+              }}
+            />
+            {children.regionMapType.propertyView({
+              label: trans("mapChart.regionMapType"),
+            })}
+          </>
+        )}
+
+        {!isMapChart && children.chartConfig.getPropertyView()}
+
+        {!isTableChart && !isMapChart && !isMapChartV2 && (
+          <>
+            {children.animationDuration.propertyView({
+              label: trans("chart.animationDuration"),
+            })}
+            <Dropdown
+              value={xAxisKey}
+              options={dataKeys}
+              label={trans("chart.xAxis")}
+              onChange={(val: any) => {
+                dispatch(changeChildAction("xAxisKey", val));
+              }}
+            />
+            {children.chartConfig.getView()?.subtype === "waterfall" &&
+              children.xAxisData.propertyView({
+                label: "X-Label-Data",
+              })}
+            {children.rowLimitConfig.getPropertyView()}
+            {!isTotalChart && renderSeriesSection()}
+            {isLineChart && renderAreaPiecesSection()}
+            {isLineChartv2 && renderAreaPiecesSectionv2()}
+          </>
+        )}
+      </Section>
+
+      {/* Layout Section */}
+      {chartType !== "table" &&
+        chartType !== "linev2" &&
+        chartType !== "mapv2" &&
+        !isMapCompent && (
+          <Section name={sectionNames.layout}>
+            {children.echartsTitleConfig.getPropertyView()}
+            {children.echartsTitleVerticalConfig.getPropertyView()}
+            {children.legendConfig.getPropertyView()}
+            {children.title.propertyView({ label: trans("chart.title") })}
+            {children.left.propertyView({
+              label: trans("chart.left"),
+              tooltip: trans("chart.leftTooltip"),
+            })}
+            {children.right.propertyView({
+              label: trans("chart.right"),
+              tooltip: trans("chart.rightTooltip"),
+            })}
+            {children.top.propertyView({
+              label: trans("chart.top"),
+              tooltip: trans("chart.topTooltip"),
+            })}
+            {children.bottom.propertyView({
+              label: trans("chart.bottom"),
+              tooltip: trans("chart.bottomTooltip"),
+            })}
+
+            {!isPieChart && !isMapChart && !isMapChartV2 && renderAxisConfig()}
+
+            {hiddenPropertyView(children)}
+
+            {!isPieChart && !isMapChart && !isMapChartV2 && (
+              <>
+                <Dropdown
+                  value={showAxis}
+                  options={[
+                    { label: "Hide", value: "hide" },
+                    { label: "Show", value: "show" },
+                    { label: "Custom", value: "custom" },
+                  ]}
+                  label={trans("chart.showAxis")}
+                  onChange={(val: any) => {
+                    dispatch(changeChildAction("showAxis", val));
+                  }}
+                />
+                {showAxis === "custom" && (
+                  <>
+                    {children.showXAxis.propertyView({
+                      label: trans("chart.showXAxis"),
+                    })}
+                    {children.showYAxis.propertyView({
+                      label: trans("chart.showYAxis"),
+                    })}
+                  </>
+                )}
+              </>
+            )}
+
+            {children.tooltip.propertyView({
+              label: trans("chart.tooltip"),
+              tooltip: trans("chart.tooltip"),
+            })}
+          </Section>
+        )}
+
+      {/* Axis Style Section */}
+      {!isPieChart &&
+        !isBarChart &&
+        !isMapChart &&
+        !isMapCompent &&
+        !isMapChartV2 &&
+        !isTableChart &&
+        !isLineChartv2 &&
+        renderAxisStyleSections()}
+
+      {/* Time Section */}
+      {!isLineChartv2 && !isMapChartV2 && (
+        <Section name={trans("chart.time")}>
+          <Dropdown
+            value={timeColumn}
+            options={dataKeys}
+            label={trans("chart.timeColumn")}
+            onChange={(val: any) => {
+              dispatch(changeChildAction("timeColumn", val));
+            }}
+          />
+          <Dropdown
+            value={timeGranularity}
+            options={[
+              { label: trans("chart.second"), value: "second" },
+              { label: trans("chart.minute"), value: "minute" },
+              { label: trans("chart.hour"), value: "hour" },
+              { label: trans("chart.day"), value: "day" },
+              { label: trans("chart.week"), value: "week" },
+              { label: trans("chart.month"), value: "month" },
+              { label: trans("chart.quarter"), value: "quarter" },
+              { label: trans("chart.year"), value: "year" },
+            ]}
+            label={trans("chart.timeGranularity")}
+            onChange={(val: any) => {
+              dispatch(changeChildAction("timeGranularity", val));
+            }}
+          />
+          <Dropdown
+            value={timeRange}
+            options={[
+              { label: "Last day", value: "lastDay" },
+              { label: "Last week", value: "lastWeek" },
+              { label: "Last month", value: "lastMonth" },
+              { label: "Last quarter", value: "lastQuarter" },
+              { label: "Last year", value: "lastYear" },
+              { label: "Current day", value: "currentDay" },
+              { label: "No filter", value: "noFilter" },
+              { label: "Custom", value: "custom" },
+            ]}
+            label={trans("chart.timeRange")}
+            onChange={(val: any) => {
+              dispatch(changeChildAction("timeRange", val));
+            }}
+          />
+
+          {timeRange === "custom" && (
+            <>
+              {children.startTime.propertyView({
+                label: trans("chart.startTime"),
+                placeholder: "DD-MM-YYYY HH:mm",
+              })}
+              {children.endTime.propertyView({
+                label: trans("chart.endTime"),
+                placeholder: "DD-MM-YYYY HH:mm",
+              })}
+            </>
+          )}
+        </Section>
+      )}
+
+      {/* Advanced Section */}
+      <Section name={sectionNames.advanced}>
+        {children.data.propertyView({
+          label: trans("chart.data"),
+        })}
+        {children.provinceData.propertyView({
+          label: trans("chart.provinceData"),
+        })}
+
+        {children.defaultStyle.propertyView({
+          label: trans("chart.defaultMapStyle"),
+        })}
+
+        <Flex gap={8} vertical>
+          <Flex gap={5} vertical>
+            <div className="sub-title">{sectionNames.interaction}</div>
+            {children.onUIEvent.propertyView({
+              title: trans("chart.chartEventHandlers"),
+            })}
+            {children.onEvent.propertyView()}
+          </Flex>
+
+          {!isTableChart &&
+            !isMapChartV2 &&
+            !isLineChartv2 &&
+            !isMapChartV2 &&
+            !isMapCompent && (
+              <>
+                <Flex gap={5} vertical>
+                  <div className="sub-title">{sectionNames.chartStyle}</div>
+                  {children.chartStyle?.getPropertyView()}
+                </Flex>
+                <Flex gap={5} vertical>
+                  <div className="sub-title">{sectionNames.titleStyle}</div>
+                  {children.titleStyle?.getPropertyView()}
+                </Flex>
+                {!isMapChart && !isMapChartV2 && !isMapCompent && (
+                  <Flex gap={5} vertical>
+                    <div className="sub-title">{sectionNames.legendStyle}</div>
+                    {children.legendStyle?.getPropertyView()}
+                  </Flex>
+                )}
+              </>
+            )}
+        </Flex>
+      </Section>
+    </div>
+  );
+}