lowcoder-map-component 0.1.1

package/src/comps/tab/comp.tsx

@@ -0,0 +1,283 @@
+import { UICompBuilder, withExposingConfigs, withDefault } from "lowcoder-sdk";
+import { TabPropertyView } from "@/components/TabPropertyView";
+import { TabCompProps, tabData, TabUiPropsType } from "./constants";
+import { useState, useEffect, useMemo, CSSProperties } from "react";
+
+const TabTmpComp = (function () {
+    return new UICompBuilder(TabCompProps, (props: TabUiPropsType) => {
+        const [activeTab, setActiveTab] = useState(props.defaultValue);
+
+        const tabs = useMemo(() => {
+            console.log("DEBUG RENDER: Props items:", props.items);
+            return props.items.map((item: any) => {
+                const rawData = item.children.data.getView();
+                console.log(`DEBUG RENDER Tab ${item.children.label.getView()} Data:`, rawData);
+
+                return {
+                    id: String(item.children.id.getView()),
+                    label: item.children.label.getView(),
+                    data: rawData,
+                    disabled: false,
+                };
+            });
+        }, [props.items]);
+
+        useEffect(() => {
+            const currentTabStillExists = tabs.some((t: any) => t.id === activeTab);
+            if (currentTabStillExists) return;
+
+            const hasDefault = tabs.some((t: any) => t.id === props.defaultValue);
+            if (hasDefault) setActiveTab(props.defaultValue);
+            else if (tabs.length > 0) setActiveTab(tabs[0].id);
+        }, [props.defaultValue, tabs, activeTab]);
+
+        const handleTabClick = (val: string) => {
+            setActiveTab(val);
+            props.onEvent("change");
+        };
+
+        const cardTableCss = `
+      .lc-cardtable {
+        height: 100%;
+        width: 100%;
+        background: #24384f;
+      }
+
+      .lc-cardtable .lc-cardtable-wrap {
+        overflow-x: auto;
+      }
+
+      .lc-cardtable table {
+        width: 100%;
+        border-collapse: separate;
+        border-spacing: 0 12px; /* khoảng cách giữa các row như card */
+        background: transparent;
+      }
+
+      .lc-cardtable thead tr {
+        background: transparent;
+      }
+
+      .lc-cardtable thead th {
+        padding: 10px 12px;
+        border-bottom: none;
+        text-align: left;
+        font-size: 15px;
+        font-weight: 800;
+        color: rgba(255,255,255,0.9);
+        position: sticky;
+        top: 0;
+        background: #24384f;
+        z-index: 2;
+        white-space: nowrap;
+      }
+
+      .lc-cardtable tbody td {
+        padding: 14px 14px;
+        border-bottom: none;
+        font-size: 15px;
+        color: #0f172a;
+        vertical-align: middle;
+        background: #e9eef3;
+      }
+
+      .lc-cardtable tbody td:first-child {
+        border-top-left-radius: 12px;
+        border-bottom-left-radius: 12px;
+
+        box-shadow: inset 6px 0 0 #ef4444;
+      }
+
+      .lc-cardtable tbody td:last-child {
+        border-top-right-radius: 12px;
+        border-bottom-right-radius: 12px;
+      }
+
+      .lc-cardtable tbody tr:hover td {
+        filter: brightness(0.985);
+        transform: translateY(-1px);
+        transition: transform .12s ease, filter .12s ease;
+      }
+    `;
+
+        return (
+            <>
+                <style>{cardTableCss}</style>
+
+                <div style={styles.container} className="lc-cardtable">
+                    {/* Tabs header */}
+                    <div style={styles.header}>
+                        {tabs.map((tab: any, idx: number) => {
+                            const isActive = activeTab === tab.id;
+                            return (
+                                <div
+                                    key={tab.id || idx}
+                                    onClick={() => handleTabClick(tab.id)}
+                                    style={{
+                                        ...styles.tab,
+                                        ...(isActive ? styles.tabActive : null),
+                                        ...(tab.disabled ? styles.tabDisabled : null),
+                                    }}
+                                >
+                                    {tab.label}
+                                </div>
+                            );
+                        })}
+                    </div>
+
+                    {/* Content */}
+                    <div style={styles.content}>
+                        <div style={styles.contentDesc}>
+                            {(() => {
+                                const activeItem =
+                                    tabs.find((t: any) => t.id === activeTab) || tabs[0];
+                                let data = activeItem?.data;
+
+                                if (data && !Array.isArray(data)) data = [data];
+
+                                if (Array.isArray(data) && data.length > 0) {
+                                    const columns = Object.keys(data[0] || {});
+                                    return (
+                                        <div style={styles.tableWrap} className="lc-cardtable-wrap">
+                                            <table style={styles.table}>
+                                                <thead>
+                                                    <tr style={styles.theadRow}>
+                                                        {columns.map((col) => (
+                                                            <th key={col} style={styles.th}>
+                                                                {col}
+                                                            </th>
+                                                        ))}
+                                                    </tr>
+                                                </thead>
+                                                <tbody>
+                                                    {data.map((row: any, rowIndex: number) => (
+                                                        <tr key={rowIndex}>
+                                                            {columns.map((col) => (
+                                                                <td key={col} style={styles.td}>
+                                                                    {typeof row?.[col] === "object" &&
+                                                                        row?.[col] !== null
+                                                                        ? JSON.stringify(row[col])
+                                                                        : row?.[col]}
+                                                                </td>
+                                                            ))}
+                                                        </tr>
+                                                    ))}
+                                                </tbody>
+                                            </table>
+                                        </div>
+                                    );
+                                }
+
+                                return (
+                                    <div style={styles.empty}>No data for this tab</div>
+                                );
+                            })()}
+                        </div>
+                    </div>
+                </div>
+            </>
+        );
+    })
+        .setPropertyViewFn(TabPropertyView)
+        .build();
+})();
+
+export const TabCompWithDefault = withDefault(
+    withExposingConfigs(TabTmpComp, []),
+    {
+        items: tabData,
+        defaultTabData: tabData,
+    }
+);
+
+const styles: { [key: string]: CSSProperties } = {
+    container: {
+        display: "flex",
+        flexDirection: "column",
+        width: "100%",
+        height: "100%",
+        background: "#24384f",
+        overflow: "hidden",
+    },
+
+    header: {
+        display: "flex",
+        gap: 16,
+        padding: "12px 14px",
+        borderBottom: "1px solid rgba(255,255,255,0.18)",
+        background: "#24384f",
+    },
+
+    tab: {
+        padding: "10px 12px",
+        borderRadius: 10,
+        border: "1px solid transparent",
+        backgroundColor: "transparent",
+        fontWeight: 700,
+        fontSize: 16,
+        color: "rgba(255,255,255,0.70)",
+        cursor: "pointer",
+        userSelect: "none",
+        lineHeight: "20px",
+        whiteSpace: "nowrap",
+    },
+
+    tabActive: {
+        color: "#60a5fa",
+        borderBottom: "2px solid #60a5fa",
+        borderRadius: 0,
+        paddingBottom: 12,
+    },
+
+    tabDisabled: {
+        cursor: "not-allowed",
+        color: "rgba(255,255,255,0.35)",
+        opacity: 0.7,
+        pointerEvents: "none",
+    },
+
+    content: {
+        padding: 12,
+        flex: 1,
+        overflow: "auto",
+        background: "#24384f",
+    },
+
+    contentDesc: {
+        marginTop: 0,
+        color: "rgba(255,255,255,0.85)",
+        fontSize: 14,
+    },
+
+    empty: {
+        padding: 12,
+        borderRadius: 12,
+        background: "rgba(255,255,255,0.08)",
+        border: "1px solid rgba(255,255,255,0.12)",
+        color: "rgba(255,255,255,0.85)",
+    },
+
+    tableWrap: {
+        overflowX: "auto",
+        border: "none",
+    },
+
+    table: {
+        width: "100%",
+        borderCollapse: "separate",
+        borderSpacing: "0 12px",
+        background: "transparent",
+    },
+
+    theadRow: {
+        backgroundColor: "transparent",
+    },
+
+    th: {
+        whiteSpace: "nowrap",
+    },
+
+    td: {
+        wordBreak: "break-word",
+    },
+};

package/src/comps/tab/constants.tsx

@@ -0,0 +1,79 @@
+import {
+    RecordConstructorToView,
+    StringControl,
+    eventHandlerControl,
+    list,
+    uiChildren,
+    withDefault,
+    jsonControl,
+    toJSONObject,
+    toJSONObjectArray,
+    genRandomKey,
+    MultiCompBuilder,
+} from "lowcoder-sdk";
+
+export const tabData = [
+    {
+        id: "1",
+        label: "Tab 1",
+        data: [{ A: "A", B: "B", C: "C" }],
+    },
+    {
+        id: "2",
+        label: "Tab 2",
+        data: [{ A: "A", B: "B", C: "C" }],
+    },
+    {
+        id: "3",
+        label: "Tab 3",
+        data: [{ A: "A", B: "B", C: "C" }],
+    },
+];
+
+export const tabEventOptions = [
+    { label: "Change", description: "Triggered when tab is changed" },
+] as const;
+
+
+
+const TabItemTmpComp = new MultiCompBuilder(
+    {
+        id: withDefault(StringControl, "1"),
+        label: withDefault(StringControl, "Tab Label"),
+        data: withDefault(jsonControl((v) => v, []), []),
+    },
+    (props) => props
+)
+    .setPropertyViewFn((children) => (
+        <>
+            {children.label.propertyView({ label: "Label" })}
+            {children.data.propertyView({ label: "Data" })}
+        </>
+    ))
+    .build();
+
+export const TabItemComp = TabItemTmpComp;
+
+export function newTabItem(id: number | string) {
+    return {
+        id: String(genRandomKey()),
+        label: `Tab ${id}`,
+        data: [],
+    };
+}
+
+export const TabCompProps = {
+    items: withDefault(list(TabItemComp), tabData),
+
+    defaultTabData: withDefault(
+        jsonControl(toJSONObjectArray, tabData),
+        tabData
+    ),
+
+
+    defaultValue: withDefault(StringControl, "1"),
+    onEvent: eventHandlerControl(tabEventOptions),
+};
+
+const tabUiChildrenMap = uiChildren(TabCompProps);
+export type TabUiPropsType = RecordConstructorToView<typeof tabUiChildrenMap>;

package/src/configs/barChartConfig.tsx

@@ -0,0 +1,153 @@
+import { i18nObjs, trans } from "@/i18n/comps";
+import { BarSeriesOption } from "echarts";
+import {
+  BoolControl,
+  ColorControl,
+  CompAction,
+  dropdownControl,
+  jsonControl,
+  MultiCompBuilder,
+  NumberControl,
+  showLabelPropertyView,
+  StringControl,
+  toArray,
+  withDefault,
+} from "lowcoder-sdk";
+
+export const BarTypeOptions = [
+  {
+    label: trans("chart.bar"),
+    value: "bar",
+  },
+  {
+    label: trans("chart.waterfallBar"),
+    value: "waterfall",
+  },
+  {
+    label: trans("chart.polar"),
+    value: "polar",
+  },
+] as const;
+
+export const BarChartConfig = (function () {
+  return new MultiCompBuilder(
+    {
+      showLabel: withDefault(BoolControl, true),
+      type: dropdownControl(BarTypeOptions, "bar"),
+      barWidth: withDefault(NumberControl, 40),
+      showBackground: withDefault(BoolControl, false),
+      backgroundColor: withDefault(
+        ColorControl,
+        i18nObjs.defaultBarChartOption.barBg
+      ),
+      radiusAxisMax: NumberControl,
+      polarRadiusStart: withDefault(StringControl, "30"),
+      polarRadiusEnd: withDefault(StringControl, "80%"),
+      polarStartAngle: withDefault(NumberControl, 90),
+      polarEndAngle: withDefault(NumberControl, -180),
+      polarIsTangent: withDefault(BoolControl, false),
+      stack: withDefault(BoolControl, false),
+      race: withDefault(BoolControl, false),
+      labelData: jsonControl(toArray, []),
+    },
+    (props): BarSeriesOption => {
+      const config: BarSeriesOption & { polarData: any; race: any } = {
+        type: props.type,
+        realtimeSort: props.race,
+        seriesLayoutBy: props.race ? "column" : undefined,
+        label: {
+          show: props.showLabel,
+          position: "top",
+          valueAnimation: props.race,
+        },
+        barWidth: `${props.barWidth}%`,
+        showBackground: props.showBackground,
+        backgroundStyle: {
+          color: props.backgroundColor,
+        },
+        polarData: {
+          radiusAxisMax: props.radiusAxisMax,
+          polarRadiusStart: props.polarRadiusStart,
+          polarRadiusEnd: props.polarRadiusEnd,
+          polarStartAngle: props.polarStartAngle,
+          polarEndAngle: props.polarEndAngle,
+          labelData: props.labelData,
+          polarIsTangent: props.polarIsTangent,
+        },
+
+        race: props.race,
+      };
+      if (props.stack) {
+        config.stack = "stackValue";
+      }
+      if (props.type === "waterfall") {
+        config.label = undefined;
+        config.stack = "stackValue";
+      }
+      if (props.type === "polar") {
+        config.coordinateSystem = "polar";
+      }
+      return config;
+    }
+  )
+    .setPropertyViewFn((children, dispatch: (action: CompAction) => void) => (
+      <>
+        {/* <Dropdown
+          value={children.type.getView()}
+          options={BarTypeOptions}
+          label={trans("chart.barType")}
+          onChange={(value: string) => {
+            dispatch(changeChildAction("type", value));
+          }}
+        /> */}
+        {showLabelPropertyView(children)}
+        {children.barWidth.propertyView({
+          label: trans("barChart.barWidth"),
+        })}
+        {children.type.getView() !== "waterfall" &&
+          children.race.propertyView({
+            label: trans("barChart.race"),
+          })}
+        {children.type.getView() !== "waterfall" &&
+          children.stack.propertyView({
+            label: trans("barChart.stack"),
+          })}
+        {children.showBackground.propertyView({
+          label: trans("barChart.showBg"),
+        })}
+        {children.showBackground.getView() &&
+          children.backgroundColor.propertyView({
+            label: trans("barChart.bgColor"),
+          })}
+        {children.type.getView() === "polar" &&
+          children.polarIsTangent.propertyView({
+            label: trans("barChart.polarIsTangent"),
+          })}
+        {children.type.getView() === "polar" &&
+          children.polarStartAngle.propertyView({
+            label: trans("barChart.polarStartAngle"),
+          })}
+        {children.type.getView() === "polar" &&
+          children.polarEndAngle.propertyView({
+            label: trans("barChart.polarEndAngle"),
+          })}
+        {children.type.getView() === "polar" &&
+          children.radiusAxisMax.propertyView({
+            label: trans("barChart.radiusAxisMax"),
+          })}
+        {children.type.getView() === "polar" &&
+          children.polarRadiusStart.propertyView({
+            label: trans("barChart.polarRadiusStart"),
+          })}
+        {children.type.getView() === "polar" &&
+          children.polarRadiusEnd.propertyView({
+            label: trans("barChart.polarRadiusEnd"),
+          })}
+        {children.type.getView() === "polar" &&
+          children.labelData.propertyView({
+            label: trans("barChart.polarLabelData"),
+          })}
+      </>
+    ))
+    .build();
+})();

package/src/configs/baseConfig.tsx

@@ -0,0 +1,66 @@
+import { ChartType } from "@/controls";
+import { EChartPropsType } from "../utils/echarts.util";
+
+export function getBaseConfig(props: EChartPropsType, type?: ChartType) {
+  const gridPos = {
+    left: props?.left,
+    right: props?.right,
+    bottom: props?.bottom,
+    top: props?.top,
+  };
+
+  const baseConfig: any = {
+    title: {
+      text: props.title,
+      top: props.echartsTitleVerticalConfig.top,
+      left: props.echartsTitleConfig.top,
+      textStyle: props?.titleStyle, // Simplified for brevity
+    },
+    backgroundColor: "#FFFFFF", // Simplified for brevity
+    legend: {
+      ...props.legendConfig,
+      textStyle: props?.legendStyle, // Simplified for brevity
+    },
+    tooltip: props.tooltip
+      ? ["map"].includes(type as string)
+        ? {}
+        : {
+            trigger: "axis",
+            axisPointer: {
+              type: "line",
+              lineStyle: {
+                color: "rgba(0,0,0,0.2)",
+                width: 2,
+                type: "solid",
+              },
+            },
+          }
+      : undefined,
+    grid: { ...gridPos, containLabel: true },
+    animationDuration: props.animationDuration,
+  };
+
+  if (props.areaPieces.length > 0) {
+    const pieces = props.areaPieces
+      .filter(
+        (p: any) => p.getView().from && p.getView().to && p.getView().color
+      )
+      .map((p: any) => ({
+        ...(p.getView().from && { min: parseInt(p.getView().from) }),
+        ...(p.getView().to && { max: parseInt(p.getView().to) }),
+        ...(p.getView().color && { color: p.getView().color }),
+      }));
+
+    if (pieces.length > 0) {
+      baseConfig.visualMap = {
+        type: "piecewise",
+        show: false,
+        dimension: 0,
+        seriesIndex: 0,
+        pieces,
+      };
+    }
+  }
+
+  return baseConfig;
+}

package/src/configs/candleStickChartConfig.tsx

@@ -0,0 +1,35 @@
+import { trans } from "@/i18n/comps";
+import { CandlestickSeriesOption } from "echarts";
+import {
+  BoolControl,
+  MultiCompBuilder,
+  showLabelPropertyView,
+} from "lowcoder-sdk";
+
+export const CandleStickChartConfig = (function () {
+  return new MultiCompBuilder(
+    {
+      showLabel: BoolControl,
+    },
+    (props): CandlestickSeriesOption => {
+      const config: CandlestickSeriesOption = {
+        type: "candlestick",
+        label: {
+          show: props.showLabel,
+          position: "top",
+        },
+      };
+      return config;
+    }
+  )
+    .setPropertyViewFn((children) => (
+      <>
+        {showLabelPropertyView(children)}
+        {children.type.propertyView({
+          label: trans("candleStickChart.candleStickType"),
+          radioButton: true,
+        })}
+      </>
+    ))
+    .build();
+})();