lowcoder-map-component 0.1.1

package/src/configs/treemapChartConfig.tsx

@@ -0,0 +1,31 @@
+import { trans } from "@/i18n/comps";
+import { TreemapSeriesOption } from "echarts";
+import {
+  BoolControl,
+  MultiCompBuilder,
+  showLabelPropertyView,
+} from "lowcoder-sdk";
+
+export const TreemapChartConfig = (function () {
+  return new MultiCompBuilder(
+    {
+      showLabel: BoolControl,
+    },
+    (_): TreemapSeriesOption => {
+      const config: TreemapSeriesOption = {
+        type: "treemap",
+      };
+      return config;
+    }
+  )
+    .setPropertyViewFn((children) => (
+      <>
+        {showLabelPropertyView(children)}
+        {children.type.propertyView({
+          label: trans("treemapChart.treemapType"),
+          radioButton: true,
+        })}
+      </>
+    ))
+    .build();
+})();

package/src/controls/AnimationsControls.tsx

@@ -0,0 +1,3 @@
+import { NumberControl, withDefault } from "lowcoder-sdk";
+
+export const AnimationDuration = withDefault(NumberControl, 1000);

package/src/controls/AutoHeightControl.tsx

@@ -0,0 +1,2 @@
+import { AutoHeightControl } from "lowcoder-sdk";
+export { AutoHeightControl };

package/src/controls/AxisControls.tsx

@@ -0,0 +1,146 @@
+import { trans } from "@/i18n/comps";
+import { XAXisComponentOption, YAXisComponentOption } from "echarts";
+import {
+  MultiCompBuilder,
+  NumberControl,
+  StringControl,
+  dropdownControl,
+  withContext,
+} from "lowcoder-sdk";
+
+export const XAxisTypeOptions = [
+  {
+    label: trans("chart.auto"),
+    value: "default",
+  },
+  {
+    label: trans("chart.categoryAxis"),
+    value: "category",
+  },
+  {
+    label: trans("chart.valueAxis"),
+    value: "value",
+  },
+  {
+    label: trans("chart.timeAxis"),
+    value: "time",
+  },
+  {
+    label: trans("chart.logAxis"),
+    value: "log",
+  },
+] as const;
+
+export const YAxisTypeOptions = [
+  {
+    label: trans("chart.valueAxis"),
+    value: "value",
+  },
+  {
+    label: trans("chart.categoryAxis"),
+    value: "category",
+  },
+  {
+    label: trans("chart.timeAxis"),
+    value: "time",
+  },
+  {
+    label: trans("chart.logAxis"),
+    value: "log",
+  },
+] as const;
+
+export const AxisFormatterComp = withContext(
+  new MultiCompBuilder({ value: StringControl }, (props) => props.value)
+    .setPropertyViewFn((children) =>
+      children.value.propertyView({
+        label: trans("chart.yAxisDataFormat"),
+        placeholder: "{{value}}",
+        tooltip: trans("chart.yAxisDataFormatTooltip"),
+      })
+    )
+    .build(),
+  ["value"] as const
+);
+
+const axisCommonMap = {
+  axisName: StringControl,
+  logBase: NumberControl,
+};
+
+// X-Axis Config
+export const XAxisConfig = new MultiCompBuilder(
+  {
+    ...axisCommonMap,
+    type: dropdownControl(XAxisTypeOptions, "default"),
+  },
+  (props): XAXisComponentOption => {
+    const config: XAXisComponentOption = {
+      name: props.axisName,
+      nameGap: 22,
+      nameLocation: "middle",
+    };
+    if (props.type !== "default") {
+      config.type = props.type;
+    }
+    return config;
+  }
+)
+  .setPropertyViewFn((children) => (
+    <>
+      {children.axisName.propertyView({ label: trans("chart.xAxisName") })}
+      {children.type.propertyView({
+        label: trans("chart.xAxisType"),
+        tooltip: trans("chart.xAxisTypeTooltip"),
+      })}
+      {children.type.getView() === "log" &&
+        children.logBase.propertyView({ label: trans("chart.logBase") })}
+    </>
+  ))
+  .build();
+
+// Y-Axis Config
+export const YAxisConfig = new MultiCompBuilder(
+  {
+    ...axisCommonMap,
+    yAxisType: dropdownControl(YAxisTypeOptions, "value"),
+    formatter: AxisFormatterComp,
+  },
+  (props): YAXisComponentOption => {
+    const config: YAXisComponentOption = {
+      name: props.axisName,
+      type: props.yAxisType,
+      nameTextStyle: { align: "left" },
+    };
+    const numberFormat = new Intl.NumberFormat(undefined, {
+      notation: "compact",
+    });
+    (config.axisLabel as any) = {
+      formatter: (value: string | number) => {
+        const res = (props.formatter as any)({ value });
+        if (res) return res;
+        if (
+          (props.yAxisType === "value" || props.yAxisType === "log") &&
+          typeof value === "number"
+        ) {
+          return numberFormat.format(value);
+        }
+        return value + "";
+      },
+    };
+    if (props.yAxisType === "log") {
+      (config as any).logBase = props.logBase || 10;
+    }
+    return config;
+  }
+)
+  .setPropertyViewFn((children) => (
+    <>
+      {children.axisName.propertyView({ label: trans("chart.yAxisName") })}
+      {children.yAxisType.propertyView({ label: trans("chart.yAxisType") })}
+      {children.yAxisType.getView() === "log" &&
+        children.logBase.propertyView({ label: trans("chart.logBase") })}
+      {children.formatter.getPropertyView()}
+    </>
+  ))
+  .build();

package/src/controls/AxisVisibilityControl.tsx

@@ -0,0 +1,14 @@
+import { trans } from "@/i18n/comps";
+import { BoolControl, dropdownControl } from "lowcoder-sdk";
+
+export const ShowAxisControl = dropdownControl(
+  [
+    { label: trans("chart.hide"), value: "hide" },
+    { label: trans("chart.show"), value: "show" },
+    { label: trans("chart.custom"), value: "custom" },
+  ],
+  "show"
+);
+
+export const ShowXAxisControl = BoolControl;
+export const ShowYAxisControl = BoolControl;

package/src/controls/ChartTypeControl.tsx

@@ -0,0 +1,15 @@
+import { trans } from "@/i18n/comps";
+import { dropdownControl } from "lowcoder-sdk";
+
+export const ChartTypeOptions = [
+  { label: trans("chart.bar"), value: "bar" },
+  { label: trans("chart.line"), value: "line" },
+  { label: "Line V2", value: "linev2" },
+  { label: trans("chart.scatter"), value: "scatter" },
+  { label: trans("chart.pie"), value: "pie" },
+] as const;
+
+export type ChartType = (typeof ChartTypeOptions)[number]["value"];
+
+export const ChartTypeControl = (defaultValue: ChartType) =>
+  dropdownControl(ChartTypeOptions, defaultValue);

package/src/controls/ColorScaleControl.tsx

@@ -0,0 +1,221 @@
+import { trans } from "@/i18n/comps";
+import {
+  ChangeEventHandlerControl,
+  ColorControl,
+  JSONValue,
+  list,
+  MultiCompBuilder,
+  NumberControl,
+  Option,
+  RedButton,
+  RefControl,
+  StringControl,
+  withContext,
+} from "lowcoder-sdk";
+
+import { radioControl } from "./radioControl";
+
+export const ColorScaleTypeOptions = [
+  {
+    label: trans("colorScale.sequential"),
+    value: "sequential",
+  },
+  {
+    label: trans("colorScale.diverging"),
+    value: "diverging",
+  },
+  {
+    label: trans("colorScale.categorical"),
+    value: "categorical",
+  },
+] as const;
+
+export const ColorFormatterComp = withContext(
+  new MultiCompBuilder({ value: StringControl }, (props) => props.value)
+    .setPropertyViewFn((children) =>
+      children.value.propertyView({
+        label: trans("colorScale.colorFormat"),
+        placeholder: "#{{value}}",
+        tooltip: trans("colorScale.colorFormatTooltip"),
+      })
+    )
+    .build(),
+  ["value"] as const
+);
+
+interface ColorRange {
+  id: string;
+  from?: number;
+  to?: number;
+  color: string;
+}
+
+const colorScaleCommonMap = {
+  scaleType: radioControl(ColorScaleTypeOptions, "sequential"),
+  minColor: ColorControl,
+  maxColor: ColorControl,
+  midColor: ColorControl,
+  onEvent: ChangeEventHandlerControl,
+  viewRef: RefControl,
+};
+
+export const ColorRangeConfig = new MultiCompBuilder(
+  {
+    from: NumberControl,
+    to: NumberControl,
+    color: ColorControl,
+  },
+  (props): ColorRange => ({
+    id: `${props.from}-${props.to}-${Math.random().toString(36).substr(2, 9)}`,
+    from: props.from,
+    to: props.to,
+    color: props.color,
+  })
+)
+  .setPropertyViewFn((children) => (
+    <>
+      {children.from.propertyView({
+        label: trans("colorScale.valueFrom"),
+      })}
+      {children.to.propertyView({ label: trans("colorScale.valueTo") })}
+      {children.color.propertyView({ label: trans("colorScale.color") })}
+    </>
+  ))
+  .build();
+
+export const ColorScaleConfig = new MultiCompBuilder(
+  {
+    ...colorScaleCommonMap,
+    colorRanges: list(ColorRangeConfig),
+    formatter: ColorFormatterComp,
+  },
+  (props) => {
+    const config: any = {
+      scaleType: props.scaleType,
+    };
+
+    if (props.scaleType === "sequential" || props.scaleType === "diverging") {
+      config.minColor = props.minColor;
+      config.maxColor = props.maxColor;
+    }
+
+    if (props.scaleType === "diverging") {
+      config.midColor = props.midColor;
+    }
+
+    if (props.scaleType === "categorical") {
+      config.colorRanges = props.colorRanges;
+    }
+
+    return config;
+  }
+)
+  .setPropertyViewFn((children) => {
+    const scaleType = children.scaleType.getView();
+
+    return (
+      <>
+        {children.scaleType.propertyView({
+          label: trans("colorScale.colorScaleType"),
+          direction: "vertical",
+        })}
+
+        {(scaleType === "sequential" || scaleType === "diverging") && (
+          <>
+            {children.minColor.propertyView({
+              label: trans("colorScale.minColor"),
+            })}
+            {children.maxColor.propertyView({
+              label: trans("colorScale.maxColor"),
+            })}
+          </>
+        )}
+
+        {scaleType === "diverging" && (
+          <>
+            {children.midColor.propertyView({
+              label: trans("colorScale.midColor"),
+            })}
+          </>
+        )}
+
+        {scaleType === "categorical" && (
+          <Option
+            items={children.colorRanges.getView()}
+            title={trans("colorScale.colorRanges")}
+            itemTitle={(item) => {
+              const view = item.getView();
+              return `[${view.from}-${view.to}] ${view.color}`;
+            }}
+            popoverTitle={() => trans("colorScale.colorRange")}
+            content={(item, index) => (
+              <>
+                {item.children.from.propertyView({
+                  label: trans("colorScale.valueFrom"),
+                })}
+                {item.children.to.propertyView({
+                  label: trans("colorScale.valueTo"),
+                })}
+                {item.children.color.propertyView({
+                  label: trans("colorScale.color"),
+                })}
+                <RedButton
+                  onClick={() => {
+                    children.colorRanges.dispatch(
+                      children.colorRanges.deleteAction(index)
+                    );
+                  }}
+                  style={{ marginTop: "8px" }}
+                >
+                  {trans("colorScale.deleteRange")}
+                </RedButton>
+              </>
+            )}
+            onAdd={() => {
+              const old = children.colorRanges
+                .getView()
+                .map((i: any) => i.getView())
+                .at(-1);
+
+              children.colorRanges.dispatch(
+                children.colorRanges.pushAction({
+                  from: old?.from + 100 || 0,
+                  to: old?.to + 100 || 100,
+                  color: "#ff0000",
+                })
+              );
+            }}
+            onMove={(fromIndex, toIndex) => {
+              const action = children.colorRanges.arrayMoveAction(
+                fromIndex,
+                toIndex
+              );
+              children.colorRanges.dispatch(action);
+            }}
+            hide={(item) => false}
+            dataIndex={(item) => item.getView().id}
+          />
+        )}
+      </>
+    );
+  })
+  .build();
+
+// Componen
+export function calcColorScaleType(
+  data: Array<JSONValue | undefined>
+): "sequential" | "diverging" | "categorical" {
+  if (!data || data.length === 0) return "sequential";
+
+  const hasNegative = data.some((item) => typeof item === "number" && item < 0);
+  const hasPositive = data.some((item) => typeof item === "number" && item > 0);
+
+  if (hasNegative && hasPositive) return "diverging";
+
+  const uniqueValues = new Set(data.map((item) => String(item)));
+  if (uniqueValues.size <= 10) return "categorical";
+
+  return "sequential";
+}
+
+export const ColorScaleControls = ColorScaleConfig;

package/src/controls/ColumnControl.tsx

@@ -0,0 +1,204 @@
+import { trans } from "@/i18n/comps";
+import {
+  AlignClose,
+  AlignLeft,
+  AlignRight,
+  BoolControl,
+  ColorControl,
+  dropdownControl,
+  EchartDefaultChartStyle,
+  EchartDefaultTextStyle,
+  MultiCompBuilder,
+  NumberControl,
+  StringControl,
+  withDefault,
+} from "lowcoder-sdk";
+
+const SortOptions = [
+  { label: trans("chart.none"), value: "none" },
+  { label: trans("chart.ascending"), value: "asc" },
+  { label: trans("chart.descending"), value: "desc" },
+] as const;
+
+export const AlignOptions = [
+  {
+    label: <AlignLeft />,
+    value: "left",
+  },
+  {
+    label: <AlignClose />,
+    value: "center",
+  },
+  {
+    label: <AlignRight />,
+    value: "right",
+  },
+] as const;
+
+export const TableStyle = Array.from(
+  new Set(EchartDefaultTextStyle.concat(EchartDefaultChartStyle))
+);
+
+const ColumnStyleControls = [
+  {
+    name: "color",
+    label: trans("style.color"),
+    control: ColorControl,
+    defaultValue: "#000000",
+  },
+  {
+    name: "fontSize",
+    label: trans("style.fontSize"),
+    tooltip: trans("style.fontSizeTooltip"),
+    control: StringControl,
+    defaultValue: "14px",
+  },
+  {
+    name: "fontWeight",
+    label: trans("style.fontWeight"),
+    tooltip: trans("style.fontWeightTooltip"),
+    control: StringControl,
+    defaultValue: "normal",
+  },
+  {
+    name: "fontFamily",
+    label: trans("style.fontFamily"),
+    control: StringControl,
+    defaultValue: "Arial, sans-serif",
+  },
+  {
+    name: "fontStyle",
+    label: trans("style.fontStyle"),
+    control: dropdownControl(
+      [
+        { label: trans("style.normal"), value: "normal" },
+        { label: trans("style.italic"), value: "italic" },
+        { label: trans("style.oblique"), value: "oblique" },
+      ],
+      "normal"
+    ),
+  },
+  {
+    name: "shadowColor",
+    label: trans("style.shadowColor"),
+    control: ColorControl,
+  },
+  {
+    name: "boxShadow",
+    label: trans("style.boxShadow"),
+    control: StringControl,
+    defaultValue: "none",
+  },
+  {
+    name: "background",
+    label: trans("style.backgroundColor"),
+    control: ColorControl,
+  },
+  {
+    name: "borderColor",
+    label: trans("style.borderColor"),
+    control: ColorControl,
+    defaultValue: "#d9d9d9",
+  },
+  {
+    name: "borderStyle",
+    label: trans("style.borderStyle"),
+    tooltip: trans("style.borderStyleTooltip"),
+    control: StringControl,
+  },
+  {
+    name: "borderRadius",
+    label: trans("style.borderRadius"),
+    control: StringControl,
+  },
+  {
+    name: "borderWidth",
+    label: trans("style.borderWidth"),
+    control: StringControl,
+  },
+];
+
+const createColumnStyleControl = () => {
+  const styleMap: any = {};
+
+  ColumnStyleControls.forEach((styleConfig) => {
+    styleMap[styleConfig.name] = styleConfig.control;
+    if (styleConfig.defaultValue !== undefined) {
+      styleMap[styleConfig.name] = withDefault(
+        styleMap[styleConfig.name],
+        styleConfig.defaultValue
+      );
+    }
+  });
+
+  return new MultiCompBuilder(styleMap, (props) => props)
+    .setPropertyViewFn((children) => (
+      <div>
+        {ColumnStyleControls.map((styleConfig) => (
+          <div key={styleConfig.name} style={{ marginBottom: "8px" }}>
+            {children[styleConfig.name].propertyView({
+              label: styleConfig.label,
+              tooltip: styleConfig.tooltip,
+            })}
+          </div>
+        ))}
+      </div>
+    ))
+    .build();
+};
+
+const markColumnChildrenMap = {
+  title: StringControl,
+  dataIndex: StringControl,
+  key: StringControl,
+  visible: withDefault(BoolControl, false),
+  sortable: withDefault(BoolControl, true),
+  defaultSortOrder: dropdownControl(SortOptions, "none"),
+  align: dropdownControl(AlignOptions, "left"),
+  fixed: dropdownControl(
+    [
+      { label: trans("tableChart.none"), value: "none" },
+      { label: trans("tableChart.left"), value: "left" },
+      { label: trans("tableChart.right"), value: "right" },
+    ],
+    "none"
+  ),
+  width: NumberControl,
+  styles: createColumnStyleControl(),
+};
+
+export const ColumnConfigComp = new MultiCompBuilder(
+  markColumnChildrenMap,
+  (props) => {
+    return props;
+  }
+)
+  .setPropertyViewFn((children: any) => (
+    <>
+      {children.title.propertyView({
+        label: trans("tableChart.title"),
+      })}
+      {children.dataIndex.propertyView({
+        label: trans("tableChart.dataValue"),
+      })}
+      {children.visible.propertyView({ label: trans("tableChart.visible") })}
+      {children.sortable.propertyView({
+        label: trans("chart.sortable"),
+      })}
+      {children.sortable.getView() &&
+        children.defaultSortOrder.propertyView({
+          label: trans("chart.sortOrder"),
+        })}
+      {children.align.propertyView({
+        label: trans("tableChart.align"),
+        tooltip: trans("style.alignTooltip"),
+        radioButton: true,
+      })}
+      {children.fixed.propertyView({ label: trans("tableChart.fixed") })}
+      {children.width.propertyView({ label: trans("tableChart.width") })}
+      {children.styles.getPropertyView()}
+    </>
+  ))
+  .build();
+
+export { ColumnStyleControls };

package/src/controls/ConfigControl.tsx

@@ -0,0 +1,37 @@
+import { BarChartConfig } from "@/configs/barChartConfig";
+import { FunnelChartConfig } from "@/configs/funnelChartConfig";
+import { GaugeChartConfig } from "@/configs/gaugeChartConfig";
+import { LineChartConfig } from "@/configs/lineChartConfig";
+import { MapChartConfig } from "@/configs/mapChartConfig";
+import { MapChartConfigV2 } from "@/configs/mapChartConfigv2";
+
+import { MixedChartConfig } from "@/configs/mixedChartConfig";
+import { PieChartConfig } from "@/configs/pieChartConfig";
+import { ScatterChartConfig } from "@/configs/scatterChartConfig";
+import { TableChartConfig } from "@/configs/tableChartConfig";
+import { TotalChartConfig } from "@/configs/totalChartConfig";
+import { withType } from "lowcoder-sdk";
+
+export const ChartOptionMap = {
+  bar: BarChartConfig,
+  line: LineChartConfig,
+  linev2: LineChartConfig,
+  pie: PieChartConfig,
+  scatter: ScatterChartConfig,
+  map: MapChartConfig,
+  mapv2: MapChartConfigV2,
+  total: TotalChartConfig,
+  mixed: MixedChartConfig,
+  table: TableChartConfig,
+};
+
+export const ConfigControl = withType(ChartOptionMap, "line");
+
+export const EchartsOptionMap = {
+  funnel: FunnelChartConfig,
+  gauge: GaugeChartConfig,
+};
+
+export const ChartOptionComp = withType(ChartOptionMap, "line");
+export const EchartsOptionComp = withType(EchartsOptionMap, "funnel");
+export type CharOptionCompType = keyof typeof ChartOptionMap;

package/src/controls/DirectionControls.tsx

@@ -0,0 +1,20 @@
+import { trans } from "@/i18n/comps";
+import { dropdownControl, ValueFromOption } from "lowcoder-sdk";
+
+export const XAxisDirectionOptions = [
+  {
+    label: trans("chart.horizontal"),
+    value: "horizontal",
+  },
+  {
+    label: trans("chart.vertical"),
+    value: "vertical",
+  },
+] as const;
+
+export const XAxisDirection = dropdownControl(
+  XAxisDirectionOptions,
+  "horizontal"
+);
+
+export type XAxisDirectionType = ValueFromOption<typeof XAxisDirectionOptions>;