lowcoder-map-component 0.1.1

package/src/configs/scatterChartConfig.tsx

@@ -0,0 +1,152 @@
+import { trans } from "@/i18n/comps";
+import { ScatterSeriesOption } from "echarts";
+import {
+  BoolControl,
+  ColorControl,
+  MultiCompBuilder,
+  NumberControl,
+  StringControl,
+  dropdownControl,
+  showLabelPropertyView,
+  withDefault,
+} from "lowcoder-sdk";
+
+const ScatterShapeOptions = [
+  {
+    label: trans("chart.circle"),
+    value: "circle",
+  },
+  {
+    label: trans("chart.rect"),
+    value: "rect",
+  },
+  {
+    label: trans("chart.triangle"),
+    value: "triangle",
+  },
+  {
+    label: trans("chart.diamond"),
+    value: "diamond",
+  },
+  {
+    label: trans("chart.pin"),
+    value: "pin",
+  },
+  {
+    label: trans("chart.arrow"),
+    value: "arrow",
+  },
+] as const;
+
+export const ScatterChartConfig = (function () {
+  return new MultiCompBuilder(
+    {
+      showLabel: BoolControl,
+      labelIndex: withDefault(NumberControl, 2),
+      shape: dropdownControl(ScatterShapeOptions, "circle"),
+      singleAxis: BoolControl,
+      boundaryGap: withDefault(BoolControl, true),
+      visualMap: BoolControl,
+      visualMapMin: NumberControl,
+      visualMapMax: NumberControl,
+      visualMapDimension: NumberControl,
+      visualMapColorMin: ColorControl,
+      visualMapColorMax: ColorControl,
+      polar: BoolControl,
+      heatmap: BoolControl,
+      heatmapMonth: withDefault(StringControl, "2021-09"),
+    },
+    (props): ScatterSeriesOption => {
+      return {
+        type: "scatter",
+        symbol: props.shape,
+        label: {
+          show: props.showLabel,
+          position: "right",
+          formatter: function (param) {
+            return param?.data?.[props?.labelIndex];
+          },
+        },
+        labelLayout: function () {
+          return {
+            x: "88%",
+            moveOverlap: "shiftY",
+          };
+        },
+        labelLine: {
+          show: true,
+          length2: 5,
+          lineStyle: {
+            color: "#bbb",
+          },
+        },
+        singleAxis: props.singleAxis,
+        boundaryGap: props.boundaryGap,
+        visualMapData: {
+          visualMap: props.visualMap,
+          visualMapMin: props.visualMapMin,
+          visualMapMax: props.visualMapMax,
+          visualMapDimension: props.visualMapDimension,
+          visualMapColorMin: props.visualMapColorMin,
+          visualMapColorMax: props.visualMapColorMax,
+        },
+        polar: props.polar,
+        heatmap: props.heatmap,
+        heatmapMonth: props.heatmapMonth,
+      };
+    }
+  )
+    .setPropertyViewFn((children) => (
+      <>
+        {showLabelPropertyView(children)}
+        {children.showLabel.getView() &&
+          children.labelIndex.propertyView({
+            label: trans("scatterChart.labelIndex"),
+          })}
+        {children.boundaryGap.propertyView({
+          label: trans("scatterChart.boundaryGap"),
+        })}
+        {children.shape.propertyView({
+          label: trans("chart.scatterShape"),
+        })}
+        {children.singleAxis.propertyView({
+          label: trans("scatterChart.singleAxis"),
+        })}
+        {children.visualMap.propertyView({
+          label: trans("scatterChart.visualMap"),
+        })}
+        {children.visualMap.getView() &&
+          children.visualMapMin.propertyView({
+            label: trans("scatterChart.visualMapMin"),
+          })}
+        {children.visualMap.getView() &&
+          children.visualMapMax.propertyView({
+            label: trans("scatterChart.visualMapMax"),
+          })}
+        {children.visualMap.getView() &&
+          children.visualMapDimension.propertyView({
+            label: trans("scatterChart.visualMapDimension"),
+          })}
+        {children.visualMap.getView() &&
+          children.visualMapColorMin.propertyView({
+            label: trans("scatterChart.visualMapColorMin"),
+          })}
+        {children.visualMap.getView() &&
+          children.visualMapColorMax.propertyView({
+            label: trans("scatterChart.visualMapColorMax"),
+          })}
+        {children.visualMap.getView() &&
+          children.heatmap.propertyView({
+            label: trans("scatterChart.heatmap"),
+          })}
+        {children.visualMap.getView() &&
+          children.heatmapMonth.propertyView({
+            label: trans("scatterChart.heatmapMonth"),
+          })}
+        {children.polar.propertyView({
+          label: trans("scatterChart.polar"),
+        })}
+      </>
+    ))
+    .build();
+})();

package/src/configs/sunburstChartConfig.tsx

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

package/src/configs/tableChartConfig.tsx

@@ -0,0 +1,81 @@
+import { TableStyle } from "@/controls";
+import { trans } from "@/i18n/comps";
+import { Flex } from "antd";
+import {
+  BoolControl,
+  EchartDefaultChartStyle,
+  EchartDefaultTextStyle,
+  MultiCompBuilder,
+  StringControl,
+  styleControl,
+  withDefault,
+} from "lowcoder-sdk";
+
+export const CompStyles = [
+  {
+    name: "backgroundColor",
+    label: trans("style.backgroundColor"),
+    backgroundColor: "backgroundColor",
+  },
+  {
+    name: "shadowColor",
+    label: trans("style.shadowColor"),
+    shadowColor: "shadowColor",
+  },
+  { name: "textSize", label: trans("style.fontSize"), fontSize: "fontSize" },
+  {
+    name: "borderColor",
+    label: trans("style.borderColor"),
+    borderColor: "borderColor",
+  },
+  {
+    name: "radius",
+    label: trans("style.borderStyle"),
+    borderStyle: "borderStyle",
+  },
+  {
+    name: "radius",
+    label: trans("style.borderRadius"),
+    borderRadius: "borderRadius",
+  },
+  {
+    name: "borderWidth",
+    label: trans("style.borderWidth"),
+    borderWidth: "borderWidth",
+  },
+] as const;
+
+export const TableChartConfig = (function () {
+  return new MultiCompBuilder(
+    {
+      data: withDefault(BoolControl, true),
+      dataStyle: styleControl(EchartDefaultChartStyle, "dataStyle"),
+      title: StringControl,
+      titleStyle: styleControl(CompStyles, "subStyle"),
+      headerStyle: styleControl(TableStyle, "headerStyle"),
+      rowStyle: styleControl(TableStyle, "rowStyle"),
+      chartStyle: styleControl(EchartDefaultTextStyle, "chartStyle"),
+    },
+    (props) => {
+      return {
+        ...props,
+        type: "table",
+      };
+    }
+  )
+    .setPropertyViewFn((children) => (
+      <>
+        {children.dataStyle?.getPropertyView()}
+
+        <Flex gap={5} vertical>
+          <div className="sub-title">Header</div>
+          {children.headerStyle.getPropertyView()}
+          <div className="sub-title">Row</div>
+          {children.rowStyle.getPropertyView()}
+          <div className="sub-title">Chart style</div>
+          {children.chartStyle.getPropertyView()}
+        </Flex>
+      </>
+    ))
+    .build();
+})();

package/src/configs/themeriverChartConfig.tsx

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