lowcoder-map-component 0.1.1

package/src/controls/IconControl.tsx

@@ -0,0 +1,88 @@
+import * as AntIcons from "@ant-design/icons";
+import { dropdownControl } from "lowcoder-sdk";
+import React from "react";
+
+type IconComponentType = React.ComponentType<
+  React.ComponentProps<typeof AntIcons.UserOutlined>
+>;
+
+export const getAllAntdIcons = () => {
+  const iconEntries = Object.entries(AntIcons);
+
+  const iconOptions = iconEntries.map(([name, component]) => ({
+    label: React.createElement(component as IconComponentType),
+    value: name,
+    icon: React.createElement(component as IconComponentType),
+  }));
+
+  return iconOptions;
+};
+
+export const AllIconOptions = getAllAntdIcons();
+
+export const getCommonIcons = () => {
+  const commonIcons = [
+    AntIcons.UserOutlined,
+    AntIcons.HomeOutlined,
+    AntIcons.SettingOutlined,
+    AntIcons.SearchOutlined,
+    AntIcons.HeartOutlined,
+    AntIcons.StarOutlined,
+    AntIcons.MessageOutlined,
+    AntIcons.BellOutlined,
+    AntIcons.CameraOutlined,
+    AntIcons.CloudOutlined,
+    AntIcons.EditOutlined,
+    AntIcons.DeleteOutlined,
+    AntIcons.PlusOutlined,
+    AntIcons.MinusOutlined,
+    AntIcons.CheckOutlined,
+    AntIcons.CloseOutlined,
+    AntIcons.WarningOutlined,
+    AntIcons.RiseOutlined,
+    AntIcons.FallOutlined,
+    AntIcons.LineOutlined,
+  ];
+
+  return commonIcons.map((IconComponent) => ({
+    label: React.createElement(IconComponent),
+    value: IconComponent.displayName || IconComponent.name,
+    icon: React.createElement(IconComponent),
+  }));
+};
+
+export const CommonIconOptions = getCommonIcons();
+
+export const IconControl = dropdownControl(CommonIconOptions, "");
+
+export const getIconComponent = (value: string): React.ReactElement => {
+  const IconComponent = (AntIcons as Record<string, IconComponentType | any>)[
+    value
+  ];
+
+  return React.createElement(IconComponent);
+};
+
+export const renderIcon = (
+  iconName: string,
+  props?: React.ComponentProps<IconComponentType>
+): React.ReactElement => {
+  const IconComponent = (AntIcons as Record<string, IconComponentType | any>)[
+    iconName
+  ];
+
+  return React.createElement(IconComponent, props);
+};
+
+export const IconComponents: Record<string, IconComponentType> = {};
+
+Object.entries(AntIcons).forEach(([name, component]) => {
+  if (
+    typeof component === "function" &&
+    !name.startsWith("createFromIconfontCN") &&
+    !name.startsWith("getTwoToneColor") &&
+    !name.startsWith("setTwoToneColor")
+  ) {
+    IconComponents[name] = component as IconComponentType;
+  }
+});

package/src/controls/LegendControl.tsx

@@ -0,0 +1,8 @@
+import { jsonControl } from "lowcoder-sdk";
+
+export const LegendControl = jsonControl(
+  (data) => {
+    return data || {};
+  },
+  { position: "top" }
+);

package/src/controls/RowLimitControl.tsx

@@ -0,0 +1,91 @@
+import { trans } from "@/i18n/comps";
+import {
+  BoolControl,
+  dropdownControl,
+  JSONObject,
+  MultiCompBuilder,
+  NumberControl,
+  withDefault,
+} from "lowcoder-sdk";
+
+export const CursorOptions = [
+  {
+    label: trans("chart.inside"),
+    value: "inside",
+  },
+  {
+    label: trans("chart.slider"),
+    value: "slider",
+  },
+  {
+    label: trans("chart.both"),
+    value: "both",
+  },
+] as const;
+
+export function applyRowLimit(data: JSONObject[], rowLimit: number) {
+  if (rowLimit > 0 && data.length > rowLimit) {
+    return data.slice(-rowLimit);
+  }
+  return data;
+}
+
+export const RowLimitConfig = new MultiCompBuilder(
+  {
+    rowLimit: withDefault(NumberControl, 50),
+    rowCursor: withDefault(BoolControl, false),
+    rowLimitAction: dropdownControl(CursorOptions, "inside"),
+    rowLimitMin: withDefault(NumberControl, 80),
+    rowLimitMax: withDefault(NumberControl, 100),
+  },
+  (props) => {
+    const { rowLimit, rowLimitMin, rowLimitMax, rowCursor, rowLimitAction } =
+      props;
+
+    // build dataZoom config
+    let dataZoom: any[] = [];
+    if (rowCursor) {
+      if (rowLimitAction === "inside" || rowLimitAction === "slider") {
+        dataZoom.push({
+          type: rowLimitAction,
+          start: rowLimitMin,
+          end: rowLimitMax,
+        });
+      } else if (rowLimitAction === "both") {
+        dataZoom = [
+          { type: "inside", start: rowLimitMin, end: rowLimitMax },
+          { type: "slider", start: rowLimitMin, end: rowLimitMax },
+        ];
+      }
+    }
+
+    return {
+      rowLimit,
+      rowCursor,
+      dataZoom,
+    };
+  }
+)
+  .setPropertyViewFn((children) => (
+    <>
+      {children.rowLimit.propertyView({
+        label: trans("chart.rowLimit"),
+        tooltip: trans("chart.rowLimitTooltip"),
+      })}
+      {children.rowCursor.propertyView({ label: trans("chart.rowCursor") })}
+      {children.rowCursor.getView() && (
+        <>
+          {children.rowLimitAction.propertyView({
+            label: trans("chart.rowLimitAction"),
+          })}
+          {children.rowLimitMin.propertyView({
+            label: trans("chart.rowLimitMin"),
+          })}
+          {children.rowLimitMax.propertyView({
+            label: trans("chart.rowLimitMax"),
+          })}
+        </>
+      )}
+    </>
+  ))
+  .build();

package/src/controls/StyleControls.tsx

@@ -0,0 +1,22 @@
+import { trans } from "@/i18n/comps";
+import { styleControl } from "lowcoder-sdk";
+
+export const CompStyles = [
+  { name: "margin", label: trans("style.margin"), margin: "margin" },
+  { name: "padding", label: trans("style.padding"), padding: "padding" },
+  { name: "textSize", label: trans("style.textSize"), textSize: "textSize" },
+  {
+    name: "backgroundColor",
+    label: trans("style.backgroundColor"),
+    backgroundColor: "backgroundColor",
+  },
+  { name: "border", label: trans("style.border"), border: "border" },
+  { name: "radius", label: trans("style.borderRadius"), radius: "radius" },
+  {
+    name: "borderWidth",
+    label: trans("style.borderWidth"),
+    borderWidth: "borderWidth",
+  },
+] as const;
+
+export const StyleControls = styleControl(CompStyles);

package/src/controls/TimeControls.tsx

@@ -0,0 +1,41 @@
+import { trans } from "@/i18n/comps";
+import dayjs from "dayjs";
+import { dropdownControl, StringControl, withDefault } from "lowcoder-sdk";
+
+export const TimeGranularityControl = dropdownControl(
+  [
+    { 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" },
+  ],
+  "day"
+);
+
+export const TimeRangeControl = dropdownControl(
+  [
+    { label: trans("chart.lastDay"), value: "lastDay" },
+    { label: trans("chart.lastWeek"), value: "lastWeek" },
+    { label: trans("chart.lastMonth"), value: "lastMonth" },
+    { label: trans("chart.lastQuarter"), value: "lastQuarter" },
+    { label: trans("chart.lastYear"), value: "lastYear" },
+    { label: trans("chart.currentDay"), value: "currentDay" },
+    { label: trans("chart.noFilter"), value: "noFilter" },
+    { label: trans("chart.custom"), value: "custom" },
+  ],
+  "noFilter"
+);
+
+export const StartTimeControl = withDefault(
+  StringControl,
+  dayjs().subtract(1, "month").format("DD-MM-YYYY")
+);
+
+export const EndTimeControl = withDefault(
+  StringControl,
+  dayjs().format("DD-MM-YYYY")
+);

package/src/controls/TrendlineControl.tsx

@@ -0,0 +1,89 @@
+import { trans } from "@/i18n/comps";
+import {
+  ColorControl,
+  dropdownControl,
+  MultiCompBuilder,
+  NumberControl,
+  StringControl,
+  withDefault,
+} from "lowcoder-sdk";
+
+export const TrendlineTypeOptions = [
+  {
+    label: trans("trendline.exponential"),
+    value: "exponential",
+  },
+  {
+    label: trans("trendline.linear"),
+    value: "linear",
+  },
+  {
+    label: trans("trendline.logarithmic"),
+    value: "logarithmic",
+  },
+  {
+    label: trans("trendline.polynomial"),
+    value: "polynomial",
+  },
+  {
+    label: trans("trendline.power"),
+    value: "power",
+  },
+  {
+    label: trans("trendline.movingAverage"),
+    value: "movingAverage",
+  },
+] as const;
+
+const TrendlineControl = new MultiCompBuilder(
+  {
+    type: dropdownControl(TrendlineTypeOptions, "polynomial"),
+    name: StringControl,
+    order: withDefault(NumberControl, 2),
+    period: withDefault(NumberControl, 2),
+    color: ColorControl,
+  },
+  (props) => ({
+    type: props.type,
+    name: props.name,
+    order: props.order,
+    period: props.period,
+    color: props.color,
+  })
+)
+  .setPropertyViewFn((children) => {
+    const trendlineType = children.type.getView();
+    return (
+      <>
+        {children.type.propertyView({
+          label: trans("trendline.type"),
+          radioButton: false,
+        })}
+
+        {trendlineType === "polynomial" &&
+          children.order.propertyView({
+            label: trans("trendline.order"),
+            tooltip: trans("trendline.orderTooltip"),
+          })}
+
+        {trendlineType === "movingAverage" &&
+          children.period.propertyView({
+            label: trans("trendline.period"),
+            tooltip: trans("trendline.periodTooltip"),
+          })}
+
+        {children.name.propertyView({
+          label: trans("trendline.name"),
+          tooltip: trans("trendline.nameTooltip"),
+        })}
+
+        {children.color.propertyView({
+          label: trans("trendline.color"),
+          tooltip: trans("trendline.colorTooltip"),
+        })}
+      </>
+    );
+  })
+  .build();
+
+export default TrendlineControl;

package/src/controls/UIEventControl.tsx

@@ -0,0 +1,21 @@
+import { trans } from "@/i18n/comps";
+import { eventHandlerControl } from "lowcoder-sdk";
+
+export const UIEventOptions = [
+  {
+    label: trans("chart.select"),
+    value: "select",
+    description: trans("chart.selectDesc"),
+  },
+  {
+    label: trans("chart.unSelect"),
+    value: "unselect",
+    description: trans("chart.unselectDesc"),
+  },
+  { label: trans("chart.click"), value: "click" },
+  { label: trans("chart.select"), value: "select" },
+  { label: trans("chart.timeRangeChange"), value: "timeRangeChange" },
+  { label: trans("chart.granularityChange"), value: "granularityChange" },
+] as const;
+
+export const UIEventControl = eventHandlerControl(UIEventOptions);

package/src/controls/index.ts

@@ -0,0 +1,16 @@
+export * from "./AnimationsControls";
+export * from "./AutoHeightControl";
+export * from "./AxisControls";
+export * from "./AxisVisibilityControl";
+export * from "./ChartTypeControl";
+export * from "./ColorScaleControl";
+export * from "./ColumnControl";
+export * from "./ConfigControl";
+export * from "./DirectionControls";
+export * from "./LegendControl";
+export * from "./radioControl";
+export * from "./RowLimitControl";
+export * from "./StyleControls";
+export * from "./TimeControls";
+export * from "./TrendlineControl";
+export * from "./UIEventControl";

package/src/controls/radioControl.tsx

@@ -0,0 +1,88 @@
+import { Radio, Space } from "antd";
+import { ControlParams, StringControl } from "lowcoder-sdk";
+import { ReactNode } from "react";
+
+export type RadioOption<T extends string> = {
+  label: string;
+  value: T;
+};
+
+export type RadioOptions<T extends string> = ReadonlyArray<RadioOption<T>>;
+
+export function radioControl<T extends string>(
+  options: RadioOptions<T>,
+  defaultValue: T
+) {
+  class RadioControl extends StringControl {
+    readonly options: RadioOptions<T> = options;
+    readonly defaultValue: T = defaultValue;
+
+    constructor(params: ControlParams) {
+      super({
+        ...params,
+        value: params.value || defaultValue,
+      });
+    }
+
+    // Property view method
+    propertyView(options: {
+      label?: string;
+      tooltip?: string;
+      radioButton?: boolean;
+      direction?: "vertical" | "horizontal";
+      type?: "button" | "default";
+      disabled?: boolean;
+    }): ReactNode {
+      const value = this.getView();
+      const disabled = options.disabled ?? false;
+
+      return (
+        <div style={{ marginBottom: "16px" }}>
+          {options.label && (
+            <div style={{ marginBottom: "8px" }}>
+              {options.label}
+              {options.tooltip && (
+                <span
+                  title={options.tooltip}
+                  style={{ marginLeft: "4px", cursor: "help" }}
+                >
+                  (ℹ)
+                </span>
+              )}
+            </div>
+          )}
+          <Radio.Group
+            value={value}
+            onChange={(e) => this.dispatchChangeValueAction(e.target.value)}
+            disabled={disabled}
+            optionType={
+              options.radioButton ? "button" : options.type || "default"
+            }
+            buttonStyle="solid"
+          >
+            <Space direction={options.direction || "horizontal"}>
+              {this.options.map((option) => (
+                <Radio key={option.value} value={option.value}>
+                  {option.label}
+                </Radio>
+              ))}
+            </Space>
+          </Radio.Group>
+        </div>
+      );
+    }
+
+    toJsonValue(value: any): string {
+      return String(value);
+    }
+
+    fromJsonValue(value: any): string {
+      return String(value);
+    }
+  }
+
+  return RadioControl as typeof RadioControl & {
+    options: RadioOptions<T>;
+    defaultValue: T;
+  };
+}

package/src/exposing/index.ts

@@ -0,0 +1,3 @@
+import { setPoint } from "./setPoint";
+
+export const exposingMethods = [setPoint];

package/src/exposing/setPoint.ts

@@ -0,0 +1,19 @@
+import { trans } from "@/i18n/comps";
+
+export const setPoint = {
+  method: {
+    name: "setPoint",
+    description: trans("methods.setPoint"),
+    params: [{ name: "data", type: "JSON", description: "JSON value" }],
+  },
+  execute: (comp: any, values: any[]) => {
+    const point = values[0];
+    if (!point.id || !point.x) {
+      return Promise.reject("ID and X are required");
+    }
+    const data = comp.children.data.getView();
+    comp.children.data.dispatchChangeValueAction(
+      JSON.stringify([...data, point], null, 2)
+    );
+  },
+};