lowcoder-comps 0.0.29 → 0.0.31

package/src/comps/chartComp/chartConstants.tsx

@@ -0,0 +1,299 @@
+import {
+  jsonControl,
+  JSONObject,
+  stateComp,
+  toJSONObjectArray,
+  toObject,
+  BoolControl,
+  withDefault,
+  StringControl,
+  NumberControl,
+  FunctionControl,
+  dropdownControl,
+  eventHandlerControl,
+  valueComp,
+  withType,
+  ValueFromOption,
+  uiChildren,
+  clickEvent,
+} from "lowcoder-sdk";
+import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core";
+import { BarChartConfig } from "./chartConfigs/barChartConfig";
+import { XAxisConfig, YAxisConfig } from "./chartConfigs/cartesianAxisConfig";
+import { LegendConfig } from "./chartConfigs/legendConfig";
+import { LineChartConfig } from "./chartConfigs/lineChartConfig";
+import { PieChartConfig } from "./chartConfigs/pieChartConfig";
+import { ScatterChartConfig } from "./chartConfigs/scatterChartConfig";
+import { SeriesListComp } from "./seriesComp";
+import { EChartsOption } from "echarts";
+import { i18nObjs, trans } from "i18n/comps";
+
+export const ChartTypeOptions = [
+  {
+    label: trans("chart.bar"),
+    value: "bar",
+  },
+  {
+    label: trans("chart.line"),
+    value: "line",
+  },
+  {
+    label: trans("chart.scatter"),
+    value: "scatter",
+  },
+  {
+    label: trans("chart.pie"),
+    value: "pie",
+  },
+] as const;
+
+const chartModeOptions = [
+  {
+    label: trans("chart.UIMode"),
+    value: "ui",
+  },
+  {
+    label: "ECharts JSON",
+    value: "json",
+  },
+  {
+    label: "Map",
+    value: "map",
+  },
+] as const;
+
+export const UIEventOptions = [
+  {
+    label: trans("chart.select"),
+    value: "select",
+    description: trans("chart.selectDesc"),
+  },
+  {
+    label: trans("chart.unSelect"),
+    value: "unselect",
+    description: trans("chart.unselectDesc"),
+  },
+] as const;
+
+export const MapEventOptions = [
+  {
+    label: trans("chart.mapReady"),
+    value: "mapReady",
+    description: trans("chart.mapReadyDesc"),
+  },
+  {
+    label: trans("chart.zoomLevelChange"),
+    value: "zoomLevelChange",
+    description: trans("chart.zoomLevelChangeDesc"),
+  },
+  {
+    label: trans("chart.centerPositionChange"),
+    value: "centerPositionChange",
+    description: trans("chart.centerPositionChangeDesc"),
+  },
+] as const;
+
+export const XAxisDirectionOptions = [
+  {
+    label: trans("chart.horizontal"),
+    value: "horizontal",
+  },
+  {
+    label: trans("chart.vertical"),
+    value: "vertical",
+  },
+] as const;
+
+export type XAxisDirectionType = ValueFromOption<typeof XAxisDirectionOptions>;
+
+export const noDataAxisConfig = {
+  animation: false,
+  xAxis: {
+    type: "category",
+    name: trans("chart.noData"),
+    nameLocation: "middle",
+    data: [],
+    axisLine: {
+      lineStyle: {
+        color: "#8B8FA3",
+      },
+    },
+  },
+  yAxis: {
+    type: "value",
+    axisLabel: {
+      color: "#8B8FA3",
+    },
+    splitLine: {
+      lineStyle: {
+        color: "#F0F0F0",
+      },
+    },
+  },
+  tooltip: {
+    show: false,
+  },
+  series: [
+    {
+      data: [700],
+      type: "line",
+      itemStyle: {
+        opacity: 0,
+      },
+    },
+  ],
+} as EChartsOption;
+
+export const noDataPieChartConfig = {
+  animation: false,
+  tooltip: {
+    show: false,
+  },
+  legend: {
+    formatter: trans("chart.unknown"),
+    top: "bottom",
+    selectedMode: false,
+  },
+  color: ["#B8BBCC", "#CED0D9", "#DCDEE6", "#E6E6EB"],
+  series: [
+    {
+      type: "pie",
+      radius: "35%",
+      center: ["25%", "50%"],
+      silent: true,
+      label: {
+        show: false,
+      },
+      data: [
+        {
+          name: "1",
+          value: 70,
+        },
+        {
+          name: "2",
+          value: 68,
+        },
+        {
+          name: "3",
+          value: 48,
+        },
+        {
+          name: "4",
+          value: 40,
+        },
+      ],
+    },
+    {
+      type: "pie",
+      radius: "35%",
+      center: ["75%", "50%"],
+      silent: true,
+      label: {
+        show: false,
+      },
+      data: [
+        {
+          name: "1",
+          value: 70,
+        },
+        {
+          name: "2",
+          value: 68,
+        },
+        {
+          name: "3",
+          value: 48,
+        },
+        {
+          name: "4",
+          value: 40,
+        },
+      ],
+    },
+  ],
+} as EChartsOption;
+
+export type ChartSize = { w: number; h: number };
+
+export const getDataKeys = (data: Array<JSONObject>) => {
+  if (!data) {
+    return [];
+  }
+  const dataKeys: Array<string> = [];
+  data.slice(0, 50).forEach((d) => {
+    Object.keys(d).forEach((key) => {
+      if (!dataKeys.includes(key)) {
+        dataKeys.push(key);
+      }
+    });
+  });
+  return dataKeys;
+};
+
+const ChartOptionMap = {
+  bar: BarChartConfig,
+  line: LineChartConfig,
+  pie: PieChartConfig,
+  scatter: ScatterChartConfig,
+};
+
+const ChartOptionComp = withType(ChartOptionMap, "bar");
+export type CharOptionCompType = keyof typeof ChartOptionMap;
+
+export const chartUiModeChildren = {
+  title: StringControl,
+  data: jsonControl(toJSONObjectArray, i18nObjs.defaultDataSource),
+  xAxisKey: valueComp<string>(""), // x-axis, key from data
+  xAxisDirection: dropdownControl(XAxisDirectionOptions, "horizontal"),
+  series: SeriesListComp,
+  xConfig: XAxisConfig,
+  yConfig: YAxisConfig,
+  legendConfig: LegendConfig,
+  chartConfig: ChartOptionComp,
+  onUIEvent: eventHandlerControl(UIEventOptions),
+};
+
+const chartJsonModeChildren = {
+  echartsOption: jsonControl(toObject, i18nObjs.defaultEchartsJsonOption),
+}
+
+const chartMapModeChildren = {
+  mapInstance: stateComp(),
+  getMapInstance: FunctionControl,
+  mapApiKey: withDefault(StringControl, ''),
+  mapZoomLevel: withDefault(NumberControl, 3),
+  mapCenterLng: withDefault(NumberControl, 15.932644),
+  mapCenterLat: withDefault(NumberControl, 50.942063),
+  mapOptions: jsonControl(toObject, i18nObjs.defaultMapJsonOption),
+  onMapEvent: eventHandlerControl(MapEventOptions),
+  showCharts: withDefault(BoolControl, true),
+}
+
+export type UIChartDataType = {
+  seriesName: string;
+  // coordinate chart
+  x?: any;
+  y?: any;
+  // pie or funnel
+  itemName?: any;
+  value?: any;
+};
+
+export type NonUIChartDataType = {
+  name: string;
+  value: any;
+}
+
+export const chartChildrenMap = {
+  mode: dropdownControl(chartModeOptions, "ui"),
+  selectedPoints: stateComp<Array<UIChartDataType>>([]),
+  lastInteractionData: stateComp<Array<UIChartDataType> | NonUIChartDataType>({}),
+  onEvent: eventHandlerControl([clickEvent] as const),
+  ...chartUiModeChildren,
+  ...chartJsonModeChildren,
+  ...chartMapModeChildren,
+};
+
+const chartUiChildrenMap = uiChildren(chartChildrenMap);
+export type ChartCompPropsType = RecordConstructorToView<typeof chartUiChildrenMap>;
+export type ChartCompChildrenType = RecordConstructorToComp<typeof chartUiChildrenMap>;

package/src/comps/chartComp/chartPropertyView.tsx

@@ -0,0 +1,235 @@
+import { changeChildAction, CompAction } from "lowcoder-core";
+import { ChartCompChildrenType, ChartTypeOptions, getDataKeys } from "./chartConstants";
+import { newSeries } from "./seriesComp";
+import {
+  CustomModal,
+  Dropdown,
+  hiddenPropertyView,
+  Option,
+  RedButton,
+  Section,
+  sectionNames,
+  controlItem,
+} from "lowcoder-sdk";
+import { trans } from "i18n/comps";
+import { examplesUrl, mapExamplesUrl, mapOptionUrl, optionUrl } from "./chartConfigs/chartUrls";
+
+export function chartPropertyView(
+  children: ChartCompChildrenType,
+  dispatch: (action: CompAction) => void
+) {
+  const series = children.series.getView();
+  const columnOptions = getDataKeys(children.data.getView()).map((key) => ({
+    label: key,
+    value: key,
+  }));
+
+  const uiModePropertyView = (
+    <>
+      <Section name={trans("chart.data")}>
+        {children.data.propertyView({
+          label: trans("chart.data"),
+        })}
+        <Dropdown
+          value={children.chartConfig.children.compType.getView()}
+          options={ChartTypeOptions}
+          label={trans("chart.chartType")}
+          onChange={(value) => {
+            // keep the previous value
+            if (children.chartConfig.children.comp.children.hasOwnProperty("showLabel")) {
+              children.chartConfig.dispatchChangeValueAction({
+                compType: value as any,
+                comp: {
+                  showLabel: (
+                    children.chartConfig.children.comp.children as any
+                  ).showLabel.toJsonValue(),
+                },
+              });
+            } else {
+              children.chartConfig.dispatchChangeValueAction({
+                compType: value,
+              });
+            }
+          }}
+        />
+        <Dropdown
+          value={children.xAxisKey.getView()}
+          options={columnOptions}
+          label={trans("chart.xAxis")}
+          onChange={(value) => {
+            dispatch(changeChildAction("xAxisKey", value));
+          }}
+        />
+        <Option
+          items={series}
+          title={trans("chart.chartSeries")}
+          itemTitle={(s) => s.getView().seriesName}
+          popoverTitle={(s) => s.getView().columnName}
+          content={(s, index) => (
+            <>
+              {s.getPropertyViewWithData(columnOptions)}
+              {
+                <RedButton
+                  onClick={() => {
+                    CustomModal.confirm({
+                      title: trans("chart.delete"),
+                      content: trans("chart.confirmDelete") + `${s.getView().seriesName}?`,
+                      onConfirm: () =>
+                        children.series.dispatch(children.series.deleteAction(index)),
+                      confirmBtnType: "delete",
+                      okText: trans("chart.delete"),
+                    });
+                  }}
+                >
+                  {trans("chart.delete")}
+                </RedButton>
+              }
+            </>
+          )}
+          onAdd={() => {
+            if (columnOptions.length <= 0) {
+              return;
+            }
+            children.series.dispatch(
+              children.series.pushAction(
+                newSeries(trans("chart.customSeries"), columnOptions[0].value)
+              )
+            );
+          }}
+          onMove={(fromIndex, toIndex) => {
+            const action = children.series.arrayMoveAction(fromIndex, toIndex);
+            children.series.dispatch(action);
+          }}
+          hide={(s) => s.getView().hide}
+          onHide={(s, hide) => s.children.hide.dispatchChangeValueAction(hide)}
+          dataIndex={(s) => s.getView().dataIndex}
+        />
+      </Section>
+      <Section name={sectionNames.interaction}>
+        <div style={{display: 'flex', flexDirection: 'column', gap: '8px'}}>
+          {children.onUIEvent.propertyView({title: trans("chart.chartEventHandlers")})}
+        </div>
+        {/* <div style={{display: 'flex', flexDirection: 'column', gap: '8px'}}>
+          {children.onEvent.propertyView()}
+        </div> */}
+      </Section>
+      <Section name={sectionNames.layout}>
+        {children.title.propertyView({ label: trans("chart.title") })}
+        {children.chartConfig.children.compType.getView() !== "pie" && (
+          <>
+            {children.xAxisDirection.propertyView({
+              label: trans("chart.xAxisDirection"),
+              radioButton: true,
+            })}
+            {children.xConfig.getPropertyView()}
+            {children.yConfig.getPropertyView()}
+          </>
+        )}
+        {children.legendConfig.getPropertyView()}
+        {hiddenPropertyView(children)}
+      </Section>
+      <Section name={sectionNames.style}>{children.chartConfig.getPropertyView()}</Section>
+    </>
+  );
+
+  const jsonModePropertyView = (
+    <>
+      <Section name={trans("chart.config")}>
+        {children.echartsOption.propertyView({
+          label: trans("chart.echartsOptionLabel"),
+          styleName: "higher",
+          tooltip: (
+            <div>
+              <a href={optionUrl} target="_blank" rel="noopener noreferrer">
+                {trans("chart.echartsOptionTooltip")}
+              </a>
+              <br />
+              <a href={examplesUrl} target="_blank" rel="noopener noreferrer">
+                {trans("chart.echartsOptionExamples")}
+              </a>
+            </div>
+          ),
+        })}
+      </Section>
+      <Section name={sectionNames.interaction}>
+        {children.onEvent.propertyView()}
+      </Section>
+      <Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
+    </>
+  );
+
+  const mapModePropertyView = (
+    <>
+      <Section name={'Map Configuration'}>
+        {children.mapApiKey.propertyView({
+          label: "API Key"
+        })}
+        {children.mapZoomLevel.propertyView({
+          label: "Zoom Level"
+        })}
+        {controlItem({}, (
+          <b style={{marginTop: '8px'}}>
+            {'Center Position'}
+          </b>
+        ))}
+        {children.mapCenterLng.propertyView({
+          label: "Longitude"
+        })}
+        {children.mapCenterLat.propertyView({
+          label: "Latitude"
+        })}
+        {children.showCharts.propertyView({
+          label: "Show Charts"
+        })}
+      </Section>
+      <Section name={'Map Data'}>
+        {children.mapOptions.propertyView({
+          label: trans("chart.echartsOptionLabel"),
+          styleName: "higher",
+          tooltip: (
+            <div>
+              <a href={mapOptionUrl} target="_blank" rel="noopener noreferrer">
+                {trans("chart.echartsMapOptionTooltip")}
+              </a>
+              <br />
+              <a href={mapExamplesUrl} target="_blank" rel="noopener noreferrer">
+                {trans("chart.echartsMapOptionExamples")}
+              </a>
+            </div>
+          ),
+        })}
+      </Section>
+      <Section name={sectionNames.interaction}>
+        <div style={{display: 'flex', flexDirection: 'column', gap: '8px'}}>
+          {children.onMapEvent.propertyView({title: trans("chart.chartEventHandlers")})}
+        </div>
+        <div style={{display: 'flex', flexDirection: 'column', gap: '8px'}}>
+          {children.onEvent.propertyView()}
+        </div>
+      </Section>
+      <Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
+    </>
+  );
+  
+  const getChatConfigByMode = (mode: string) => {
+    switch(mode) {
+      case "ui":
+        return uiModePropertyView;
+      case "json":
+        return jsonModePropertyView;
+      case "map":
+        return mapModePropertyView;
+    }
+  }
+  return (
+    <>
+      <Section name={trans("chart.mode")}>
+        {children.mode.propertyView({
+          label: "",
+          radioButton: true,
+        })}
+      </Section>
+      {getChatConfigByMode(children.mode.getView())}
+    </>
+  );
+}