lowcoder-comps 0.0.31 → 0.0.32

package/src/comps/chartComp/chartConstants.tsx

@@ -1,299 +0,0 @@
-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

@@ -1,235 +0,0 @@
-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())}
-    </>
-  );
-}