lowcoder-map-component 0.1.1

package/src/components/SeriesComp.tsx

@@ -0,0 +1,368 @@
+import { MarkLineTypeOptions, StepOptions } from "@/configs/echartConfig";
+import { ChartTypeOptions } from "@/controls";
+import { trans } from "@/i18n/comps";
+import {
+  BoolControl,
+  ColorControl,
+  CompAction,
+  ConstructorToComp,
+  ConstructorToDataType,
+  ConstructorToView,
+  CustomAction,
+  Dropdown,
+  JSONObject,
+  MultiCompBuilder,
+  Option,
+  OptionsType,
+  RedButton,
+  StringControl,
+  customAction,
+  dropdownControl,
+  genRandomKey,
+  isMyCustomAction,
+  isNumeric,
+  list,
+  valueComp,
+  withDefault,
+} from "lowcoder-sdk";
+
+export type SeriesCompType = ConstructorToComp<typeof SeriesComp>;
+export type RawSeriesCompType = ConstructorToView<typeof SeriesComp>;
+type SeriesDataType = ConstructorToDataType<typeof SeriesComp> | any;
+type MarkLineDataType = ConstructorToDataType<typeof MarkLinesTmpComp>;
+type MarkAreaDataType = ConstructorToDataType<typeof MarkAreasTmpComp>;
+export type ChartType = "line" | "bar" | "pie" | "mixed" | string;
+type ActionDataType = {
+  type: "chartDataChanged";
+  chartData: Array<JSONObject>;
+};
+
+export function newSeries(
+  name: string,
+  columnName: string,
+  chartType: string
+): SeriesDataType {
+  return {
+    seriesName: name,
+    columnName,
+    chartType,
+    dataIndex: genRandomKey(),
+  };
+}
+
+export function newMarkLine(type: string): MarkLineDataType {
+  return {
+    type,
+    dataIndex: genRandomKey(),
+  };
+}
+
+export function newMarkArea(): MarkAreaDataType {
+  return {
+    dataIndex: genRandomKey(),
+  };
+}
+
+const valToLabel = (val: any) =>
+  MarkLineTypeOptions.find((o) => o.value === val)?.label || "";
+
+const markLinesChildrenMap = {
+  type: dropdownControl(MarkLineTypeOptions, "max"),
+  dataIndex: valueComp<string>(""),
+};
+
+const MarkLinesTmpComp = new MultiCompBuilder(markLinesChildrenMap, (props) => {
+  return props;
+})
+  .setPropertyViewFn((children: any) => {
+    return (
+      <>{children.type.propertyView({ label: trans("chart.markLineType") })}</>
+    );
+  })
+  .build();
+
+const markAreasChildrenMap = {
+  name: StringControl,
+  from: StringControl,
+  to: StringControl,
+  dataIndex: valueComp<string>(""),
+};
+
+const MarkAreasTmpComp = new MultiCompBuilder(markAreasChildrenMap, (props) => {
+  return props;
+})
+  .setPropertyViewFn((children: any) => (
+    <>
+      {children.name.propertyView({ label: trans("chart.markAreaName") })}
+      {children.from.propertyView({ label: trans("chart.markAreaFrom") })}
+      {children.to.propertyView({ label: trans("chart.markAreaTo") })}
+    </>
+  ))
+  .build();
+
+// Series Component
+const seriesChildrenMap = {
+  columnName: StringControl,
+  seriesName: StringControl,
+  chartType: StringControl,
+  markLines: list(MarkLinesTmpComp),
+  markAreas: list(MarkAreasTmpComp),
+  hide: withDefault(BoolControl, false),
+  dataIndex: valueComp<string>(""),
+  step: dropdownControl(StepOptions, ""),
+  itemStyle: StringControl,
+  stack: StringControl,
+  barWidth: StringControl,
+  smooth: withDefault(BoolControl, false),
+  areaStyle: withDefault(BoolControl, false),
+  color: ColorControl,
+};
+
+const SeriesTmpComp = new MultiCompBuilder(seriesChildrenMap, (props) => {
+  return props;
+}).build();
+
+class SeriesComp extends SeriesTmpComp {
+  getPropertyViewWithData(columnOptions: OptionsType): React.ReactNode {
+    const chartType = this.children.chartType.getView();
+
+    return (
+      <>
+        {this.children.seriesName.propertyView({
+          label: trans("chart.seriesName"),
+        })}
+
+        <Dropdown
+          value={this.children.columnName.getView()}
+          options={columnOptions}
+          label={trans("chart.dataColumns")}
+          onChange={(value: any) => {
+            this.children.columnName.dispatchChangeValueAction(value);
+          }}
+        />
+        {this.children.color.propertyView({
+          label: "Line Color",
+        })}
+        {!["pie"].includes(chartType) && (
+          <Dropdown
+            value={chartType}
+            options={ChartTypeOptions}
+            label={trans("chart.chartType")}
+            onChange={(value: any) => {
+              this.children.chartType.dispatchChangeValueAction(value);
+            }}
+          />
+        )}
+
+        {/* Regular chart type controls */}
+        {["line"].includes(chartType) && (
+          <>
+            {this.children.step.propertyView({
+              label: trans("chart.step"),
+            })}
+            {this.children.smooth.propertyView({
+              label: trans("chart.smooth"),
+            })}
+            {this.children.areaStyle.propertyView({
+              label: trans("chart.areaStyle"),
+            })}
+          </>
+        )}
+
+        {chartType === "bar" && (
+          <>
+            {this.children.barWidth.propertyView({
+              label: trans("barChart.barWidth"),
+            })}
+            {this.children.stack.propertyView({
+              label: trans("barChart.stack"),
+            })}
+          </>
+        )}
+
+        {!["pie"].includes(chartType) && (
+          <>
+            <Option
+              items={this.children.markLines.getView()}
+              title={trans("chart.markLines")}
+              itemTitle={(s) => valToLabel(s.getView().type)}
+              popoverTitle={(_) => trans("chart.markLineType")}
+              content={(s, index) => (
+                <>
+                  {s.getPropertyView({ label: "Type" })}
+                  {
+                    <RedButton
+                      onClick={() => {
+                        this.children.markLines.dispatch(
+                          this.children.markLines.deleteAction(index)
+                        );
+                      }}
+                    >
+                      {trans("chart.delete")}
+                    </RedButton>
+                  }
+                </>
+              )}
+              onAdd={() => {
+                this.children.markLines.dispatch(
+                  this.children.markLines.pushAction(newMarkLine("max"))
+                );
+              }}
+              onMove={(fromIndex, toIndex) => {
+                const action = this.children.markLines.arrayMoveAction(
+                  fromIndex,
+                  toIndex
+                );
+                this.children.markLines.dispatch(action);
+              }}
+              dataIndex={(s) => {
+                return s.getView().dataIndex;
+              }}
+            />
+
+            <Option
+              items={this.children.markAreas.getView()}
+              title={trans("chart.markAreas")}
+              itemTitle={(s) => s.getView().name}
+              popoverTitle={(_) => trans("chart.markAreaConfig")}
+              content={(s, index) => (
+                <>
+                  {s.getPropertyView({ label: "Config" })}
+                  {
+                    <RedButton
+                      onClick={() => {
+                        this.children.markAreas.dispatch(
+                          this.children.markAreas.deleteAction(index)
+                        );
+                      }}
+                    >
+                      {trans("chart.delete")}
+                    </RedButton>
+                  }
+                </>
+              )}
+              onAdd={() => {
+                this.children.markAreas.dispatch(
+                  this.children.markAreas.pushAction(newMarkArea())
+                );
+              }}
+              onMove={(fromIndex, toIndex) => {
+                const action = this.children.markAreas.arrayMoveAction(
+                  fromIndex,
+                  toIndex
+                );
+                this.children.markAreas.dispatch(action);
+              }}
+              dataIndex={(s) => {
+                return s.getView().dataIndex;
+              }}
+            />
+          </>
+        )}
+      </>
+    );
+  }
+}
+
+const SeriesListTmpComp = list(SeriesComp);
+export function createSeriesListComp(
+  defaultChartTypes: ChartType | ChartType[] = "line"
+) {
+  // Chuyển đổi thành mảng nếu là string
+  const chartTypesArray = Array.isArray(defaultChartTypes)
+    ? defaultChartTypes
+    : [defaultChartTypes];
+
+  class SeriesListComp extends SeriesListTmpComp {
+    reduce(action: CompAction): this {
+      if (isMyCustomAction<ActionDataType>(action, "chartDataChanged")) {
+        const actions = this.genExampleSeriesActions(action.value.chartData);
+        return this.reduce(this.multiAction(actions));
+      }
+      return super.reduce(action);
+    }
+
+    private genExampleSeriesActions(chartData: Array<JSONObject>) {
+      const actions: CustomAction[] = [];
+
+      if (!chartData || chartData.length <= 0 || !chartData[0]) {
+        return actions;
+      }
+      const chartView = this.getView();
+      const existColumns = chartView.map((s: any) => s.getView().columnName);
+
+      let delCnt = 0;
+      chartView.forEach((series: any, index: number) => {
+        const columnName = series.getView().columnName;
+        if (chartData[0]?.[columnName] === undefined) {
+          actions.push(this.deleteAction(index - delCnt));
+          delCnt++;
+        }
+      });
+
+      const numericKeys = Object.keys(chartData[0]).filter((key) => {
+        return !existColumns.includes(key) && isNumeric(chartData[0][key]);
+      });
+
+      const categoryKeys = Object.keys(chartData[0]).filter((key) => {
+        return !existColumns.includes(key) && !isNumeric(chartData[0][key]);
+      });
+
+      const remainingSeriesCount = chartView.length - delCnt;
+
+      let seriesIndex = 0;
+
+      if (remainingSeriesCount === 0) {
+        if (numericKeys.length >= 2) {
+          numericKeys.slice(0, 3).forEach((key) => {
+            const chartType = this.getChartTypeByIndex(seriesIndex);
+            actions.push(this.pushAction(newSeries(key, key, chartType)));
+            seriesIndex++;
+          });
+        } else if (numericKeys.length === 1 && categoryKeys.length >= 1) {
+          const chartType = this.getChartTypeByIndex(seriesIndex);
+          actions.push(
+            this.pushAction(
+              newSeries(categoryKeys[0], numericKeys[0], chartType)
+            )
+          );
+          seriesIndex++;
+        } else if (numericKeys.length === 1) {
+          const chartType = this.getChartTypeByIndex(seriesIndex);
+          actions.push(
+            this.pushAction(
+              newSeries(numericKeys[0], numericKeys[0], chartType)
+            )
+          );
+          seriesIndex++;
+        }
+      } else {
+        if (numericKeys.length > 0) {
+          numericKeys.forEach((key) => {
+            const chartType = this.getChartTypeByIndex(seriesIndex);
+            actions.push(this.pushAction(newSeries(key, key, chartType)));
+            seriesIndex++;
+          });
+        }
+      }
+      return actions;
+    }
+
+    private getChartTypeByIndex(index: number): string {
+      if (index < chartTypesArray.length) {
+        return chartTypesArray[index];
+      }
+      return chartTypesArray[chartTypesArray.length - 1] || "line";
+    }
+
+    dispatchDataChanged(chartData: Array<JSONObject>): void {
+      this.dispatch(
+        customAction<ActionDataType>({
+          type: "chartDataChanged",
+          chartData,
+        })
+      );
+    }
+  }
+  return SeriesListComp;
+}

package/src/components/TabPropertyView.tsx

@@ -0,0 +1,127 @@
+import {
+    childrenToProps,
+    changeValueAction,
+    CompAction,
+    Option,
+    RedButton,
+    Section,
+    toJSONObject,
+} from "lowcoder-sdk";
+import { TabUiPropsType, newTabItem } from "../comps/tab/constants";
+
+export function TabPropertyView(
+    children: TabUiPropsType,
+    dispatch: (action: CompAction) => void
+) {
+    const { onEvent } = childrenToProps(children);
+
+    const importJsonToItems = () => {
+        const rawProxy = children.defaultTabData.getView();
+        let raw: any;
+        try {
+            raw = JSON.parse(JSON.stringify(rawProxy));
+        } catch (e) {
+            raw = rawProxy;
+        }
+
+        console.log("DEBUG: Import raw (sanitized):", raw);
+
+        let arr: any[] = [];
+        if (Array.isArray(raw)) arr = raw;
+        else if (raw && typeof raw === "object") {
+            if ("data" in raw || "label" in raw) {
+                arr = [raw];
+            } else {
+                const values = Object.values(raw);
+                if (values.length > 0 && typeof values[0] === "object") arr = values as any[];
+                else arr = [raw];
+            }
+        }
+        console.log("DEBUG: Intermediate arr:", arr);
+
+        const normalized = (arr ?? [])
+            .filter(Boolean)
+            .map((item: any, index: number) => {
+                let data = item?.data ?? [];
+                console.log("DEBUG: Data before clone:", data);
+
+                if (data && !Array.isArray(data)) data = [data];
+                console.log("DEBUG: Data after clone:", data);
+
+                return {
+                    id: String(item?.id ?? index + 1),
+                    label: String(item?.label ?? item?.id ?? `Tab ${index + 1}`),
+                    data,
+                };
+            });
+
+        console.log("DEBUG: Normalized items:", normalized);
+        children.items.dispatch(changeValueAction(normalized));
+    };
+
+    const exportItemsToJson = () => {
+        const items = children.items.getView();
+        const exported = items.map((it: any) => {
+            const v = it.getView();
+            return {
+                id: String(v.id),
+                label: String(v.label),
+                data: v.data,
+            };
+        });
+
+        dispatch(changeValueAction(children.defaultTabData, exported));
+    };
+
+    return (
+        <>
+            <Section name="Data (JSON)">
+                {children.defaultTabData.propertyView({
+                    label: "Default Tab Data (JSON)",
+                })}
+
+                <div
+                    style={{
+                        marginTop: 8,
+                        display: "flex",
+                        gap: 8,
+                        justifyContent: "flex-end",
+                    }}
+                >
+                    <RedButton onClick={importJsonToItems}>Import JSON to Tabs</RedButton>
+                    {/* <RedButton onClick={exportItemsToJson}>Export Tabs to JSON</RedButton> */}
+                </div>
+            </Section>
+
+            <Section name="Tabs">
+                <Option
+                    items={children.items.getView()}
+                    title="Tab Items"
+                    itemTitle={(item) => item.getView().label}
+                    popoverTitle={(item) => item.getView().label}
+                    content={(item, index) => (
+                        <>
+                            {item.getPropertyView()}
+                            <RedButton
+                                onClick={() => children.items.dispatch(children.items.deleteAction(index))}
+                            >
+                                Delete
+                            </RedButton>
+                        </>
+                    )}
+                    onAdd={() => {
+                        children.items.dispatch(
+                            children.items.pushAction(newTabItem(children.items.getView().length + 1))
+                        );
+                    }}
+                    onMove={(fromIndex, toIndex) => {
+                        children.items.dispatch(children.items.arrayMoveAction(fromIndex, toIndex));
+                    }}
+                    dataIndex={(item) => item.getView().id}
+                />
+            </Section>
+
+            <Section name="Interaction">{onEvent.propertyView?.({ label: "Events" })}</Section>
+        </>
+    );
+}