lowcoder-map-component 0.1.1

package/src/configs/echartsTitleVerticalConfig.tsx

@@ -0,0 +1,50 @@
+import { trans } from "@/i18n/comps";
+import { LegendComponentOption } from "echarts";
+import {
+  AlignBottom,
+  AlignClose,
+  AlignTop,
+  dropdownControl,
+  MultiCompBuilder,
+} from "lowcoder-sdk";
+
+export const PositionTitleVerticalOptions = [
+  {
+    label: <AlignTop />,
+    value: "top",
+  },
+  {
+    label: <AlignClose />,
+    value: "center",
+  },
+  {
+    label: <AlignBottom />,
+    value: "bottom",
+  },
+] as const;
+
+export const EchartsTitleVerticalConfig = (function () {
+  return new MultiCompBuilder(
+    {
+      position: dropdownControl(PositionTitleVerticalOptions, "top"),
+    },
+    (props): LegendComponentOption => {
+      const config: LegendComponentOption = {
+        top: "top",
+        type: "scroll",
+      };
+      config.top = props.position;
+      return config;
+    }
+  )
+    .setPropertyViewFn((children) => (
+      <>
+        {children.position.propertyView({
+          label: trans("chart.titlePositionVertical"),
+          radioButton: true,
+          tooltip: trans("chart.changingLegend_x_Tooltip"),
+        })}
+      </>
+    ))
+    .build();
+})();

package/src/configs/funnelChartConfig.tsx

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

package/src/configs/gaugeChartConfig.tsx

@@ -0,0 +1,31 @@
+import { trans } from "@/i18n/comps";
+import { GaugeSeriesOption } from "echarts";
+import {
+  BoolControl,
+  MultiCompBuilder,
+  showLabelPropertyView,
+} from "lowcoder-sdk";
+
+export const GaugeChartConfig = (function () {
+  return new MultiCompBuilder(
+    {
+      showLabel: BoolControl,
+    },
+    (props): GaugeSeriesOption => {
+      const config: GaugeSeriesOption = {
+        type: "gauge",
+      };
+      return config;
+    }
+  )
+    .setPropertyViewFn((children) => (
+      <>
+        {showLabelPropertyView(children)}
+        {children.type.propertyView({
+          label: trans("gaugeChart.gaugeType"),
+          radioButton: true,
+        })}
+      </>
+    ))
+    .build();
+})();

package/src/configs/graphChartConfig.tsx

@@ -0,0 +1,31 @@
+import { trans } from "@/i18n/comps";
+import { GraphSeriesOption } from "echarts";
+import {
+  BoolControl,
+  MultiCompBuilder,
+  showLabelPropertyView,
+} from "lowcoder-sdk";
+
+export const GraphChartConfig = (function () {
+  return new MultiCompBuilder(
+    {
+      showLabel: BoolControl,
+    },
+    (props): GraphSeriesOption => {
+      const config: GraphSeriesOption = {
+        type: "graph",
+      };
+      return config;
+    }
+  )
+    .setPropertyViewFn((children) => (
+      <>
+        {showLabelPropertyView(children)}
+        {children.type.propertyView({
+          label: trans("graphChart.graphType"),
+          radioButton: true,
+        })}
+      </>
+    ))
+    .build();
+})();

package/src/configs/heatmapChartConfig.tsx

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

package/src/configs/legendConfig.tsx

@@ -0,0 +1,55 @@
+import { trans } from "@/i18n/comps";
+import { LegendComponentOption } from "echarts";
+import {
+  AlignBottom,
+  AlignClose,
+  AlignRight,
+  dropdownControl,
+  MultiCompBuilder,
+} from "lowcoder-sdk";
+
+export const legendPositionOptions = [
+  {
+    label: <AlignRight />,
+    value: "right",
+  },
+  {
+    label: <AlignBottom />,
+    value: "bottom",
+  },
+  {
+    label: <AlignClose />,
+    value: "close",
+  },
+] as const;
+
+export const LegendConfig = (function () {
+  return new MultiCompBuilder(
+    {
+      position: dropdownControl(legendPositionOptions, "bottom"),
+    },
+    (props): LegendComponentOption => {
+      const config: LegendComponentOption = {
+        top: "bottom",
+        type: "scroll",
+      };
+      if (props.position === "right") {
+        config.top = "center";
+        config.left = "right";
+        config.orient = "vertical";
+      } else if (props.position === "close") {
+        config.show = false;
+      }
+      return config;
+    }
+  )
+    .setPropertyViewFn((children) => (
+      <>
+        {children.position.propertyView({
+          label: trans("chart.legendPosition"),
+          radioButton: true,
+        })}
+      </>
+    ))
+    .build();
+})();

package/src/configs/lineChartConfig.tsx

@@ -0,0 +1,246 @@
+import TrendlineControl from "@/controls/TrendlineControl";
+import { trans } from "@/i18n/comps";
+import { LineSeriesOption } from "echarts";
+import {
+  BoolControl,
+  ColorControl,
+  ColorOrBoolCodeControl,
+  dropdownControl,
+  jsonControl,
+  MultiCompBuilder,
+  NumberControl,
+  showLabelPropertyView,
+  StringControl,
+  toArray,
+  withContext,
+  withDefault,
+} from "lowcoder-sdk";
+
+export const BorderTypeOptions = [
+  {
+    label: trans("chart.solid"),
+    value: "solid",
+  },
+  {
+    label: trans("chart.dashed"),
+    value: "dashed",
+  },
+  {
+    label: trans("chart.dotted"),
+    value: "dotted",
+  },
+] as const;
+
+export const SymbolOptions = [
+  {
+    label: trans("chart.rect"),
+    value: "rect",
+  },
+  {
+    label: trans("chart.circle"),
+    value: "circle",
+  },
+  {
+    label: trans("chart.roundRect"),
+    value: "roundRect",
+  },
+  {
+    label: trans("chart.triangle"),
+    value: "triangle",
+  },
+  {
+    label: trans("chart.diamond"),
+    value: "diamond",
+  },
+  {
+    label: trans("chart.pin"),
+    value: "pin",
+  },
+  {
+    label: trans("chart.arrow"),
+    value: "arrow",
+  },
+  {
+    label: trans("chart.none"),
+    value: "none",
+  },
+  {
+    label: trans("chart.emptyCircle"),
+    value: "emptyCircle",
+  },
+] as const;
+
+export const ItemColorComp = withContext(
+  new MultiCompBuilder(
+    { value: ColorOrBoolCodeControl },
+    (props) => props.value
+  )
+    .setPropertyViewFn((children) =>
+      children.value.propertyView({
+        label: trans("chart.pointColorLabel"),
+        placeholder: "{{value < 25000}}",
+        tooltip: trans("chart.pointColorTooltip"),
+      })
+    )
+    .build(),
+  ["seriesName", "value"] as const
+);
+
+export const LineChartConfig = (function () {
+  return new MultiCompBuilder(
+    {
+      showLabel: BoolControl,
+      showEndLabel: BoolControl,
+      stacked: BoolControl,
+      area: BoolControl,
+      smooth: BoolControl,
+      polar: BoolControl,
+      itemColor: ItemColorComp,
+      symbol: dropdownControl(SymbolOptions, "emptyCircle"),
+      symbolSize: withDefault(NumberControl, 4),
+      radiusAxisMax: NumberControl,
+      polarRadiusStart: withDefault(StringControl, "30"),
+      polarRadiusEnd: withDefault(StringControl, "80%"),
+      polarStartAngle: withDefault(NumberControl, 90),
+      polarEndAngle: withDefault(NumberControl, -180),
+      polarIsTangent: withDefault(BoolControl, false),
+      labelData: jsonControl(toArray, []),
+      borderColor: ColorControl,
+      borderWidth: NumberControl,
+      borderType: dropdownControl(BorderTypeOptions, "solid"),
+      showTrendline: withDefault(BoolControl, false),
+      trendlineControl: TrendlineControl,
+    },
+    (props): LineSeriesOption => {
+      const config: LineSeriesOption & {
+        polarData: any;
+        showTrendline: boolean;
+        trendlines: any;
+      } = {
+        type: "line",
+        label: {
+          show: props.showLabel,
+        },
+        symbol: props.symbol,
+        symbolSize: props.symbolSize,
+        showTrendline: props.showTrendline,
+        trendlines: props.trendlineControl,
+        itemStyle: {
+          color: (params) => {
+            const color = (props.itemColor as any)({
+              seriesName: params.seriesName,
+              value: params.data,
+            });
+            if (color === "true") {
+              return "red";
+            } else if (color === "false" || !color) {
+              return params.color;
+            }
+            return color;
+          },
+          borderColor: props.borderColor,
+          borderWidth: props.borderWidth,
+          borderType: props.borderType,
+        },
+        polarData: {
+          polar: props.polar,
+          radiusAxisMax: props.radiusAxisMax,
+          polarRadiusStart: props.polarRadiusStart,
+          polarRadiusEnd: props.polarRadiusEnd,
+          polarStartAngle: props.polarStartAngle,
+          polarEndAngle: props.polarEndAngle,
+          labelData: props.labelData,
+          polarIsTangent: props.polarIsTangent,
+        },
+      };
+      if (props.stacked) {
+        config.stack = "stackValue";
+      }
+      if (props.area) {
+        config.areaStyle = {};
+      }
+      if (props.smooth) {
+        config.smooth = true;
+      }
+      if (props.showEndLabel) {
+        config.endLabel = {
+          show: true,
+          formatter: "{a}",
+          distance: 20,
+        };
+      }
+      if (props.polar) {
+        config.coordinateSystem = "polar";
+      }
+      return config;
+    }
+  )
+    .setPropertyViewFn((children) => (
+      <>
+        {children.stacked.propertyView({
+          label: trans("lineChart.stacked"),
+        })}
+        {children.area.propertyView({
+          label: trans("lineChart.area"),
+        })}
+        {children.polar.propertyView({
+          label: trans("lineChart.polar"),
+        })}
+        {children.polar.getView() &&
+          children.polarIsTangent.propertyView({
+            label: trans("barChart.polarIsTangent"),
+          })}
+        {children.polar.getView() &&
+          children.polarStartAngle.propertyView({
+            label: trans("barChart.polarStartAngle"),
+          })}
+        {children.polar.getView() &&
+          children.polarEndAngle.propertyView({
+            label: trans("barChart.polarEndAngle"),
+          })}
+        {children.polar.getView() &&
+          children.radiusAxisMax.propertyView({
+            label: trans("barChart.radiusAxisMax"),
+          })}
+        {children.polar.getView() &&
+          children.polarRadiusStart.propertyView({
+            label: trans("barChart.polarRadiusStart"),
+          })}
+        {children.polar.getView() &&
+          children.polarRadiusEnd.propertyView({
+            label: trans("barChart.polarRadiusEnd"),
+          })}
+        {children.polar.getView() &&
+          children.labelData.propertyView({
+            label: trans("barChart.polarLabelData"),
+          })}
+        {showLabelPropertyView(children)}
+        {children.showEndLabel.propertyView({
+          label: trans("lineChart.showEndLabel"),
+        })}
+        {children.smooth.propertyView({ label: trans("chart.smooth") })}
+        {children.symbol.propertyView({
+          label: trans("lineChart.symbol"),
+        })}
+        {children.symbolSize.propertyView({
+          label: trans("lineChart.symbolSize"),
+        })}
+        {children.itemColor.getPropertyView()}
+        {children.borderColor.propertyView({
+          label: trans("lineChart.borderColor"),
+        })}
+        {children.borderWidth.propertyView({
+          label: trans("lineChart.borderWidth"),
+        })}
+        {children.borderType.propertyView({
+          label: trans("lineChart.borderType"),
+        })}
+        {children.showTrendline.propertyView({
+          label: trans("lineChart.showTrendline"),
+        })}
+        {children.showTrendline.getView() &&
+          children.trendlineControl.getPropertyView()}
+      </>
+    ))
+    .build();
+})();