diff --git a/.github/workflows/docker-images.yml b/.github/workflows/docker-images.yml
index 7eaeb16a8f..d075f1fdce 100644
--- a/.github/workflows/docker-images.yml
+++ b/.github/workflows/docker-images.yml
@@ -10,8 +10,8 @@ on:
default: 'latest'
options:
- latest
+ - stable
- test
- - 2.4.6
build_allinone:
type: boolean
description: 'Build the All-In-One image'
@@ -41,24 +41,60 @@ jobs:
build:
runs-on: ubuntu-latest
steps:
+ - name: 'Setup jq'
+ uses: dcarbone/install-jq-action@v3
+ with:
+ version: '1.7'
+
- name: Set environment variables
shell: bash
run: |
# Get the short SHA of last commit
echo "SHORT_SHA=$(echo ${{ github.sha }} | cut -c1-7)" >> "${GITHUB_ENV}"
-
+
# Get branch name - we don't use github.ref_head_name since we don't build on PRs
echo "BRANCH_NAME=${{ github.ref_name }}" >> "${GITHUB_ENV}"
-
+
# Set docker image tag
- echo "IMAGE_TAG=${{ inputs.imageTag || github.ref_name }}" >> "${GITHUB_ENV}"
-
+ IMAGE_TAG=${{ inputs.imageTag || github.ref_name }}
+
+ # Check whether it's a release
+ LATEST_TAG=$(
+ curl -s -L \
+ -H "Accept: application/vnd.github+json" \
+ -H "Authorization: Bearer ${{ github.token }}" \
+ https://api.github.com/repos/${{ github.repository }}/releases/latest \
+ | jq -r '.tag_name'
+ )
+ IS_LATEST="false"
+ if [[ "${LATEST_TAG}" == "${{ github.event.release.tag_name }}" ]]; then
+ IS_LATEST="true"
+ fi;
+
# Control which images to build
echo "BUILD_ALLINONE=${{ inputs.build_allinone || true }}" >> "${GITHUB_ENV}"
echo "BUILD_FRONTEND=${{ inputs.build_frontend || true }}" >> "${GITHUB_ENV}"
echo "BUILD_NODESERVICE=${{ inputs.build_nodeservice || true }}" >> "${GITHUB_ENV}"
echo "BUILD_APISERVICE=${{ inputs.build_apiservice || true }}" >> "${GITHUB_ENV}"
+ # Image names
+ ALLINONE_IMAGE_NAMES=lowcoderorg/lowcoder-ce:${IMAGE_TAG}
+ FRONTEND_IMAGE_NAMES=lowcoderorg/lowcoder-ce-frontend:${IMAGE_TAG}
+ APISERVICE_IMAGE_NAMES=lowcoderorg/lowcoder-ce-api-service:${IMAGE_TAG}
+ NODESERVICE_IMAGE_NAMES=lowcoderorg/lowcoder-ce-node-service:${IMAGE_TAG}
+
+ if [[ "${IS_LATEST}" == "true" ]]; then
+ ALLINONE_IMAGE_NAMES="lowcoderorg/lowcoder-ce:latest,${ALLINONE_IMAGE_NAMES}"
+ FRONTEND_IMAGE_NAMES="lowcoderorg/lowcoder-ce-frontend:latest,${FRONTEND_IMAGE_NAMES}"
+ APISERVICE_IMAGE_NAMES="lowcoderorg/lowcoder-ce-api-service:latest,${APISERVICE_IMAGE_NAMES}"
+ NODESERVICE_IMAGE_NAMES="lowcoderorg/lowcoder-ce-node-service:latest,${NODESERVICE_IMAGE_NAMES}"
+ fi;
+
+ echo "ALLINONE_IMAGE_NAMES=${ALLINONE_IMAGE_NAMES}" >> "${GITHUB_ENV}"
+ echo "FRONTEND_IMAGE_NAMES=${FRONTEND_IMAGE_NAMES}" >> "${GITHUB_ENV}"
+ echo "APISERVICE_IMAGE_NAMES=${APISERVICE_IMAGE_NAMES}" >> "${GITHUB_ENV}"
+ echo "NODESERVICE_IMAGE_NAMES=${NODESERVICE_IMAGE_NAMES}" >> "${GITHUB_ENV}"
+
- name: Checkout lowcoder source
uses: actions/checkout@v4
with:
@@ -91,7 +127,7 @@ jobs:
linux/amd64
linux/arm64
push: true
- tags: lowcoderorg/lowcoder-ce:${{ env.IMAGE_TAG }}
+ tags: ${{ env.ALLINONE_IMAGE_NAMES }}
- name: Build and push the frontend image
if: ${{ env.BUILD_FRONTEND == 'true' }}
@@ -108,7 +144,7 @@ jobs:
linux/amd64
linux/arm64
push: true
- tags: lowcoderorg/lowcoder-ce-frontend:${{ env.IMAGE_TAG }}
+ tags: ${{ env.FRONTEND_IMAGE_NAMES }}
- name: Build and push the node service image
if: ${{ env.BUILD_NODESERVICE == 'true' }}
@@ -120,7 +156,7 @@ jobs:
linux/amd64
linux/arm64
push: true
- tags: lowcoderorg/lowcoder-ce-node-service:${{ env.IMAGE_TAG }}
+ tags: ${{ env.NODESERVICE_IMAGE_NAMES }}
- name: Build and push the API service image
if: ${{ env.BUILD_APISERVICE == 'true' }}
@@ -132,5 +168,5 @@ jobs:
linux/amd64
linux/arm64
push: true
- tags: lowcoderorg/lowcoder-ce-api-service:${{ env.IMAGE_TAG }}
+ tags: ${{ env.APISERVICE_IMAGE_NAMES }}
diff --git a/.github/workflows/sonarcloud.yml b/.github/workflows/sonarcloud.yml
index f5cdd52809..64b8252843 100644
--- a/.github/workflows/sonarcloud.yml
+++ b/.github/workflows/sonarcloud.yml
@@ -30,3 +30,4 @@ jobs:
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # Needed to get PR information, if any
SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
+ SONAR_SCANNER_OPTS: "-Dsonar.javascript.node.maxspace=8192 -Xmx8192m"
diff --git a/.gitignore b/.gitignore
index b044fc2c8e..f015f90569 100644
--- a/.gitignore
+++ b/.gitignore
@@ -18,3 +18,7 @@ application-dev-localhost.yaml
server/api-service/lowcoder-server/src/main/resources/application-local-dev.yaml
translations/locales/node_modules/
server/api-service/lowcoder-server/src/main/resources/application-local-dev-ee.yaml
+node_modules
+
+# Local Netlify folder
+.netlify
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 495ac31a02..56add3db1f 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -5,5 +5,6 @@
"titleBar.activeForeground": "#F9FAF2"
},
"java.debug.settings.onBuildFailureProceed": true,
- "java.configuration.updateBuildConfiguration": "automatic"
+ "java.configuration.updateBuildConfiguration": "automatic",
+ "terminal.integrated.scrollback": 100000000,
}
\ No newline at end of file
diff --git a/README.md b/README.md
index 6ba2fff869..ede4bcc296 100644
--- a/README.md
+++ b/README.md
@@ -7,15 +7,22 @@
Create software applications (internal and customer-facing!) and Meeting/Collaboration tools for your Company and your Customers with minimal coding experience.
- Lowcoder is the best Retool, Appsmith or Tooljet Alternative.
+ We think, Lowcoder is simply better than Retool, Appsmith Tooljet, Outsystems or Mendix.
+---
-
+
+
+
Click the image above to watch the video on YouTube 📺
+
{(editorState: any) => (
-
+
+ {userId ? (
+
props.onEvent("videoClicked")}
+ ref={videoRef}
+ style={{
+ display: `${showVideo ? "flex" : "none"}`,
+ aspectRatio: props.videoAspectRatio,
+ borderRadius: props.style.radius,
+ width: "auto",
+ }}
+ id={userId}
+ >
+ ) : (
+ <>
+ )}
- {userId ? (
-
props.onEvent("videoClicked")}
- ref={videoRef}
- style={{
- display: `${showVideo ? "flex" : "none"}`,
- aspectRatio: props.videoAspectRatio,
- borderRadius: props.style.radius,
- width: "auto",
- }}
- id={userId}
- >
- ) : (
- <>
- )}
-
-
-
{userName ?? ""}
-
+ src={props.profileImageUrl.value}
+ />
+
{userName ?? ""}
-
+
);
diff --git a/client/packages/lowcoder-comps/src/comps/agoraMeetingComp/videoSharingStreamComp.tsx b/client/packages/lowcoder-comps/src/comps/agoraMeetingComp/videoSharingStreamComp.tsx
index dbedc1fd53..ae5424ad01 100644
--- a/client/packages/lowcoder-comps/src/comps/agoraMeetingComp/videoSharingStreamComp.tsx
+++ b/client/packages/lowcoder-comps/src/comps/agoraMeetingComp/videoSharingStreamComp.tsx
@@ -19,7 +19,7 @@ import { useEffect, useRef, useState } from "react";
import { client } from "./meetingControllerComp";
import type { IAgoraRTCRemoteUser } from "agora-rtc-sdk-ng";
import { trans } from "../../i18n/comps";
-import ReactResizeDetector from "react-resize-detector";
+import { useResizeDetector } from "react-resize-detector";
import { ButtonStyleControl } from "./videobuttonCompConstants";
const VideoContainer = styled.video`
@@ -123,61 +123,63 @@ let SharingCompBuilder = (function () {
}
}, [props.userId.value]);
+ useResizeDetector({
+ targetRef: conRef,
+ });
+
return (
{(editorState: any) => (
-
+
+ {userId ? (
+
props.onEvent("videoClicked")}
+ ref={videoRef}
+ style={{
+ display: `${showVideoSharing ? "flex" : "none"}`,
+ aspectRatio: props.videoAspectRatio,
+ borderRadius: props.style.radius,
+ width: "auto",
+ }}
+ id="share-screen"
+ >
+ ) : (
+ <>
+ )}
- {userId ? (
-
props.onEvent("videoClicked")}
- ref={videoRef}
- style={{
- display: `${showVideoSharing ? "flex" : "none"}`,
- aspectRatio: props.videoAspectRatio,
- borderRadius: props.style.radius,
- width: "auto",
- }}
- id="share-screen"
- >
- ) : (
- <>
- )}
-
-
-
{userName ?? ""}
-
+ src={props.profileImageUrl?.value}
+ />
+
{userName ?? ""}
-
+
);
diff --git a/client/packages/lowcoder-comps/src/comps/barChartComp/barChartComp.tsx b/client/packages/lowcoder-comps/src/comps/barChartComp/barChartComp.tsx
new file mode 100644
index 0000000000..df7fc06232
--- /dev/null
+++ b/client/packages/lowcoder-comps/src/comps/barChartComp/barChartComp.tsx
@@ -0,0 +1,325 @@
+import {
+ changeChildAction,
+ changeValueAction,
+ CompAction,
+ CompActionTypes,
+ wrapChildAction,
+} from "lowcoder-core";
+import { AxisFormatterComp, EchartsAxisType } from "../basicChartComp/chartConfigs/cartesianAxisConfig";
+import { barChartChildrenMap, ChartSize, getDataKeys } from "./barChartConstants";
+import { barChartPropertyView } from "./barChartPropertyView";
+import _ from "lodash";
+import { useContext, useEffect, useMemo, useRef, useState } from "react";
+import { useResizeDetector } from "react-resize-detector";
+import ReactECharts from "../basicChartComp/reactEcharts";
+import {
+ childrenToProps,
+ depsConfig,
+ genRandomKey,
+ NameConfig,
+ UICompBuilder,
+ withDefault,
+ withExposingConfigs,
+ withViewFn,
+ ThemeContext,
+ chartColorPalette,
+ getPromiseAfterDispatch,
+ dropdownControl,
+ JSONObject,
+} from "lowcoder-sdk";
+import { getEchartsLocale, trans } from "i18n/comps";
+import { ItemColorComp } from "comps/basicChartComp/chartConfigs/lineChartConfig";
+import {
+ echartsConfigOmitChildren,
+ getEchartsConfig,
+ getSelectedPoints,
+} from "./barChartUtils";
+import 'echarts-extension-gmap';
+import log from "loglevel";
+
+let clickEventCallback = () => {};
+
+const chartModeOptions = [
+ {
+ label: "ECharts JSON",
+ value: "json",
+ }
+] as const;
+
+let BarChartTmpComp = (function () {
+ return new UICompBuilder({mode:dropdownControl(chartModeOptions,'ui'),...barChartChildrenMap}, () => null)
+ .setPropertyViewFn(barChartPropertyView)
+ .build();
+})();
+
+BarChartTmpComp = withViewFn(BarChartTmpComp, (comp) => {
+ const mode = comp.children.mode.getView();
+ const onUIEvent = comp.children.onUIEvent.getView();
+ const onEvent = comp.children.onEvent.getView();
+ const echartsCompRef = useRef(null);
+ const containerRef = useRef(null);
+ const [chartSize, setChartSize] = useState();
+ const firstResize = useRef(true);
+ const theme = useContext(ThemeContext);
+ const defaultChartTheme = {
+ color: chartColorPalette,
+ backgroundColor: "#fff",
+ };
+
+ let themeConfig = defaultChartTheme;
+ try {
+ themeConfig = theme?.theme.chart ? JSON.parse(theme?.theme.chart) : defaultChartTheme;
+ } catch (error) {
+ log.error('theme chart error: ', error);
+ }
+
+ const triggerClickEvent = async (dispatch: any, action: CompAction) => {
+ await getPromiseAfterDispatch(
+ dispatch,
+ action,
+ { autoHandleAfterReduce: true }
+ );
+ onEvent('click');
+ }
+
+ useEffect(() => {
+ const echartsCompInstance = echartsCompRef?.current?.getEchartsInstance();
+ if (!echartsCompInstance) {
+ return _.noop;
+ }
+ echartsCompInstance?.on("click", (param: any) => {
+ document.dispatchEvent(new CustomEvent("clickEvent", {
+ bubbles: true,
+ detail: {
+ action: 'click',
+ data: param.data,
+ }
+ }));
+ triggerClickEvent(
+ comp.dispatch,
+ changeChildAction("lastInteractionData", param.data, false)
+ );
+ });
+ return () => {
+ echartsCompInstance?.off("click");
+ document.removeEventListener('clickEvent', clickEventCallback)
+ };
+ }, []);
+
+ useEffect(() => {
+ // bind events
+ const echartsCompInstance = echartsCompRef?.current?.getEchartsInstance();
+ if (!echartsCompInstance) {
+ return _.noop;
+ }
+ echartsCompInstance?.on("selectchanged", (param: any) => {
+ const option: any = echartsCompInstance?.getOption();
+ document.dispatchEvent(new CustomEvent("clickEvent", {
+ bubbles: true,
+ detail: {
+ action: param.fromAction,
+ data: getSelectedPoints(param, option)
+ }
+ }));
+
+ if (param.fromAction === "select") {
+ comp.dispatch(changeChildAction("selectedPoints", getSelectedPoints(param, option), false));
+ onUIEvent("select");
+ } else if (param.fromAction === "unselect") {
+ comp.dispatch(changeChildAction("selectedPoints", getSelectedPoints(param, option), false));
+ onUIEvent("unselect");
+ }
+
+ triggerClickEvent(
+ comp.dispatch,
+ changeChildAction("lastInteractionData", getSelectedPoints(param, option), false)
+ );
+ });
+ // unbind
+ return () => {
+ echartsCompInstance?.off("selectchanged");
+ document.removeEventListener('clickEvent', clickEventCallback)
+ };
+ }, [onUIEvent]);
+
+ const echartsConfigChildren = _.omit(comp.children, echartsConfigOmitChildren);
+ const childrenProps = childrenToProps(echartsConfigChildren);
+ const option = useMemo(() => {
+ return getEchartsConfig(
+ childrenProps as ToViewReturn,
+ chartSize,
+ themeConfig
+ );
+ }, [theme, childrenProps, chartSize, ...Object.values(echartsConfigChildren)]);
+
+ useEffect(() => {
+ comp.children.mapInstance.dispatch(changeValueAction(null, false))
+ if(comp.children.mapInstance.value) return;
+ }, [option])
+
+ useResizeDetector({
+ targetRef: containerRef,
+ onResize: ({width, height}) => {
+ console.log('barChart - resize');
+ if (width && height) {
+ setChartSize({ w: width, h: height });
+ }
+ if (!firstResize.current) {
+ // ignore the first resize, which will impact the loading animation
+ echartsCompRef.current?.getEchartsInstance().resize();
+ } else {
+ firstResize.current = false;
+ }
+ }
+ })
+
+ return (
+
+ (echartsCompRef.current = e)}
+ style={{ height: "100%" }}
+ notMerge
+ lazyUpdate
+ opts={{ locale: getEchartsLocale() }}
+ option={option}
+ mode={mode}
+ />
+
+ );
+});
+
+function getYAxisFormatContextValue(
+ data: Array,
+ yAxisType: EchartsAxisType,
+ yAxisName?: string
+) {
+ const dataSample = yAxisName && data.length > 0 && data[0][yAxisName];
+ let contextValue = dataSample;
+ if (yAxisType === "time") {
+ // to timestamp
+ const time =
+ typeof dataSample === "number" || typeof dataSample === "string"
+ ? new Date(dataSample).getTime()
+ : null;
+ if (time) contextValue = time;
+ }
+ return contextValue;
+}
+
+BarChartTmpComp = class extends BarChartTmpComp {
+ private lastYAxisFormatContextVal?: JSONValue;
+ private lastColorContext?: JSONObject;
+
+ updateContext(comp: this) {
+ // the context value of axis format
+ let resultComp = comp;
+ const data = comp.children.data.getView();
+ const sampleSeries = comp.children.series.getView().find((s) => !s.getView().hide);
+ const yAxisContextValue = getYAxisFormatContextValue(
+ data,
+ comp.children.yConfig.children.yAxisType.getView(),
+ sampleSeries?.children.columnName.getView()
+ );
+ if (yAxisContextValue !== comp.lastYAxisFormatContextVal) {
+ comp.lastYAxisFormatContextVal = yAxisContextValue;
+ resultComp = comp.setChild(
+ "yConfig",
+ comp.children.yConfig.reduce(
+ wrapChildAction(
+ "formatter",
+ AxisFormatterComp.changeContextDataAction({ value: yAxisContextValue })
+ )
+ )
+ );
+ }
+ // item color context
+ const colorContextVal = {
+ seriesName: sampleSeries?.children.seriesName.getView(),
+ value: yAxisContextValue,
+ };
+ if (
+ comp.children.chartConfig.children.comp.children.hasOwnProperty("itemColor") &&
+ !_.isEqual(colorContextVal, comp.lastColorContext)
+ ) {
+ comp.lastColorContext = colorContextVal;
+ resultComp = resultComp.setChild(
+ "chartConfig",
+ comp.children.chartConfig.reduce(
+ wrapChildAction(
+ "comp",
+ wrapChildAction("itemColor", ItemColorComp.changeContextDataAction(colorContextVal))
+ )
+ )
+ );
+ }
+ return resultComp;
+ }
+
+ override reduce(action: CompAction): this {
+ const comp = super.reduce(action);
+ if (action.type === CompActionTypes.UPDATE_NODES_V2) {
+ const newData = comp.children.data.getView();
+ // data changes
+ if (comp.children.data !== this.children.data) {
+ setTimeout(() => {
+ // update x-axis value
+ const keys = getDataKeys(newData);
+ if (keys.length > 0 && !keys.includes(comp.children.xAxisKey.getView())) {
+ comp.children.xAxisKey.dispatch(changeValueAction(keys[0] || ""));
+ }
+ // pass to child series comp
+ comp.children.series.dispatchDataChanged(newData);
+ }, 0);
+ }
+ return this.updateContext(comp);
+ }
+ return comp;
+ }
+
+ override autoHeight(): boolean {
+ return false;
+ }
+};
+
+let BarChartComp = withExposingConfigs(BarChartTmpComp, [
+ depsConfig({
+ name: "selectedPoints",
+ desc: trans("chart.selectedPointsDesc"),
+ depKeys: ["selectedPoints"],
+ func: (input) => {
+ return input.selectedPoints;
+ },
+ }),
+ depsConfig({
+ name: "lastInteractionData",
+ desc: trans("chart.lastInteractionDataDesc"),
+ depKeys: ["lastInteractionData"],
+ func: (input) => {
+ return input.lastInteractionData;
+ },
+ }),
+ depsConfig({
+ name: "data",
+ desc: trans("chart.dataDesc"),
+ depKeys: ["data", "mode"],
+ func: (input) =>[] ,
+ }),
+ new NameConfig("title", trans("chart.titleDesc")),
+]);
+
+
+export const BarChartCompWithDefault = withDefault(BarChartComp, {
+ xAxisKey: "month",
+ series: [
+ {
+ dataIndex: genRandomKey(),
+ seriesName: "Sales",
+ columnName: "sales",
+ },
+ {
+ dataIndex: genRandomKey(),
+ seriesName: "Target",
+ columnName: "target",
+ },
+ ],
+});
diff --git a/client/packages/lowcoder-comps/src/comps/barChartComp/barChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/barChartComp/barChartConstants.tsx
new file mode 100644
index 0000000000..98c4191844
--- /dev/null
+++ b/client/packages/lowcoder-comps/src/comps/barChartComp/barChartConstants.tsx
@@ -0,0 +1,357 @@
+import {
+ jsonControl,
+ JSONObject,
+ stateComp,
+ toJSONObjectArray,
+ toObject,
+ BoolControl,
+ withDefault,
+ StringControl,
+ NumberControl,
+ FunctionControl,
+ dropdownControl,
+ eventHandlerControl,
+ valueComp,
+ withType,
+ uiChildren,
+ clickEvent,
+ styleControl,
+ EchartDefaultTextStyle,
+ EchartDefaultChartStyle,
+ toArray
+} from "lowcoder-sdk";
+import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core";
+import { BarChartConfig } from "../basicChartComp/chartConfigs/barChartConfig";
+import { XAxisConfig, YAxisConfig } from "../basicChartComp/chartConfigs/cartesianAxisConfig";
+import { LegendConfig } from "../basicChartComp/chartConfigs/legendConfig";
+import { EchartsLegendConfig } from "../basicChartComp/chartConfigs/echartsLegendConfig";
+import { EchartsLabelConfig } from "../basicChartComp/chartConfigs/echartsLabelConfig";
+import { LineChartConfig } from "../basicChartComp/chartConfigs/lineChartConfig";
+import { PieChartConfig } from "../basicChartComp/chartConfigs/pieChartConfig";
+import { ScatterChartConfig } from "../basicChartComp/chartConfigs/scatterChartConfig";
+import { SeriesListComp } from "./seriesComp";
+import { EChartsOption } from "echarts";
+import { i18nObjs, trans } from "i18n/comps";
+import { GaugeChartConfig } from "../basicChartComp/chartConfigs/gaugeChartConfig";
+import { FunnelChartConfig } from "../basicChartComp/chartConfigs/funnelChartConfig";
+import {EchartsTitleVerticalConfig} from "../chartComp/chartConfigs/echartsTitleVerticalConfig";
+import {EchartsTitleConfig} from "../basicChartComp/chartConfigs/echartsTitleConfig";
+
+// Enhanced default data for bar charts
+export const barChartDefaultData = [
+ {
+ month: "Jan",
+ sales: 1200,
+ target: 1000
+ },
+ {
+ month: "Feb",
+ sales: 1500,
+ target: 1200
+ },
+ {
+ month: "Mar",
+ sales: 1300,
+ target: 1400
+ },
+ {
+ month: "Apr",
+ sales: 1800,
+ target: 1500
+ },
+ {
+ month: "May",
+ sales: 1600,
+ target: 1700
+ },
+ {
+ month: "Jun",
+ sales: 2100,
+ target: 1900
+ }
+];
+
+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;
+
+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;
+
+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) => {
+ if (!data) {
+ return [];
+ }
+ const dataKeys: Array = [];
+ 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 EchartsOptionMap = {
+ funnel: FunnelChartConfig,
+ gauge: GaugeChartConfig,
+};
+
+const ChartOptionComp = withType(ChartOptionMap, "bar");
+const EchartsOptionComp = withType(EchartsOptionMap, "funnel");
+export type CharOptionCompType = keyof typeof ChartOptionMap;
+
+export const chartUiModeChildren = {
+ title: withDefault(StringControl, trans("barChart.defaultTitle")),
+ data: jsonControl(toJSONObjectArray, barChartDefaultData),
+ xAxisKey: valueComp("month"), // x-axis, key from data
+ xAxisDirection: dropdownControl(XAxisDirectionOptions, "horizontal"),
+ xAxisData: jsonControl(toArray, []),
+ series: SeriesListComp,
+ xConfig: XAxisConfig,
+ yConfig: YAxisConfig,
+ legendConfig: LegendConfig,
+ chartConfig: ChartOptionComp,
+ onUIEvent: eventHandlerControl(UIEventOptions),
+};
+
+let chartJsonModeChildren: any = {
+ echartsOption: jsonControl(toObject, i18nObjs.defaultEchartsJsonOption),
+ echartsTitle: withDefault(StringControl, trans("echarts.defaultTitle")),
+ echartsLegendConfig: EchartsLegendConfig,
+ echartsLabelConfig: EchartsLabelConfig,
+ echartsConfig: EchartsOptionComp,
+ echartsTitleVerticalConfig: EchartsTitleVerticalConfig,
+ echartsTitleConfig:EchartsTitleConfig,
+
+ left:withDefault(NumberControl,trans('chart.defaultLeft')),
+ right:withDefault(NumberControl,trans('chart.defaultRight')),
+ top:withDefault(NumberControl,trans('chart.defaultTop')),
+ bottom:withDefault(NumberControl,trans('chart.defaultBottom')),
+
+ tooltip: withDefault(BoolControl, true),
+ legendVisibility: withDefault(BoolControl, true),
+}
+if (EchartDefaultChartStyle && EchartDefaultTextStyle) {
+ chartJsonModeChildren = {
+ ...chartJsonModeChildren,
+ chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'),
+ titleStyle: styleControl(EchartDefaultTextStyle, 'titleStyle'),
+ xAxisStyle: styleControl(EchartDefaultTextStyle, 'xAxis'),
+ yAxisStyle: styleControl(EchartDefaultTextStyle, 'yAxisStyle'),
+ legendStyle: styleControl(EchartDefaultTextStyle, 'legendStyle'),
+ }
+}
+
+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 barChartChildrenMap = {
+ selectedPoints: stateComp>([]),
+ lastInteractionData: stateComp | NonUIChartDataType>({}),
+ onEvent: eventHandlerControl([clickEvent] as const),
+ ...chartUiModeChildren,
+ ...chartJsonModeChildren,
+ ...chartMapModeChildren,
+};
+
+const chartUiChildrenMap = uiChildren(barChartChildrenMap);
+export type ChartCompPropsType = RecordConstructorToView;
+export type ChartCompChildrenType = RecordConstructorToComp;
diff --git a/client/packages/lowcoder-comps/src/comps/barChartComp/barChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/barChartComp/barChartPropertyView.tsx
new file mode 100644
index 0000000000..5f3d41879e
--- /dev/null
+++ b/client/packages/lowcoder-comps/src/comps/barChartComp/barChartPropertyView.tsx
@@ -0,0 +1,150 @@
+import { changeChildAction, CompAction } from "lowcoder-core";
+import { ChartCompChildrenType, ChartTypeOptions,getDataKeys } from "./barChartConstants";
+import { newSeries } from "./seriesComp";
+import {
+ CustomModal,
+ Dropdown,
+ hiddenPropertyView,
+ Option,
+ RedButton,
+ Section,
+ sectionNames,
+ controlItem,
+} from "lowcoder-sdk";
+import { trans } from "i18n/comps";
+
+export function barChartPropertyView(
+ 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 = (
+ <>
+
+ {children.chartConfig.getPropertyView()}
+ {
+ dispatch(changeChildAction("xAxisKey", value));
+ }}
+ />
+ {children.chartConfig.getView().subtype === "waterfall" && children.xAxisData.propertyView({
+ label: "X-Label-Data"
+ })}
+ s.getView().seriesName}
+ popoverTitle={(s) => s.getView().columnName}
+ content={(s, index) => (
+ <>
+ {s.getPropertyViewWithData(columnOptions)}
+ {
+ {
+ 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")}
+
+ }
+
+ )}
+ 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}
+ />
+
+
+
+ {children.onUIEvent.propertyView({title: trans("chart.chartEventHandlers")})}
+
+
+ {children.onEvent.propertyView()}
+
+
+
+ {children.echartsTitleConfig.getPropertyView()}
+ {children.echartsTitleVerticalConfig.getPropertyView()}
+ {children.legendConfig.getPropertyView()}
+ {children.title.propertyView({ label: trans("chart.title") })}
+ {children.left.propertyView({ label: trans("chart.left"), tooltip: trans("echarts.leftTooltip") })}
+ {children.right.propertyView({ label: trans("chart.right"), tooltip: trans("echarts.rightTooltip") })}
+ {children.top.propertyView({ label: trans("chart.top"), tooltip: trans("echarts.topTooltip") })}
+ {children.bottom.propertyView({ label: trans("chart.bottom"), tooltip: trans("echarts.bottomTooltip") })}
+ {children.chartConfig.children.compType.getView() !== "pie" && (
+ <>
+ {children.xAxisDirection.propertyView({
+ label: trans("chart.xAxisDirection"),
+ radioButton: true,
+ })}
+ {children.xConfig.getPropertyView()}
+ {children.yConfig.getPropertyView()}
+
+ )}
+ {hiddenPropertyView(children)}
+ {children.tooltip.propertyView({label: trans("echarts.tooltip"), tooltip: trans("echarts.tooltipTooltip")})}
+
+
+ {children.chartStyle?.getPropertyView()}
+
+
+ {children.titleStyle?.getPropertyView()}
+
+
+ {children.xAxisStyle?.getPropertyView()}
+
+
+ {children.yAxisStyle?.getPropertyView()}
+
+
+ {children.legendStyle?.getPropertyView()}
+
+
+ {children.data.propertyView({
+ label: trans("chart.data"),
+ })}
+
+
+ );
+
+ const getChatConfigByMode = (mode: string) => {
+ switch(mode) {
+ case "ui":
+ return uiModePropertyView;
+ }
+ }
+ return (
+ <>
+ {getChatConfigByMode(children.mode.getView())}
+
+ );
+}
diff --git a/client/packages/lowcoder-comps/src/comps/barChartComp/barChartUtils.ts b/client/packages/lowcoder-comps/src/comps/barChartComp/barChartUtils.ts
new file mode 100644
index 0000000000..72abe79f77
--- /dev/null
+++ b/client/packages/lowcoder-comps/src/comps/barChartComp/barChartUtils.ts
@@ -0,0 +1,396 @@
+import {
+ CharOptionCompType,
+ ChartCompPropsType,
+ ChartSize,
+ noDataAxisConfig,
+ noDataPieChartConfig,
+} from "comps/barChartComp/barChartConstants";
+import { getPieRadiusAndCenter } from "comps/basicChartComp/chartConfigs/pieChartConfig";
+import { EChartsOptionWithMap } from "../basicChartComp/reactEcharts/types";
+import _ from "lodash";
+import { chartColorPalette, isNumeric, JSONObject, loadScript } from "lowcoder-sdk";
+import { calcXYConfig } from "comps/basicChartComp/chartConfigs/cartesianAxisConfig";
+import Big from "big.js";
+import { googleMapsApiUrl } from "../basicChartComp/chartConfigs/chartUrls";
+import opacityToHex from "../../util/opacityToHex";
+import parseBackground from "../../util/gradientBackgroundColor";
+import {ba} from "@fullcalendar/core/internal-common";
+import {chartStyleWrapper, styleWrapper} from "../../util/styleWrapper";
+
+export function transformData(
+ originData: JSONObject[],
+ xAxis: string,
+ seriesColumnNames: string[]
+) {
+ // aggregate data by x-axis
+ const transformedData: JSONObject[] = [];
+ originData.reduce((prev, cur) => {
+ if (cur === null || cur === undefined) {
+ return prev;
+ }
+ const groupValue = cur[xAxis] as string;
+ if (!prev[groupValue]) {
+ // init as 0
+ const initValue: any = {};
+ seriesColumnNames.forEach((name) => {
+ initValue[name] = 0;
+ });
+ prev[groupValue] = initValue;
+ transformedData.push(prev[groupValue]);
+ }
+ // remain the x-axis data
+ prev[groupValue][xAxis] = groupValue;
+ seriesColumnNames.forEach((key) => {
+ if (key === xAxis) {
+ return;
+ } else if (isNumeric(cur[key])) {
+ const bigNum = Big(cur[key]);
+ prev[groupValue][key] = bigNum.add(prev[groupValue][key]).toNumber();
+ } else {
+ prev[groupValue][key] += 1;
+ }
+ });
+ return prev;
+ }, {} as any);
+ return transformedData;
+}
+
+const notAxisChartSet: Set = new Set(["pie"] as const);
+const notAxisChartSubtypeSet: Set = new Set(["polar"] as const);
+export const echartsConfigOmitChildren = [
+ "hidden",
+ "selectedPoints",
+ "onUIEvent",
+ "mapInstance"
+] as const;
+type EchartsConfigProps = Omit;
+
+
+export function isAxisChart(type: CharOptionCompType, subtype: string) {
+ return !notAxisChartSet.has(type) && !notAxisChartSubtypeSet.has(subtype);
+}
+
+export function getSeriesConfig(props: EchartsConfigProps) {
+ let visibleSeries = props.series.filter((s) => !s.getView().hide);
+ if(props.chartConfig.subtype === "waterfall") {
+ const seriesOn = visibleSeries[0];
+ const seriesPlaceholder = visibleSeries[0];
+ visibleSeries = [seriesPlaceholder, seriesOn];
+ }
+ const seriesLength = visibleSeries.length;
+ return visibleSeries.map((s, index) => {
+ if (isAxisChart(props.chartConfig.type, props.chartConfig.subtype)) {
+ let encodeX: string, encodeY: string;
+ const horizontalX = props.xAxisDirection === "horizontal";
+ let itemStyle = props.chartConfig.itemStyle;
+ // FIXME: need refactor... chartConfig returns a function with paramters
+ if (props.chartConfig.type === "bar") {
+ // barChart's border radius, depend on x-axis direction and stack state
+ const borderRadius = horizontalX ? [2, 2, 0, 0] : [0, 2, 2, 0];
+ if (props.chartConfig.stack && index === visibleSeries.length - 1) {
+ itemStyle = { ...itemStyle, borderRadius: borderRadius };
+ } else if (!props.chartConfig.stack) {
+ itemStyle = { ...itemStyle, borderRadius: borderRadius };
+ }
+
+ if(props.chartConfig.subtype === "waterfall" && index === 0) {
+ itemStyle = {
+ borderColor: 'transparent',
+ color: 'transparent'
+ }
+ }
+ }
+ if (horizontalX) {
+ encodeX = props.xAxisKey;
+ encodeY = s.getView().columnName;
+ } else {
+ encodeX = s.getView().columnName;
+ encodeY = props.xAxisKey;
+ }
+ return {
+ name: props.chartConfig.subtype === "waterfall" && index === 0?" ":s.getView().seriesName,
+ columnName: props.chartConfig.subtype === "waterfall" && index === 0?" ":s.getView().columnName,
+ selectedMode: "single",
+ select: {
+ itemStyle: {
+ borderColor: "#000",
+ },
+ },
+ encode: {
+ x: encodeX,
+ y: encodeY,
+ },
+ // each type of chart's config
+ ...props.chartConfig,
+ itemStyle: itemStyle,
+ label: {
+ ...props.chartConfig.label,
+ ...(!horizontalX && { position: "outside" }),
+ },
+ };
+ } else {
+ const radiusAndCenter = getPieRadiusAndCenter(seriesLength, index, props.chartConfig);
+ return {
+ ...props.chartConfig,
+ columnName: s.getView().columnName,
+ radius: radiusAndCenter.radius,
+ center: radiusAndCenter.center,
+ name: s.getView().seriesName,
+ selectedMode: "single",
+ encode: {
+ itemName: props.xAxisKey,
+ value: s.getView().columnName,
+ },
+ };
+ }
+ });
+}
+
+// https://echarts.apache.org/en/option.html
+export function getEchartsConfig(
+ props: EchartsConfigProps,
+ chartSize?: ChartSize,
+ theme?: any,
+): EChartsOptionWithMap {
+ // axisChart
+ const axisChart = isAxisChart(props.chartConfig.type, props.chartConfig.subtype);
+ const gridPos = {
+ left: `${props?.left}%`,
+ right: `${props?.right}%`,
+ bottom: `${props?.bottom}%`,
+ top: `${props?.top}%`,
+ };
+ let config: any = {
+ title: {
+ text: props.title,
+ top: props.echartsTitleVerticalConfig.top,
+ left:props.echartsTitleConfig.top,
+ textStyle: {
+ ...styleWrapper(props?.titleStyle, theme?.titleStyle)
+ }
+ },
+ backgroundColor: parseBackground( props?.chartStyle?.background || theme?.chartStyle?.backgroundColor || "#FFFFFF"),
+ legend: {
+ ...props.legendConfig,
+ textStyle: {
+ ...styleWrapper(props?.legendStyle, theme?.legendStyle, 15)
+ }
+ },
+ tooltip: props.tooltip && {
+ trigger: "axis",
+ axisPointer: {
+ type: "line",
+ lineStyle: {
+ color: "rgba(0,0,0,0.2)",
+ width: 2,
+ type: "solid"
+ }
+ }
+ },
+ grid: {
+ ...gridPos,
+ containLabel: true,
+ },
+ };
+ if(props.chartConfig.race) {
+ config = {
+ ...config,
+ // Disable init animation.
+ animationDuration: 0,
+ animationDurationUpdate: 2000,
+ animationEasing: 'linear',
+ animationEasingUpdate: 'linear',
+ }
+ }
+ if (props.data.length <= 0) {
+ // no data
+ return {
+ ...config,
+ ...(axisChart ? noDataAxisConfig : noDataPieChartConfig),
+ };
+ }
+ const yAxisConfig = props.yConfig();
+ const seriesColumnNames = props.series
+ .filter((s) => !s.getView().hide)
+ .map((s) => s.getView().columnName);
+ // y-axis is category and time, data doesn't need to aggregate
+ let transformedData =
+ yAxisConfig.type === "category" || yAxisConfig.type === "time" ? props.echartsOption.length && props.echartsOption || props.data : transformData(props.echartsOption.length && props.echartsOption || props.data, props.xAxisKey, seriesColumnNames);
+
+ if(props.chartConfig.subtype === "waterfall") {
+ config.legend = undefined;
+ let sum = transformedData.reduce((acc, item) => {
+ if(typeof item[seriesColumnNames[0]] === 'number') return acc + item[seriesColumnNames[0]];
+ else return acc;
+ }, 0)
+ const total = sum;
+ transformedData.map(d => {
+ d[` `] = sum - d[seriesColumnNames[0]];
+ sum = d[` `];
+ })
+ transformedData = [{[" "]: 0, [seriesColumnNames[0]]: total, [props.xAxisKey]: "Total"}, ...transformedData]
+ }
+
+ if(props.chartConfig.subtype === "polar") {
+ config = {
+ ...config,
+ polar: {
+ radius: [props.chartConfig.polarData.polarRadiusStart, props.chartConfig.polarData.polarRadiusEnd],
+ },
+ radiusAxis: {
+ type: props.chartConfig.polarData.polarIsTangent?'category':undefined,
+ data: props.chartConfig.polarData.polarIsTangent && props.chartConfig.polarData.labelData.length!==0?props.chartConfig.polarData.labelData:undefined,
+ max: props.chartConfig.polarData.polarIsTangent?undefined:props.chartConfig.polarData.radiusAxisMax || undefined,
+ },
+ angleAxis: {
+ type: props.chartConfig.polarData.polarIsTangent?undefined:'category',
+ data: !props.chartConfig.polarData.polarIsTangent && props.chartConfig.polarData.labelData.length!==0?props.chartConfig.polarData.labelData:undefined,
+ max: props.chartConfig.polarData.polarIsTangent?props.chartConfig.polarData.radiusAxisMax || undefined:undefined,
+ startAngle: props.chartConfig.polarData.polarStartAngle,
+ endAngle: props.chartConfig.polarData.polarEndAngle,
+ },
+ }
+ }
+
+ config = {
+ ...config,
+ dataset: [
+ {
+ source: transformedData,
+ sourceHeader: false,
+ },
+ ],
+ series: getSeriesConfig(props).map(series => ({
+ ...series,
+ encode: {
+ ...series.encode,
+ y: series.name,
+ },
+ itemStyle: {
+ ...series.itemStyle,
+ ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle)
+ },
+ lineStyle: {
+ ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle)
+ },
+ data: transformedData.map((i: any) => i[series.columnName])
+ })),
+ };
+ if (axisChart) {
+ // pure chart's size except the margin around
+ let chartRealSize;
+ if (chartSize) {
+ const rightSize =
+ typeof gridPos.right === "number"
+ ? gridPos.right
+ : (chartSize.w * parseFloat(gridPos.right)) / 100.0;
+ chartRealSize = {
+ // actually it's self-adaptive with the x-axis label on the left, not that accurate but work
+ w: chartSize.w - gridPos.left - rightSize,
+ // also self-adaptive on the bottom
+ h: chartSize.h - gridPos.top - gridPos.bottom,
+ right: rightSize,
+ };
+ }
+ const finalXyConfig = calcXYConfig(
+ props.xConfig,
+ yAxisConfig,
+ props.xAxisDirection,
+ transformedData.map((d) => d[props.xAxisKey]),
+ chartRealSize
+ );
+ config = {
+ ...config,
+ // @ts-ignore
+ xAxis: {
+ ...finalXyConfig.xConfig,
+ axisLabel: {
+ ...styleWrapper(props?.xAxisStyle, theme?.xAxisStyle, 11)
+ },
+ data: finalXyConfig.xConfig.type === "category" && (props.xAxisData as []).length!==0?props?.xAxisData:transformedData.map((i: any) => i[props.xAxisKey]),
+ },
+ // @ts-ignore
+ yAxis: {
+ ...finalXyConfig.yConfig,
+ axisLabel: {
+ ...styleWrapper(props?.yAxisStyle, theme?.yAxisStyle, 11)
+ },
+ data: finalXyConfig.yConfig.type === "category" && (props.xAxisData as []).length!==0?props?.xAxisData:transformedData.map((i: any) => i[props.xAxisKey]),
+ },
+ };
+
+ if(props.chartConfig.race) {
+ config = {
+ ...config,
+ xAxis: {
+ ...config.xAxis,
+ animationDuration: 300,
+ animationDurationUpdate: 300
+ },
+ yAxis: {
+ ...config.yAxis,
+ animationDuration: 300,
+ animationDurationUpdate: 300
+ },
+ }
+ }
+ }
+ // console.log("Echarts transformedData and config", transformedData, config);
+ return config;
+}
+
+export function getSelectedPoints(param: any, option: any) {
+ const series = option.series;
+ const dataSource = _.isArray(option.dataset) && option.dataset[0]?.source;
+ if (series && dataSource) {
+ return param.selected.flatMap((selectInfo: any) => {
+ const seriesInfo = series[selectInfo.seriesIndex];
+ if (!seriesInfo || !seriesInfo.encode) {
+ return [];
+ }
+ return selectInfo.dataIndex.map((index: any) => {
+ const commonResult = {
+ seriesName: seriesInfo.name,
+ };
+ if (seriesInfo.encode.itemName && seriesInfo.encode.value) {
+ return {
+ ...commonResult,
+ itemName: dataSource[index][seriesInfo.encode.itemName],
+ value: dataSource[index][seriesInfo.encode.value],
+ };
+ } else {
+ return {
+ ...commonResult,
+ x: dataSource[index][seriesInfo.encode.x],
+ y: dataSource[index][seriesInfo.encode.y],
+ };
+ }
+ });
+ });
+ }
+ return [];
+}
+
+export function loadGoogleMapsScript(apiKey: string) {
+ const mapsUrl = `${googleMapsApiUrl}?key=${apiKey}`;
+ const scripts = document.getElementsByTagName('script');
+ // is script already loaded
+ let scriptIndex = _.findIndex(scripts, (script) => script.src.endsWith(mapsUrl));
+ if(scriptIndex > -1) {
+ return scripts[scriptIndex];
+ }
+ // is script loaded with diff api_key, remove the script and load again
+ scriptIndex = _.findIndex(scripts, (script) => script.src.startsWith(googleMapsApiUrl));
+ if(scriptIndex > -1) {
+ scripts[scriptIndex].remove();
+ }
+
+ const script = document.createElement("script");
+ script.type = "text/javascript";
+ script.src = mapsUrl;
+ script.async = true;
+ script.defer = true;
+ window.document.body.appendChild(script);
+
+ return script;
+}
diff --git a/client/packages/lowcoder-comps/src/comps/barChartComp/seriesComp.tsx b/client/packages/lowcoder-comps/src/comps/barChartComp/seriesComp.tsx
new file mode 100644
index 0000000000..9ded885b5f
--- /dev/null
+++ b/client/packages/lowcoder-comps/src/comps/barChartComp/seriesComp.tsx
@@ -0,0 +1,119 @@
+import {
+ BoolControl,
+ StringControl,
+ list,
+ JSONObject,
+ isNumeric,
+ genRandomKey,
+ Dropdown,
+ OptionsType,
+ MultiCompBuilder,
+ valueComp,
+} from "lowcoder-sdk";
+import { trans } from "i18n/comps";
+
+import { ConstructorToComp, ConstructorToDataType, ConstructorToView } from "lowcoder-core";
+import { CompAction, CustomAction, customAction, isMyCustomAction } from "lowcoder-core";
+
+export type SeriesCompType = ConstructorToComp;
+export type RawSeriesCompType = ConstructorToView;
+type SeriesDataType = ConstructorToDataType;
+
+type ActionDataType = {
+ type: "chartDataChanged";
+ chartData: Array;
+};
+
+export function newSeries(name: string, columnName: string): SeriesDataType {
+ return {
+ seriesName: name,
+ columnName: columnName,
+ dataIndex: genRandomKey(),
+ };
+}
+
+const seriesChildrenMap = {
+ columnName: StringControl,
+ seriesName: StringControl,
+ hide: BoolControl,
+ // unique key, for sort
+ dataIndex: valueComp(""),
+};
+
+const SeriesTmpComp = new MultiCompBuilder(seriesChildrenMap, (props) => {
+ return props;
+})
+ .setPropertyViewFn(() => {
+ return <>;
+ })
+ .build();
+
+class SeriesComp extends SeriesTmpComp {
+ getPropertyViewWithData(columnOptions: OptionsType): React.ReactNode {
+ return (
+ <>
+ {this.children.seriesName.propertyView({
+ label: trans("chart.seriesName"),
+ })}
+ {
+ this.children.columnName.dispatchChangeValueAction(value);
+ }}
+ />
+
+ );
+ }
+}
+
+const SeriesListTmpComp = list(SeriesComp);
+
+export class SeriesListComp extends SeriesListTmpComp {
+ override reduce(action: CompAction): this {
+ if (isMyCustomAction(action, "chartDataChanged")) {
+ // auto generate series
+ const actions = this.genExampleSeriesActions(action.value.chartData);
+ return this.reduce(this.multiAction(actions));
+ }
+ return super.reduce(action);
+ }
+
+ private genExampleSeriesActions(chartData: Array) {
+ const actions: CustomAction[] = [];
+ if (!chartData || chartData.length <= 0 || !chartData[0]) {
+ return actions;
+ }
+ let delCnt = 0;
+ const existColumns = this.getView().map((s) => s.getView().columnName);
+ // delete series not in data
+ existColumns.forEach((columnName) => {
+ if (chartData[0]?.[columnName] === undefined) {
+ actions.push(this.deleteAction(0));
+ delCnt++;
+ }
+ });
+ if (existColumns.length > delCnt) {
+ // don't generate example if exists
+ return actions;
+ }
+ // generate example series
+ const exampleKeys = Object.keys(chartData[0])
+ .filter((key) => {
+ return !existColumns.includes(key) && isNumeric(chartData[0][key]);
+ })
+ .slice(0, 3);
+ exampleKeys.forEach((key) => actions.push(this.pushAction(newSeries(key, key))));
+ return actions;
+ }
+
+ dispatchDataChanged(chartData: Array): void {
+ this.dispatch(
+ customAction({
+ type: "chartDataChanged",
+ chartData: chartData,
+ })
+ );
+ }
+}
diff --git a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartComp.tsx b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartComp.tsx
index bcb1c7aa4b..adb03eff44 100644
--- a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartComp.tsx
+++ b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartComp.tsx
@@ -10,7 +10,7 @@ import { chartChildrenMap, ChartSize, getDataKeys } from "./chartConstants";
import { chartPropertyView } from "./chartPropertyView";
import _ from "lodash";
import { useContext, useEffect, useMemo, useRef, useState } from "react";
-import ReactResizeDetector from "react-resize-detector";
+import { useResizeDetector } from "react-resize-detector";
import ReactECharts from "./reactEcharts";
import {
childrenToProps,
@@ -33,7 +33,7 @@ import {
echartsConfigOmitChildren,
getEchartsConfig,
getSelectedPoints,
-} from "comps/chartComp/chartUtils";
+} from "./chartUtils";
import 'echarts-extension-gmap';
import log from "loglevel";
@@ -57,7 +57,8 @@ BasicChartTmpComp = withViewFn(BasicChartTmpComp, (comp) => {
const onUIEvent = comp.children.onUIEvent.getView();
const onEvent = comp.children.onEvent.getView();
- const echartsCompRef = useRef();
+ const echartsCompRef = useRef(null);
+ const containerRef = useRef(null);
const [chartSize, setChartSize] = useState();
const firstResize = useRef(true);
const theme = useContext(ThemeContext);
@@ -120,43 +121,49 @@ BasicChartTmpComp = withViewFn(BasicChartTmpComp, (comp) => {
}, [onUIEvent]);
const echartsConfigChildren = _.omit(comp.children, echartsConfigOmitChildren);
+
+ const childrenProps = childrenToProps(echartsConfigChildren);
+
const option = useMemo(() => {
return getEchartsConfig(
- childrenToProps(echartsConfigChildren) as ToViewReturn,
+ childrenProps as ToViewReturn,
chartSize,
- theme?.theme?.components?.candleStickChart || {},
+ themeConfig
);
- }, [chartSize, ...Object.values(echartsConfigChildren)]);
+ }, [childrenProps, chartSize, ...Object.values(echartsConfigChildren)]);
useEffect(() => {
comp.children.mapInstance.dispatch(changeValueAction(null, false))
}, [option])
+ useResizeDetector({
+ targetRef: containerRef,
+ onResize: ({width, height}) => {
+ if (width && height) {
+ setChartSize({ w: width, h: height });
+ }
+ if (!firstResize.current) {
+ // ignore the first resize, which will impact the loading animation
+ echartsCompRef.current?.getEchartsInstance().resize();
+ } else {
+ firstResize.current = false;
+ }
+ }
+ })
+
return (
- {
- if (w && h) {
- setChartSize({ w: w, h: h });
- }
- if (!firstResize.current) {
- // ignore the first resize, which will impact the loading animation
- echartsCompRef.current?.getEchartsInstance().resize();
- } else {
- firstResize.current = false;
- }
- }}
- >
+
(echartsCompRef.current = e)}
- style={{ height: "100%" }}
- notMerge
- lazyUpdate
- opts={{ locale: getEchartsLocale() }}
- option={option}
- theme={themeConfig}
- mode={mode}
- />
-
+ ref={(e) => (echartsCompRef.current = e)}
+ style={{ height: "100%" }}
+ notMerge
+ lazyUpdate
+ opts={{ locale: getEchartsLocale() }}
+ option={option}
+ theme={themeConfig}
+ mode={mode}
+ />
+
);
});
diff --git a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConfigs/barChartConfig.tsx b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConfigs/barChartConfig.tsx
index 6c91fe252a..dd7a369934 100644
--- a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConfigs/barChartConfig.tsx
+++ b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConfigs/barChartConfig.tsx
@@ -1,11 +1,19 @@
import {
BoolControl,
+ NumberControl,
+ StringControl,
+ withDefault,
dropdownControl,
MultiCompBuilder,
showLabelPropertyView,
+ ColorControl,
+ Dropdown,
+ toArray,
+ jsonControl,
} from "lowcoder-sdk";
+import { changeChildAction, CompAction } from "lowcoder-core";
import { BarSeriesOption } from "echarts";
-import { trans } from "i18n/comps";
+import { i18nObjs, trans } from "i18n/comps";
const BarTypeOptions = [
{
@@ -13,37 +21,119 @@ const BarTypeOptions = [
value: "basicBar",
},
{
- label: trans("chart.stackedBar"),
- value: "stackedBar",
+ label: trans("chart.waterfallBar"),
+ value: "waterfall",
+ },
+ {
+ label: trans("chart.polar"),
+ value: "polar",
},
] as const;
export const BarChartConfig = (function () {
return new MultiCompBuilder(
{
- showLabel: BoolControl,
+ showLabel: withDefault(BoolControl, true),
type: dropdownControl(BarTypeOptions, "basicBar"),
+ barWidth: withDefault(NumberControl, 40),
+ showBackground: withDefault(BoolControl, false),
+ backgroundColor: withDefault(ColorControl, i18nObjs.defaultBarChartOption.barBg),
+ radiusAxisMax: NumberControl,
+ polarRadiusStart: withDefault(StringControl, '30'),
+ polarRadiusEnd: withDefault(StringControl, '80%'),
+ polarStartAngle: withDefault(NumberControl, 90),
+ polarEndAngle: withDefault(NumberControl, -180),
+ polarIsTangent: withDefault(BoolControl, false),
+ stack: withDefault(BoolControl, false),
+ race: withDefault(BoolControl, false),
+ labelData: jsonControl(toArray, []),
},
(props): BarSeriesOption => {
const config: BarSeriesOption = {
type: "bar",
+ subtype: props.type,
+ realtimeSort: props.race,
+ seriesLayoutBy: props.race?'column':undefined,
label: {
show: props.showLabel,
position: "top",
+ valueAnimation: props.race,
+ },
+ barWidth: `${props.barWidth}%`,
+ showBackground: props.showBackground,
+ backgroundStyle: {
+ color: props.backgroundColor,
},
+ polarData: {
+ radiusAxisMax: props.radiusAxisMax,
+ polarRadiusStart: props.polarRadiusStart,
+ polarRadiusEnd: props.polarRadiusEnd,
+ polarStartAngle: props.polarStartAngle,
+ polarEndAngle: props.polarEndAngle,
+ labelData: props.labelData,
+ polarIsTangent: props.polarIsTangent,
+ },
+ race: props.race,
};
- if (props.type === "stackedBar") {
+ if (props.stack) {
config.stack = "stackValue";
}
+ if (props.type === "waterfall") {
+ config.label = undefined;
+ config.stack = "stackValue";
+ }
+ if (props.type === "polar") {
+ config.coordinateSystem = 'polar';
+ }
return config;
}
)
- .setPropertyViewFn((children) => (
+ .setPropertyViewFn((children, dispatch: (action: CompAction) => void) => (
<>
+ {
+ dispatch(changeChildAction("type", value));
+ }}
+ />
{showLabelPropertyView(children)}
- {children.type.propertyView({
- label: trans("chart.barType"),
- radioButton: true,
+ {children.barWidth.propertyView({
+ label: trans("barChart.barWidth"),
+ })}
+ {children.type.getView() !== "waterfall" && children.race.propertyView({
+ label: trans("barChart.race"),
+ })}
+ {children.type.getView() !== "waterfall" && children.stack.propertyView({
+ label: trans("barChart.stack"),
+ })}
+ {children.showBackground.propertyView({
+ label: trans("barChart.showBg"),
+ })}
+ {children.showBackground.getView() && children.backgroundColor.propertyView({
+ label: trans("barChart.bgColor"),
+ })}
+ {children.type.getView() === "polar" && children.polarIsTangent.propertyView({
+ label: trans("barChart.polarIsTangent"),
+ })}
+ {children.type.getView() === "polar" && children.polarStartAngle.propertyView({
+ label: trans("barChart.polarStartAngle"),
+ })}
+ {children.type.getView() === "polar" && children.polarEndAngle.propertyView({
+ label: trans("barChart.polarEndAngle"),
+ })}
+ {children.type.getView() === "polar" && children.radiusAxisMax.propertyView({
+ label: trans("barChart.radiusAxisMax"),
+ })}
+ {children.type.getView() === "polar" && children.polarRadiusStart.propertyView({
+ label: trans("barChart.polarRadiusStart"),
+ })}
+ {children.type.getView() === "polar" && children.polarRadiusEnd.propertyView({
+ label: trans("barChart.polarRadiusEnd"),
+ })}
+ {children.type.getView() === "polar" && children.labelData.propertyView({
+ label: trans("barChart.polarLabelData"),
})}
))
diff --git a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConfigs/lineChartConfig.tsx b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConfigs/lineChartConfig.tsx
index 266e5fbf70..1b88d4a06e 100644
--- a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConfigs/lineChartConfig.tsx
+++ b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConfigs/lineChartConfig.tsx
@@ -3,28 +3,18 @@ import {
MultiCompBuilder,
BoolControl,
dropdownControl,
+ jsonControl,
+ toArray,
showLabelPropertyView,
withContext,
+ ColorControl,
StringControl,
+ NumberControl,
+ withDefault,
ColorOrBoolCodeControl,
} from "lowcoder-sdk";
import { trans } from "i18n/comps";
-const BarTypeOptions = [
- {
- label: trans("chart.basicLine"),
- value: "basicLine",
- },
- {
- label: trans("chart.stackedLine"),
- value: "stackedLine",
- },
- {
- label: trans("chart.areaLine"),
- value: "areaLine",
- },
-] as const;
-
export const ItemColorComp = withContext(
new MultiCompBuilder({ value: ColorOrBoolCodeControl }, (props) => props.value)
.setPropertyViewFn((children) =>
@@ -38,13 +28,83 @@ export const ItemColorComp = withContext(
["seriesName", "value"] 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 BorderTypeOptions = [
+ {
+ label: trans("lineChart.solid"),
+ value: "solid",
+ },
+ {
+ label: trans("lineChart.dashed"),
+ value: "dashed",
+ },
+ {
+ label: trans("lineChart.dotted"),
+ value: "dotted",
+ },
+] as const;
+
export const LineChartConfig = (function () {
return new MultiCompBuilder(
{
showLabel: BoolControl,
- type: dropdownControl(BarTypeOptions, "basicLine"),
+ 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, []),
+ //series-line.itemStyle
+ borderColor: ColorControl,
+ borderWidth: NumberControl,
+ borderType: dropdownControl(BorderTypeOptions, 'solid'),
},
(props): LineSeriesOption => {
const config: LineSeriesOption = {
@@ -52,15 +112,13 @@ export const LineChartConfig = (function () {
label: {
show: props.showLabel,
},
+ symbol: props.symbol,
+ symbolSize: props.symbolSize,
itemStyle: {
color: (params) => {
- if (!params.encode || !params.dimensionNames) {
- return params.color;
- }
- const dataKey = params.dimensionNames[params.encode["y"][0]];
const color = (props.itemColor as any)({
seriesName: params.seriesName,
- value: (params.data as any)[dataKey],
+ value: params.data,
});
if (color === "true") {
return "red";
@@ -69,27 +127,96 @@ export const LineChartConfig = (function () {
}
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.type === "stackedLine") {
+ if (props.stacked) {
config.stack = "stackValue";
- } else if (props.type === "areaLine") {
+ }
+ 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.type.propertyView({
- label: trans("chart.lineType"),
+ {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"),
+ })}
))
.build();
diff --git a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConfigs/pieChartConfig.tsx b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConfigs/pieChartConfig.tsx
index 0861fb6ba0..e8781d5c37 100644
--- a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConfigs/pieChartConfig.tsx
+++ b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConfigs/pieChartConfig.tsx
@@ -1,6 +1,11 @@
import { MultiCompBuilder } from "lowcoder-sdk";
import { PieSeriesOption } from "echarts";
-import { dropdownControl } from "lowcoder-sdk";
+import {
+ dropdownControl,
+ NumberControl,
+ StringControl,
+ withDefault,
+ } from "lowcoder-sdk";
import { ConstructorToView } from "lowcoder-core";
import { trans } from "i18n/comps";
@@ -17,6 +22,14 @@ const BarTypeOptions = [
label: trans("chart.rosePie"),
value: "rosePie",
},
+ {
+ label: trans("chart.calendarPie"),
+ value: "calendarPie",
+ },
+ {
+ label: trans("chart.geoPie"),
+ value: "geoPie",
+ },
] as const;
// radius percent for each pie chart when one line has [1, 2, 3] pie charts
@@ -28,20 +41,37 @@ export const PieChartConfig = (function () {
return new MultiCompBuilder(
{
type: dropdownControl(BarTypeOptions, "basicPie"),
+ cellSize: withDefault(NumberControl, 40),
+ range: withDefault(StringControl, "2021-09"),
+ mapUrl: withDefault(StringControl, "https://echarts.apache.org/examples/data/asset/geo/USA.json"),
},
(props): PieSeriesOption => {
const config: PieSeriesOption = {
type: "pie",
+ subtype: props.type,
label: {
show: true,
formatter: "{d}%",
},
+ range: props.range,
};
if (props.type === "rosePie") {
config.roseType = "area";
- } else if (props.type === "doughnutPie") {
+ }
+ if (props.type === "doughnutPie") {
config.radius = ["40%", "60%"];
}
+ if (props.type === "calendarPie") {
+ config.coordinateSystem = 'calendar';
+ config.cellSize = [props.cellSize, props.cellSize];
+ config.label = {
+ ...config.label,
+ position: 'inside'
+ };
+ }
+ if (props.type === "geoPie") {
+ config.mapUrl = props.mapUrl;
+ }
return config;
}
)
@@ -50,6 +80,15 @@ export const PieChartConfig = (function () {
{children.type.propertyView({
label: trans("chart.pieType"),
})}
+ {children.type.getView() === "calendarPie" && children.cellSize.propertyView({
+ label: trans("lineChart.cellSize"),
+ })}
+ {children.type.getView() === "calendarPie" && children.range.propertyView({
+ label: trans("lineChart.range"),
+ })}
+ {children.type.getView() === "geoPie" && children.mapUrl.propertyView({
+ label: trans("pieChart.mapUrl"),
+ })}
))
.build();
diff --git a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConfigs/scatterChartConfig.tsx b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConfigs/scatterChartConfig.tsx
index edb339bdbe..34b5f2cb6f 100644
--- a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConfigs/scatterChartConfig.tsx
+++ b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConfigs/scatterChartConfig.tsx
@@ -2,6 +2,10 @@ import {
MultiCompBuilder,
dropdownControl,
BoolControl,
+ StringControl,
+ NumberControl,
+ ColorControl,
+ withDefault,
showLabelPropertyView,
} from "lowcoder-sdk";
import { ScatterSeriesOption } from "echarts";
@@ -38,7 +42,19 @@ 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 {
@@ -46,16 +62,82 @@ export const ScatterChartConfig = (function () {
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();
diff --git a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConstants.tsx b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConstants.tsx
index 8d8811daf3..d557c82fa9 100644
--- a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConstants.tsx
+++ b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConstants.tsx
@@ -16,7 +16,9 @@ import {
uiChildren,
clickEvent,
styleControl,
- EchartsStyle
+ EchartDefaultTextStyle,
+ EchartDefaultChartStyle,
+ toArray
} from "lowcoder-sdk";
import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core";
import { BarChartConfig } from "./chartConfigs/barChartConfig";
@@ -32,6 +34,8 @@ import { EChartsOption } from "echarts";
import { i18nObjs, trans } from "i18n/comps";
import { GaugeChartConfig } from "./chartConfigs/gaugeChartConfig";
import { FunnelChartConfig } from "./chartConfigs/funnelChartConfig";
+import {EchartsTitleVerticalConfig} from "../chartComp/chartConfigs/echartsTitleVerticalConfig";
+import {EchartsTitleConfig} from "../chartComp/chartConfigs/echartsTitleConfig";
export const ChartTypeOptions = [
{
@@ -237,7 +241,7 @@ const EchartsOptionComp = withType(EchartsOptionMap, "funnel");
export type CharOptionCompType = keyof typeof ChartOptionMap;
export const chartUiModeChildren = {
- title: StringControl,
+ title: withDefault(StringControl, trans("echarts.defaultTitle")),
data: jsonControl(toJSONObjectArray, i18nObjs.defaultDataSource),
xAxisKey: valueComp(""), // x-axis, key from data
xAxisDirection: dropdownControl(XAxisDirectionOptions, "horizontal"),
@@ -250,19 +254,31 @@ export const chartUiModeChildren = {
};
let chartJsonModeChildren: any = {
+ echartsData: jsonControl(toArray),
echartsOption: jsonControl(toObject, i18nObjs.defaultEchartsJsonOption),
echartsTitle: withDefault(StringControl, trans("echarts.defaultTitle")),
echartsLegendConfig: EchartsLegendConfig,
echartsLabelConfig: EchartsLabelConfig,
echartsConfig: EchartsOptionComp,
- // style: styleControl(EchartsStyle, 'style'),
+ echartsTitleVerticalConfig: EchartsTitleVerticalConfig,
+ echartsTitleConfig:EchartsTitleConfig,
+
+ left:withDefault(NumberControl,trans('chart.defaultLeft')),
+ right:withDefault(NumberControl,trans('chart.defaultRight')),
+ top:withDefault(NumberControl,trans('chart.defaultTop')),
+ bottom:withDefault(NumberControl,trans('chart.defaultBottom')),
+
tooltip: withDefault(BoolControl, true),
legendVisibility: withDefault(BoolControl, true),
}
-if (EchartsStyle) {
+if (EchartDefaultChartStyle && EchartDefaultTextStyle) {
chartJsonModeChildren = {
...chartJsonModeChildren,
- style: styleControl(EchartsStyle, 'style'),
+ chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'),
+ titleStyle: styleControl(EchartDefaultTextStyle, 'titleStyle'),
+ xAxisStyle: styleControl(EchartDefaultTextStyle, 'xAxis'),
+ yAxisStyle: styleControl(EchartDefaultTextStyle, 'yAxisStyle'),
+ legendStyle: styleControl(EchartDefaultTextStyle, 'legendStyle'),
}
}
diff --git a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartPropertyView.tsx
index cfda76b142..44eda032b3 100644
--- a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartPropertyView.tsx
+++ b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartPropertyView.tsx
@@ -13,6 +13,7 @@ import {
} from "lowcoder-sdk";
import { trans } from "i18n/comps";
import { examplesUrl, mapExamplesUrl, mapOptionUrl, optionUrl } from "./chartConfigs/chartUrls";
+import {LegendConfig} from "./chartConfigs/legendConfig";
export function chartPropertyView(
children: ChartCompChildrenType,
@@ -27,9 +28,7 @@ export function chartPropertyView(
const uiModePropertyView = (
<>
- {children.data.propertyView({
- label: trans("chart.data"),
- })}
+ {children.echartsData.propertyView({ label: trans("chart.data") })}
+ {children.echartsTitleConfig.getPropertyView()}
+ {children.echartsTitleVerticalConfig.getPropertyView()}
+ {children.legendConfig.getPropertyView()}
{children.title.propertyView({ label: trans("chart.title") })}
+ {children.left.propertyView({ label: trans("chart.left"), tooltip: trans("echarts.leftTooltip") })}
+ {children.right.propertyView({ label: trans("chart.right"), tooltip: trans("echarts.rightTooltip") })}
+ {children.top.propertyView({ label: trans("chart.top"), tooltip: trans("echarts.topTooltip") })}
+ {children.bottom.propertyView({ label: trans("chart.bottom"), tooltip: trans("echarts.bottomTooltip") })}
{children.chartConfig.children.compType.getView() !== "pie" && (
<>
{children.xAxisDirection.propertyView({
@@ -125,10 +131,29 @@ export function chartPropertyView(
{children.yConfig.getPropertyView()}
)}
- {children.legendConfig.getPropertyView()}
{hiddenPropertyView(children)}
+ {children.tooltip.propertyView({label: trans("echarts.tooltip"), tooltip: trans("echarts.tooltipTooltip")})}
+
+
+ {children.chartStyle?.getPropertyView()}
+
+
+ {children.titleStyle?.getPropertyView()}
+
+
+ {children.xAxisStyle?.getPropertyView()}
+
+
+ {children.yAxisStyle?.getPropertyView()}
+
+
+ {children.legendStyle?.getPropertyView()}
+
+
+ {children.data.propertyView({
+ label: trans("chart.data"),
+ })}
- {children.chartConfig.getPropertyView()}
);
diff --git a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartUtils.ts b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartUtils.ts
index 8bb44e0416..6c50206902 100644
--- a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartUtils.ts
+++ b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartUtils.ts
@@ -12,6 +12,8 @@ import { chartColorPalette, isNumeric, JSONObject, loadScript } from "lowcoder-s
import { calcXYConfig } from "comps/chartComp/chartConfigs/cartesianAxisConfig";
import Big from "big.js";
import { googleMapsApiUrl } from "./chartConfigs/chartUrls";
+import {chartStyleWrapper, styleWrapper} from "../../util/styleWrapper";
+import parseBackground from "../../util/gradientBackgroundColor";
export function transformData(
originData: JSONObject[],
@@ -134,55 +136,21 @@ export function getEchartsConfig(
theme?: any,
): EChartsOptionWithMap {
if (props.mode === "json") {
- let opt={
- "title": {
- "text": props.echartsTitle,
- 'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom',
- "left":"center"
- },
- "backgroundColor": props?.style?.background || theme?.style?.background,
- "color": props.echartsOption.data?.map(data => data.color),
- "tooltip": props.tooltip && {
- "trigger": "item",
- "formatter": "{a} ();
+ const containerRef = useRef(null);
+ const [chartSize, setChartSize] = useState();
+ const firstResize = useRef(true);
+ const theme = useContext(ThemeContext);
+ const defaultChartTheme = {
+ color: chartColorPalette,
+ backgroundColor: "#fff",
+ };
+
+ let themeConfig = defaultChartTheme;
+ try {
+ themeConfig = theme?.theme.chart ? JSON.parse(theme?.theme.chart) : defaultChartTheme;
+ } catch (error) {
+ log.error('theme chart error: ', error);
+ }
+
+ const triggerClickEvent = async (dispatch: any, action: CompAction) => {
+ await getPromiseAfterDispatch(
+ dispatch,
+ action,
+ { autoHandleAfterReduce: true }
+ );
+ onEvent('click');
+ }
+
+ useEffect(() => {
+ const echartsCompInstance = echartsCompRef?.current?.getEchartsInstance();
+ if (!echartsCompInstance) {
+ return _.noop;
+ }
+ echartsCompInstance?.on("click", (param: any) => {
+ document.dispatchEvent(new CustomEvent("clickEvent", {
+ bubbles: true,
+ detail: {
+ action: 'click',
+ data: param.data,
+ }
+ }));
+ triggerClickEvent(
+ comp.dispatch,
+ changeChildAction("lastInteractionData", param.data, false)
+ );
+ });
+ return () => {
+ echartsCompInstance?.off("click");
+ document.removeEventListener('clickEvent', clickEventCallback)
+ };
+ }, []);
+
+ useEffect(() => {
+ // bind events
+ const echartsCompInstance = echartsCompRef?.current?.getEchartsInstance();
+ if (!echartsCompInstance) {
+ return _.noop;
+ }
+ echartsCompInstance?.on("selectchanged", (param: any) => {
+ const option: any = echartsCompInstance?.getOption();
+ document.dispatchEvent(new CustomEvent("clickEvent", {
+ bubbles: true,
+ detail: {
+ action: param.fromAction,
+ data: getSelectedPoints(param, option)
+ }
+ }));
+
+ if (param.fromAction === "select") {
+ comp.dispatch(changeChildAction("selectedPoints", getSelectedPoints(param, option), false));
+ onUIEvent("select");
+ } else if (param.fromAction === "unselect") {
+ comp.dispatch(changeChildAction("selectedPoints", getSelectedPoints(param, option), false));
+ onUIEvent("unselect");
+ }
+
+ triggerClickEvent(
+ comp.dispatch,
+ changeChildAction("lastInteractionData", getSelectedPoints(param, option), false)
+ );
+ });
+ // unbind
+ return () => {
+ echartsCompInstance?.off("selectchanged");
+ document.removeEventListener('clickEvent', clickEventCallback)
+ };
+ }, [onUIEvent]);
+
+ const echartsConfigChildren = _.omit(comp.children, echartsConfigOmitChildren);
+ const childrenProps = childrenToProps(echartsConfigChildren);
+
+ const option = useMemo(() => {
+ return getEchartsConfig(
+ childrenProps as ToViewReturn,
+ chartSize,
+ themeConfig
+ );
+ }, [theme, childrenProps, chartSize, ...Object.values(echartsConfigChildren)]);
+
+ useResizeDetector({
+ targetRef: containerRef,
+ onResize: ({width, height}) => {
+ if (width && height) {
+ setChartSize({ w: width, h: height });
+ }
+ if (!firstResize.current) {
+ // ignore the first resize, which will impact the loading animation
+ echartsCompRef.current?.getEchartsInstance().resize();
+ } else {
+ firstResize.current = false;
+ }
+ }
+ })
+
+ return (
+
+ (echartsCompRef.current = e)}
+ style={{ height: "100%" }}
+ notMerge
+ lazyUpdate
+ opts={{ locale: getEchartsLocale() }}
+ option={option}
+ mode={mode}
+ />
+
+ );
+});
+
+function getYAxisFormatContextValue(
+ data: Array,
+ yAxisType: EchartsAxisType,
+ yAxisName?: string
+) {
+ const dataSample = yAxisName && data.length > 0 && data[0][yAxisName];
+ let contextValue = dataSample;
+ if (yAxisType === "time") {
+ // to timestamp
+ const time =
+ typeof dataSample === "number" || typeof dataSample === "string"
+ ? new Date(dataSample).getTime()
+ : null;
+ if (time) contextValue = time;
+ }
+ return contextValue;
+}
+
+BoxplotChartTmpComp = class extends BoxplotChartTmpComp {
+ private lastYAxisFormatContextVal?: JSONValue;
+ private lastColorContext?: JSONObject;
+
+ updateContext(comp: this) {
+ // the context value of axis format
+ let resultComp = comp;
+ const data = comp.children.data.getView();
+ const yAxisContextValue = getYAxisFormatContextValue(
+ data,
+ comp.children.yConfig.children.yAxisType.getView(),
+ );
+ if (yAxisContextValue !== comp.lastYAxisFormatContextVal) {
+ comp.lastYAxisFormatContextVal = yAxisContextValue;
+ resultComp = comp.setChild(
+ "yConfig",
+ comp.children.yConfig.reduce(
+ wrapChildAction(
+ "formatter",
+ AxisFormatterComp.changeContextDataAction({ value: yAxisContextValue })
+ )
+ )
+ );
+ }
+ return resultComp;
+ }
+
+ override reduce(action: CompAction): this {
+ const comp = super.reduce(action);
+ if (action.type === CompActionTypes.UPDATE_NODES_V2) {
+ const newData = comp.children.data.getView();
+ // data changes
+ if (comp.children.data !== this.children.data) {
+ setTimeout(() => {
+ // update x-axis value
+ const keys = getDataKeys(newData);
+ if (keys.length > 0 && !keys.includes(comp.children.xAxisKey.getView())) {
+ comp.children.xAxisKey.dispatch(changeValueAction(keys[0] || ""));
+ }
+ if (keys.length > 0 && !keys.includes(comp.children.yAxisKey.getView())) {
+ comp.children.yAxisKey.dispatch(changeValueAction(keys[1] || ""));
+ }
+ }, 0);
+ }
+ return this.updateContext(comp);
+ }
+ return comp;
+ }
+
+ override autoHeight(): boolean {
+ return false;
+ }
+};
+
+let BoxplotChartComp = withExposingConfigs(BoxplotChartTmpComp, [
+ depsConfig({
+ name: "selectedPoints",
+ desc: trans("chart.selectedPointsDesc"),
+ depKeys: ["selectedPoints"],
+ func: (input) => {
+ return input.selectedPoints;
+ },
+ }),
+ depsConfig({
+ name: "lastInteractionData",
+ desc: trans("chart.lastInteractionDataDesc"),
+ depKeys: ["lastInteractionData"],
+ func: (input) => {
+ return input.lastInteractionData;
+ },
+ }),
+ depsConfig({
+ name: "data",
+ desc: trans("chart.dataDesc"),
+ depKeys: ["data", "mode"],
+ func: (input) =>[] ,
+ }),
+ new NameConfig("title", trans("chart.titleDesc")),
+]);
+
+
+export const BoxplotChartCompWithDefault = withDefault(BoxplotChartComp, {
+ xAxisKey: "date",
+});
diff --git a/client/packages/lowcoder-comps/src/comps/boxplotChartComp/boxplotChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/boxplotChartComp/boxplotChartConstants.tsx
new file mode 100644
index 0000000000..ffec6b31e8
--- /dev/null
+++ b/client/packages/lowcoder-comps/src/comps/boxplotChartComp/boxplotChartConstants.tsx
@@ -0,0 +1,248 @@
+import {
+ jsonControl,
+ stateComp,
+ toJSONObjectArray,
+ toObject,
+ BoolControl,
+ ColorControl,
+ withDefault,
+ StringControl,
+ NumberControl,
+ dropdownControl,
+ list,
+ eventHandlerControl,
+ valueComp,
+ withType,
+ uiChildren,
+ clickEvent,
+ toArray,
+ styleControl,
+ EchartDefaultTextStyle,
+ EchartDefaultChartStyle,
+ MultiCompBuilder,
+} from "lowcoder-sdk";
+import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core";
+import { XAxisConfig, YAxisConfig } from "../basicChartComp/chartConfigs/cartesianAxisConfig";
+import { LegendConfig } from "../basicChartComp/chartConfigs/legendConfig";
+import { EchartsLegendConfig } from "../basicChartComp/chartConfigs/echartsLegendConfig";
+import { EchartsLabelConfig } from "../basicChartComp/chartConfigs/echartsLabelConfig";
+import { EChartsOption } from "echarts";
+import { i18nObjs, trans } from "i18n/comps";
+import {EchartsTitleVerticalConfig} from "../chartComp/chartConfigs/echartsTitleVerticalConfig";
+import {EchartsTitleConfig} from "../basicChartComp/chartConfigs/echartsTitleConfig";
+
+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 XAxisDirectionOptions = [
+ {
+ label: trans("chart.horizontal"),
+ value: "horizontal",
+ },
+ {
+ label: trans("chart.vertical"),
+ value: "vertical",
+ },
+] as const;
+
+export type XAxisDirectionType = ValueFromOption;
+
+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 noDataBoxplotChartConfig = {
+ animation: false,
+ tooltip: {
+ show: false,
+ },
+ legend: {
+ formatter: trans("chart.unknown"),
+ top: "bottom",
+ selectedMode: false,
+ },
+ color: ["#B8BBCC", "#CED0D9", "#DCDEE6", "#E6E6EB"],
+ series: [
+ {
+ type: "boxplot",
+ 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: "boxplot",
+ 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) => {
+ if (!data) {
+ return [];
+ }
+ const dataKeys: Array = [];
+ data[0].forEach((key) => {
+ if (!dataKeys.includes(key)) {
+ dataKeys.push(key);
+ }
+ });
+ return dataKeys;
+};
+
+export const chartUiModeChildren = {
+ title: withDefault(StringControl, trans("echarts.defaultTitle")),
+ data: jsonControl(toArray, i18nObjs.defaultDatasourceBoxplot),
+ xAxisKey: valueComp(""), // x-axis, key from data
+ xAxisDirection: dropdownControl(XAxisDirectionOptions, "horizontal"),
+ xAxisData: jsonControl(toArray, []),
+ yAxisKey: valueComp(""), // x-axis, key from data
+ xConfig: XAxisConfig,
+ yConfig: YAxisConfig,
+ legendConfig: LegendConfig,
+ onUIEvent: eventHandlerControl(UIEventOptions),
+};
+
+let chartJsonModeChildren: any = {
+ echartsOption: jsonControl(toObject, i18nObjs.defaultEchartsJsonOption),
+ echartsTitle: withDefault(StringControl, trans("echarts.defaultTitle")),
+ echartsLegendConfig: EchartsLegendConfig,
+ echartsLabelConfig: EchartsLabelConfig,
+ echartsTitleVerticalConfig: EchartsTitleVerticalConfig,
+ echartsTitleConfig:EchartsTitleConfig,
+
+ left:withDefault(NumberControl,trans('chart.defaultLeft')),
+ right:withDefault(NumberControl,trans('chart.defaultRight')),
+ top:withDefault(NumberControl,trans('chart.defaultTop')),
+ bottom:withDefault(NumberControl,trans('chart.defaultBottom')),
+
+ tooltip: withDefault(BoolControl, true),
+ legendVisibility: withDefault(BoolControl, true),
+}
+
+if (EchartDefaultChartStyle && EchartDefaultTextStyle) {
+ chartJsonModeChildren = {
+ ...chartJsonModeChildren,
+ chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'),
+ titleStyle: styleControl(EchartDefaultTextStyle, 'titleStyle'),
+ xAxisStyle: styleControl(EchartDefaultTextStyle, 'xAxis'),
+ yAxisStyle: styleControl(EchartDefaultTextStyle, 'yAxisStyle'),
+ legendStyle: styleControl(EchartDefaultTextStyle, 'legendStyle'),
+ }
+}
+
+export type UIChartDataType = {
+ seriesName: string;
+ // coordinate chart
+ x?: any;
+ y?: any;
+ // boxplot or funnel
+ itemName?: any;
+ value?: any;
+};
+
+export type NonUIChartDataType = {
+ name: string;
+ value: any;
+}
+
+export const boxplotChartChildrenMap = {
+ selectedPoints: stateComp>([]),
+ lastInteractionData: stateComp | NonUIChartDataType>({}),
+ onEvent: eventHandlerControl([clickEvent] as const),
+ ...chartUiModeChildren,
+ ...chartJsonModeChildren,
+};
+
+const chartUiChildrenMap = uiChildren(boxplotChartChildrenMap);
+export type ChartCompPropsType = RecordConstructorToView;
+export type ChartCompChildrenType = RecordConstructorToComp;
diff --git a/client/packages/lowcoder-comps/src/comps/boxplotChartComp/boxplotChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/boxplotChartComp/boxplotChartPropertyView.tsx
new file mode 100644
index 0000000000..b6694e9103
--- /dev/null
+++ b/client/packages/lowcoder-comps/src/comps/boxplotChartComp/boxplotChartPropertyView.tsx
@@ -0,0 +1,95 @@
+import { changeChildAction, CompAction } from "lowcoder-core";
+import { ChartCompChildrenType, getDataKeys } from "./boxplotChartConstants";
+import {
+ CustomModal,
+ Dropdown,
+ hiddenPropertyView,
+ Option,
+ RedButton,
+ Section,
+ sectionNames,
+ controlItem,
+} from "lowcoder-sdk";
+import { trans } from "i18n/comps";
+
+export function boxplotChartPropertyView(
+ children: ChartCompChildrenType,
+ dispatch: (action: CompAction) => void
+) {
+ const columnOptions = getDataKeys(children.data.getView()).map((key) => ({
+ label: key,
+ value: key,
+ }));
+
+ const uiModePropertyView = (
+ <>
+
+ {
+ dispatch(changeChildAction("xAxisKey", value));
+ }}
+ />
+ {
+ dispatch(changeChildAction("yAxisKey", value));
+ }}
+ />
+
+
+
+ {children.onUIEvent.propertyView({title: trans("chart.chartEventHandlers")})}
+
+
+ {children.onEvent.propertyView()}
+
+
+
+ {children.echartsTitleConfig.getPropertyView()}
+ {children.echartsTitleVerticalConfig.getPropertyView()}
+ {children.legendConfig.getPropertyView()}
+ {children.title.propertyView({ label: trans("chart.title") })}
+ {children.left.propertyView({ label: trans("chart.left"), tooltip: trans("echarts.leftTooltip") })}
+ {children.right.propertyView({ label: trans("chart.right"), tooltip: trans("echarts.rightTooltip") })}
+ {children.top.propertyView({ label: trans("chart.top"), tooltip: trans("echarts.topTooltip") })}
+ {children.bottom.propertyView({ label: trans("chart.bottom"), tooltip: trans("echarts.bottomTooltip") })}
+ {hiddenPropertyView(children)}
+ {children.tooltip.propertyView({label: trans("echarts.tooltip"), tooltip: trans("echarts.tooltipTooltip")})}
+
+
+ {children.chartStyle?.getPropertyView()}
+
+
+ {children.titleStyle?.getPropertyView()}
+
+
+ {children.xAxisStyle?.getPropertyView()}
+
+
+ {children.yAxisStyle?.getPropertyView()}
+
+
+ {children.data.propertyView({
+ label: trans("chart.data"),
+ })}
+
+
+ );
+
+ const getChatConfigByMode = (mode: string) => {
+ switch(mode) {
+ case "ui":
+ return uiModePropertyView;
+ }
+ }
+ return (
+ <>
+ {getChatConfigByMode(children.mode.getView())}
+
+ );
+}
diff --git a/client/packages/lowcoder-comps/src/comps/boxplotChartComp/boxplotChartUtils.ts b/client/packages/lowcoder-comps/src/comps/boxplotChartComp/boxplotChartUtils.ts
new file mode 100644
index 0000000000..2bc1904d47
--- /dev/null
+++ b/client/packages/lowcoder-comps/src/comps/boxplotChartComp/boxplotChartUtils.ts
@@ -0,0 +1,293 @@
+import {
+ ChartCompPropsType,
+ ChartSize,
+ noDataBoxplotChartConfig,
+} from "comps/boxplotChartComp/boxplotChartConstants";
+import { EChartsOptionWithMap } from "../basicChartComp/reactEcharts/types";
+import _ from "lodash";
+import { googleMapsApiUrl } from "../basicChartComp/chartConfigs/chartUrls";
+import parseBackground from "../../util/gradientBackgroundColor";
+import {chartStyleWrapper, styleWrapper} from "../../util/styleWrapper";
+// Define the configuration interface to match the original transform
+
+interface AggregateConfig {
+ resultDimensions: Array<{
+ name: string;
+ from: string;
+ method?: string; // e.g., 'min', 'Q1', 'median', 'Q3', 'max'
+ }>;
+ groupBy: string;
+}
+
+// Custom transform function
+function customAggregateTransform(params: {
+ upstream: { source: any[] };
+ config: AggregateConfig;
+}): any[] {
+ const { upstream, config } = params;
+ const data = upstream.source;
+
+ // Assume data is an array of arrays, with the first row as headers
+ const headers = data[0];
+ const rows = data.slice(1);
+
+ // Find the index of the groupBy column
+ const groupByIndex = headers.indexOf(config.groupBy);
+ if (groupByIndex === -1) {
+ return [];
+ }
+
+ // Group rows by the groupBy column
+ const groups: { [key: string]: any[][] } = {};
+ rows.forEach(row => {
+ const key = row[groupByIndex];
+ if (!groups[key]) {
+ groups[key] = [];
+ }
+ groups[key].push(row);
+ });
+
+ // Define aggregation functions
+ const aggregators: {
+ [method: string]: (values: number[]) => number;
+ } = {
+ min: values => Math.min(...values),
+ max: values => Math.max(...values),
+ Q1: values => percentile(values, 25),
+ median: values => percentile(values, 50),
+ Q3: values => percentile(values, 75),
+ };
+
+ // Helper function to calculate percentiles (Q1, median, Q3)
+ function percentile(arr: number[], p: number): number {
+ const sorted = arr.slice().sort((a, b) => a - b);
+ const index = (p / 100) * (sorted.length - 1);
+ const i = Math.floor(index);
+ const f = index - i;
+ if (i === sorted.length - 1) {
+ return sorted[i];
+ }
+ return sorted[i] + f * (sorted[i + 1] - sorted[i]);
+ }
+
+ // Prepare output headers from resultDimensions
+ const outputHeaders = config.resultDimensions.map(dim => dim.name);
+
+ // Compute aggregated data for each group
+ const aggregatedData: any[][] = [];
+ for (const key in groups) {
+ const groupRows = groups[key];
+ const row: any[] = [];
+
+ config.resultDimensions.forEach(dim => {
+ if (dim.from === config.groupBy) {
+ // Include the group key directly
+ row.push(key);
+ } else {
+ // Find the index of the 'from' column
+ const fromIndex = headers.indexOf(dim.from);
+ if (fromIndex === -1) {
+ return;
+ }
+ // Extract values for the 'from' column in this group
+ const values = groupRows
+ .map(r => parseFloat(r[fromIndex]))
+ .filter(v => !isNaN(v));
+ if (dim.method && aggregators[dim.method]) {
+ // Apply the aggregation method
+ row.push(aggregators[dim.method](values));
+ } else {
+ return;
+ }
+ }
+ });
+
+ aggregatedData.push(row);
+ }
+
+ // Return the transformed data with headers
+ return [outputHeaders, ...aggregatedData];
+}
+
+export const echartsConfigOmitChildren = [
+ "hidden",
+ "selectedPoints",
+ "onUIEvent",
+ "mapInstance"
+] as const;
+type EchartsConfigProps = Omit;
+
+// https://echarts.apache.org/en/option.html
+export function getEchartsConfig(
+ props: EchartsConfigProps,
+ chartSize?: ChartSize,
+ theme?: any,
+): EChartsOptionWithMap {
+ const gridPos = {
+ left: `${props?.left}%`,
+ right: `${props?.right}%`,
+ bottom: `${props?.bottom}%`,
+ top: `${props?.top}%`,
+ };
+
+ let config: any = {
+ title: {
+ text: props.title,
+ top: props.echartsTitleVerticalConfig.top,
+ left:props.echartsTitleConfig.top,
+ textStyle: {
+ ...styleWrapper(props?.titleStyle, theme?.titleStyle)
+ }
+ },
+ backgroundColor: parseBackground( props?.chartStyle?.background || theme?.chartStyle?.backgroundColor || "#FFFFFF"),
+ tooltip: props.tooltip && {
+ trigger: "axis",
+ axisPointer: {
+ type: "line",
+ lineStyle: {
+ color: "rgba(0,0,0,0.2)",
+ width: 2,
+ type: "solid"
+ }
+ }
+ },
+ grid: {
+ ...gridPos,
+ containLabel: true,
+ },
+ xAxis: {
+ name: props.xAxisKey,
+ nameLocation: 'middle',
+ nameGap: 30,
+ scale: true,
+ axisLabel: {
+ ...styleWrapper(props?.xAxisStyle, theme?.xAxisStyle, 11)
+ }
+ },
+ yAxis: {
+ type: "category",
+ axisLabel: {
+ ...styleWrapper(props?.yAxisStyle, theme?.yAxisStyle, 11)
+ }
+ },
+ dataset: [
+ {
+ id: 'raw',
+ source: customAggregateTransform({upstream: {source: props.data as any[]}, config:{
+ resultDimensions: [
+ { name: 'min', from: props.xAxisKey, method: 'min' },
+ { name: 'Q1', from: props.xAxisKey, method: 'Q1' },
+ { name: 'median', from: props.xAxisKey, method: 'median' },
+ { name: 'Q3', from: props.xAxisKey, method: 'Q3' },
+ { name: 'max', from: props.xAxisKey, method: 'max' },
+ { name: props.yAxisKey, from: props.yAxisKey }
+ ],
+ groupBy: props.yAxisKey
+ }}),
+ },
+ {
+ id: 'finaldataset',
+ fromDatasetId: 'raw',
+ transform: [
+ {
+ type: 'sort',
+ config: {
+ dimension: 'Q3',
+ order: 'asc'
+ }
+ }
+ ]
+ }
+ ],
+ };
+
+ if (props.data.length <= 0) {
+ // no data
+ return {
+ ...config,
+ ...noDataBoxplotChartConfig,
+ };
+ }
+ const yAxisConfig = props.yConfig();
+ // y-axis is category and time, data doesn't need to aggregate
+ let transformedData = props.data;
+
+ config = {
+ ...config,
+ series: [{
+ name: props.xAxisKey,
+ type: 'boxplot',
+ datasetId: 'finaldataset',
+ encode: {
+ x: ['min', 'Q1', 'median', 'Q3', 'max'],
+ y: props.yAxisKey,
+ itemName: [props.yAxisKey],
+ tooltip: ['min', 'Q1', 'median', 'Q3', 'max']
+ },
+ itemStyle: {
+ color: '#b8c5f2',
+ ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle)
+ },
+ }],
+ };
+ if(config.series[0].itemStyle.borderWidth === 0) config.series[0].itemStyle.borderWidth = 1;
+
+ // console.log("Echarts transformedData and config", transformedData, config);
+ return config;
+}
+
+export function getSelectedPoints(param: any, option: any) {
+ const series = option.series;
+ const dataSource = _.isArray(option.dataset) && option.dataset[0]?.source;
+ if (series && dataSource) {
+ return param.selected.flatMap((selectInfo: any) => {
+ const seriesInfo = series[selectInfo.seriesIndex];
+ if (!seriesInfo || !seriesInfo.encode) {
+ return [];
+ }
+ return selectInfo.dataIndex.map((index: any) => {
+ const commonResult = {
+ seriesName: seriesInfo.name,
+ };
+ if (seriesInfo.encode.itemName && seriesInfo.encode.value) {
+ return {
+ ...commonResult,
+ itemName: dataSource[index][seriesInfo.encode.itemName],
+ value: dataSource[index][seriesInfo.encode.value],
+ };
+ } else {
+ return {
+ ...commonResult,
+ x: dataSource[index][seriesInfo.encode.x],
+ y: dataSource[index][seriesInfo.encode.y],
+ };
+ }
+ });
+ });
+ }
+ return [];
+}
+
+export function loadGoogleMapsScript(apiKey: string) {
+ const mapsUrl = `${googleMapsApiUrl}?key=${apiKey}`;
+ const scripts = document.getElementsByTagName('script');
+ // is script already loaded
+ let scriptIndex = _.findIndex(scripts, (script) => script.src.endsWith(mapsUrl));
+ if(scriptIndex > -1) {
+ return scripts[scriptIndex];
+ }
+ // is script loaded with diff api_key, remove the script and load again
+ scriptIndex = _.findIndex(scripts, (script) => script.src.startsWith(googleMapsApiUrl));
+ if(scriptIndex > -1) {
+ scripts[scriptIndex].remove();
+ }
+
+ const script = document.createElement("script");
+ script.type = "text/javascript";
+ script.src = mapsUrl;
+ script.async = true;
+ script.defer = true;
+ window.document.body.appendChild(script);
+
+ return script;
+}
diff --git a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx
index fb379a9681..43ddfbaf30 100644
--- a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx
+++ b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx
@@ -15,7 +15,7 @@ import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin, { EventResizeDoneArg } from "@fullcalendar/interaction";
import listPlugin from "@fullcalendar/list";
import allLocales from "@fullcalendar/core/locales-all";
-import { EventContentArg, DateSelectArg, EventDropArg } from "@fullcalendar/core";
+import { EventContentArg, DateSelectArg, EventDropArg, EventInput } from "@fullcalendar/core";
import momentPlugin from "@fullcalendar/moment";
import ErrorBoundary from "./errorBoundary";
@@ -58,6 +58,8 @@ import {
depsConfig,
stateComp,
JSONObject,
+ isDynamicSegment,
+ Theme,
} from 'lowcoder-sdk';
import {
@@ -81,9 +83,15 @@ import {
resourcesDefaultData,
resourceTimeLineHeaderToolbar,
resourceTimeGridHeaderToolbar,
+ formattedEvents,
} from "./calendarConstants";
import { EventOptionControl } from "./eventOptionsControl";
import { EventImpl } from "@fullcalendar/core/internal";
+import DatePicker from "antd/es/date-picker";
+
+type Theme = typeof Theme;
+
+const DATE_TIME_FORMAT = "YYYY-MM-DD HH:mm:ss";
function fixOldData(oldData: any) {
if(!Boolean(oldData)) return;
@@ -201,10 +209,13 @@ let childrenMap: any = {
currentPremiumView: dropdownControl(DefaultWithPremiumViewOptions, "resourceTimelineDay"),
animationStyle: styleControl(AnimationStyle, 'animationStyle'),
showVerticalScrollbar: withDefault(BoolControl, false),
+ showResourceEventsInFreeView: withDefault(BoolControl, false),
initialData: stateComp({}),
+ updatedEventsData: stateComp(defaultEvents),
updatedEvents: stateComp({}),
insertedEvents: stateComp({}),
deletedEvents: stateComp({}),
+ inputFormat: withDefault(StringControl, DATE_TIME_FORMAT),
};
// this should ensure backwards compatibility with older versions of the SDK
@@ -244,21 +255,25 @@ let CalendarBasicComp = (function () {
animationStyle?:any;
modalStyle?:any;
showVerticalScrollbar?:boolean;
+ showResourceEventsInFreeView?: boolean;
initialData: Array;
+ updatedEventsData: Array;
+ inputFormat: string;
}, dispatch: any) => {
const comp = useContext(EditorContext)?.getUICompByName(
useContext(CompNameContext)
);
- const theme = useContext(ThemeContext);
+ const theme: Theme | undefined = useContext(ThemeContext);
const ref = createRef();
- const editEvent = useRef();
+ const editEvent = useRef();
const initData = useRef(false);
const [form] = Form.useForm();
const [left, setLeft] = useState(undefined);
const [licensed, setLicensed] = useState(props.licenseKey !== "");
const [currentSlotLabelFormat, setCurrentSlotLabelFormat] = useState(slotLabelFormat);
const [initDataMap, setInitDataMap] = useState>({});
+ const [hoverEventId, setHoverEvent] = useState();
useEffect(() => {
setLicensed(props.licenseKey !== "");
@@ -285,60 +300,76 @@ let CalendarBasicComp = (function () {
]);
const currentEvents = useMemo(() => {
+ if (props.showResourceEventsInFreeView && Boolean(props.licenseKey)) {
+ return props.updatedEventsData.filter((event: { resourceId?: any; }) => Boolean(event.resourceId))
+ }
return currentView == "resourceTimelineDay" || currentView == "resourceTimeGridDay"
- ? props.events.filter((event: { resourceId: any; }) => Boolean(event.resourceId))
- : props.events.filter((event: { resourceId: any; }) => !Boolean(event.resourceId));
+ ? props.updatedEventsData.filter((event: { resourceId?: any; }) => Boolean(event.resourceId))
+ : props.updatedEventsData.filter((event: { resourceId?: any; }) => !Boolean(event.resourceId));
}, [
currentView,
- props.events,
+ props.updatedEventsData,
+ props.showResourceEventsInFreeView,
])
// we use one central stack of events for all views
- const events = useMemo(() => {
- return Array.isArray(currentEvents) ? currentEvents.map((item: EventType) => {
- return {
- title: item.label,
- id: item.id,
- start: dayjs(item.start, DateParser).format(),
- end: dayjs(item.end, DateParser).format(),
- allDay: item.allDay,
- ...(item.resourceId ? { resourceId: item.resourceId } : {}),
- ...(item.groupId ? { groupId: item.groupId } : {}),
- backgroundColor: item.backgroundColor,
- extendedProps: { // Ensure color is in extendedProps
- color: isValidColor(item.color || "") ? item.color : theme?.theme?.primary,
- detail: item.detail,
- titleColor:item.titleColor,
- detailColor:item.detailColor,
- titleFontWeight:item.titleFontWeight,
- titleFontStyle:item.titleFontStyle,
- detailFontWeight:item.detailFontWeight,
- detailFontStyle:item.detailFontStyle,
- animation:item?.animation,
- animationDelay:item?.animationDelay,
- animationDuration:item?.animationDuration,
- animationIterationCount:item?.animationIterationCount
- }
- }
- }) : [currentEvents];
+ const events: EventInput = useMemo(() => {
+ return formattedEvents(currentEvents, theme);
}, [currentEvents, theme])
+ const initialEvents = useMemo(() => {
+ let eventsList:EventType[] = [];
+ if (props.showResourceEventsInFreeView && Boolean(props.licenseKey)) {
+ eventsList = props.events.filter((event: { resourceId?: any; }) => Boolean(event.resourceId))
+ }
+ else {
+ if (currentView == "resourceTimelineDay" || currentView == "resourceTimeGridDay") {
+ eventsList = props.events.filter((event: { resourceId?: any; }) => Boolean(event.resourceId))
+ } else {
+ eventsList = props.events.filter((event: { resourceId?: any; }) => !Boolean(event.resourceId));
+ }
+ }
+
+ return eventsList.map(event => ({
+ ...event,
+ start: dayjs(event.start, DateParser).format(),
+ end: dayjs(event.end, DateParser).format(),
+ }));
+ }, [
+ JSON.stringify(props.events),
+ ])
+
+ useEffect(() => {
+ initData.current = false;
+ }, [JSON.stringify(props.events)]);
+
useEffect(() => {
if (initData.current) return;
const mapData: Record = {};
- events?.forEach((item: any, index: number) => {
+ initialEvents?.forEach((item: any, index: number) => {
mapData[`${item.id}`] = index;
})
- if (!initData.current && events?.length && comp?.children?.comp?.children?.initialData) {
+ if (!initData.current && initialEvents?.length && comp?.children?.comp?.children?.initialData) {
setInitDataMap(mapData);
comp?.children?.comp?.children?.initialData?.dispatch?.(
- comp?.children?.comp?.children?.initialData?.changeValueAction?.([...events])
+ comp?.children?.comp?.children?.initialData?.changeValueAction?.([...initialEvents])
+ );
+
+ const eventsList = props.events.map((event: EventType) => ({
+ ...event,
+ start: dayjs(event.start, DateParser).format(),
+ end: dayjs(event.end, DateParser).format(),
+ }));
+
+ comp?.children?.comp?.children?.updatedEventsData?.dispatch?.(
+ comp?.children?.comp?.children?.updatedEventsData?.changeValueAction?.(eventsList)
);
+
initData.current = true;
}
- }, [JSON.stringify(events), comp?.children?.comp?.children?.initialData]);
+ }, [JSON.stringify(initialEvents), comp?.children?.comp?.children?.initialData]);
const resources = useMemo(() => props.resources.value, [props.resources.value]);
@@ -401,35 +432,10 @@ let CalendarBasicComp = (function () {
const findUpdatedInsertedDeletedEvents = useCallback((data: Array) => {
if (!initData.current) return;
- let eventsData: Array> = currentView == "resourceTimelineDay" || currentView == "resourceTimeGridDay"
+ const eventsData: Array = currentView == "resourceTimelineDay" || currentView == "resourceTimeGridDay"
? data.filter((event: { resourceId?: string; }) => Boolean(event.resourceId))
: data.filter((event: { resourceId?: string; }) => !Boolean(event.resourceId));
- eventsData = eventsData.map((item) => ({
- title: item.label,
- id: item.id,
- start: dayjs(item.start, DateParser).format(),
- end: dayjs(item.end, DateParser).format(),
- allDay: item.allDay,
- ...(item.resourceId ? { resourceId: item.resourceId } : {}),
- ...(item.groupId ? { groupId: item.groupId } : {}),
- backgroundColor: item.backgroundColor,
- extendedProps: { // Ensure color is in extendedProps
- color: isValidColor(item.color || "") ? item.color : theme?.theme?.primary,
- detail: item.detail,
- titleColor:item.titleColor,
- detailColor:item.detailColor,
- titleFontWeight:item.titleFontWeight,
- titleFontStyle:item.titleFontStyle,
- detailFontWeight:item.detailFontWeight,
- detailFontStyle:item.detailFontStyle,
- animation:item?.animation,
- animationDelay:item?.animationDelay,
- animationDuration:item?.animationDuration,
- animationIterationCount:item?.animationIterationCount
- }
- }));
-
const mapData: Record = {};
eventsData?.forEach((item: any, index: number) => {
mapData[`${item.id}`] = index;
@@ -446,13 +452,8 @@ let CalendarBasicComp = (function () {
}, [initDataMap, currentView, props.initialData, initData.current]);
const handleEventDataChange = useCallback((data: Array) => {
- comp?.children?.comp.children.events.children.manual.children.manual.dispatch(
- comp?.children?.comp.children.events.children.manual.children.manual.setChildrensAction(
- data
- )
- );
- comp?.children?.comp.children.events.children.mapData.children.data.dispatchChangeValueAction(
- JSON.stringify(data)
+ comp?.children?.comp?.children?.updatedEventsData?.dispatch?.(
+ comp?.children?.comp?.children?.updatedEventsData?.changeValueAction?.(data)
);
findUpdatedInsertedDeletedEvents(data);
@@ -485,42 +486,51 @@ let CalendarBasicComp = (function () {
: "";
return (
-
- {eventInfo?.timeText}
- {eventInfo?.event?.title}
- {eventInfo?.event?.extendedProps?.detail}
- {
- e.stopPropagation();
- const events = props.events.filter(
- (item: EventType) => item.id !== eventInfo.event.id
- );
- handleEventDataChange(events);
- }}
- onMouseDown={(e) => {
- e.stopPropagation();
- e.preventDefault();
- }}
+ $allDay={Boolean(props.showAllDay)}
+ $style={props.style}
+ $backgroundColor={eventInfo.backgroundColor}
+ $extendedProps={eventInfo?.event?.extendedProps}
>
-
-
+ {eventInfo?.timeText}
+ {eventInfo?.event?.title }
+ {!isList && {eventInfo?.event?.extendedProps?.detail}
}
+ {
+ e.stopPropagation();
+ const events = props.updatedEventsData.filter(
+ (item: EventType) => item.id !== eventInfo.event.id
+ );
+ handleEventDataChange(events);
+ }}
+ onMouseDown={(e) => {
+ e.stopPropagation();
+ e.preventDefault();
+ }}
+ >
+
+
+
);
}, [
theme,
props.style,
- props.events,
+ props.updatedEventsData,
props.showAllDay,
handleEventDataChange,
]);
@@ -531,7 +541,14 @@ let CalendarBasicComp = (function () {
const modalTitle = ifEdit
? trans("calendar.editEvent")
: trans("calendar.creatEvent");
- form && form.setFieldsValue(event);
+ if (form) {
+ const eventData = {
+ ...event,
+ start: Boolean(event.start) ? dayjs(event.start, props.inputFormat): null,
+ end: Boolean(event.end) ? dayjs(event.end, props.inputFormat): null,
+ }
+ form.setFieldsValue(eventData)
+ }
const eventId = editEvent.current?.id;
CustomModal.confirm({
@@ -589,13 +606,21 @@ let CalendarBasicComp = (function () {
label={trans("calendar.eventStartTime")}
name="start"
>
-
-
item.id === id
);
if (idExist > -1 && id !== eventId) {
@@ -750,13 +779,16 @@ let CalendarBasicComp = (function () {
throw new Error();
}
if (ifEdit) {
- const changeEvents = props.events.map((item: EventType) => {
+ const changeEvents = props.updatedEventsData.map((item: EventType) => {
if (item.id === eventId) {
return {
...item,
label,
detail,
id,
+ start: dayjs(start, DateParser).format(),
+ end: dayjs(end, DateParser).format(),
+ allDay,
...(groupId !== undefined ? { groupId } : null),
...(resourceId !== undefined ? { resourceId } : null),
...(color !== undefined ? { color } : null),
@@ -779,9 +811,9 @@ let CalendarBasicComp = (function () {
handleEventDataChange(changeEvents);
} else {
const createInfo = {
- allDay: event.allDay,
- start: event.start,
- end: event.end,
+ allDay: allDay,
+ start: dayjs(start, DateParser).format(),
+ end: dayjs(end, DateParser).format(),
id,
label,
detail,
@@ -800,7 +832,7 @@ let CalendarBasicComp = (function () {
...(titleColor !== undefined ? { titleColor } : null),
...(detailColor !== undefined ? { detailColor } : null),
};
- handleEventDataChange([...props.events, createInfo]);
+ handleEventDataChange([...props.updatedEventsData, createInfo]);
}
form.resetFields();
}); //small change
@@ -812,14 +844,14 @@ let CalendarBasicComp = (function () {
}, [
form,
editEvent,
- props.events,
+ props.updatedEventsData,
props?.modalStyle,
props?.animationStyle,
handleEventDataChange,
]);
const handleDbClick = useCallback(() => {
- const event = props.events.find(
+ const event = props.updatedEventsData.find(
(item: EventType) => item.id === editEvent.current?.id
) as EventType;
if (!props.editable || !editEvent.current) {
@@ -837,7 +869,7 @@ let CalendarBasicComp = (function () {
}
}, [
editEvent,
- props.events,
+ props.updatedEventsData,
props.editable,
onEventVal,
showModal,
@@ -868,7 +900,7 @@ let CalendarBasicComp = (function () {
const updateEventsOnDragOrResize = useCallback((eventInfo: EventImpl) => {
const {extendedProps, title, ...event} = eventInfo.toJSON();
- let eventsList = [...props.events];
+ let eventsList = [...props.updatedEventsData];
const eventIdx = eventsList.findIndex(
(item: EventType) => item.id === event.id
);
@@ -880,7 +912,7 @@ let CalendarBasicComp = (function () {
};
handleEventDataChange(eventsList);
}
- }, [props.events, handleEventDataChange]);
+ }, [props.updatedEventsData, handleEventDataChange]);
const handleDrop = useCallback((eventInfo: EventDropArg) => {
updateEventsOnDragOrResize(eventInfo.event);
@@ -944,7 +976,7 @@ let CalendarBasicComp = (function () {
select={(info) => handleCreate(info)}
eventClick={(info) => {
const event = events.find(
- (item: EventType) => item.id === info.event.id
+ (item: EventInput) => item.id === info.event.id
);
editEvent.current = event;
setTimeout(() => {
@@ -975,9 +1007,9 @@ let CalendarBasicComp = (function () {
}}
eventsSet={(info) => {
let needChange = false;
- let changeEvents: EventType[] = [];
+ let changeEvents: EventInput[] = [];
info.forEach((item) => {
- const event = events.find((i: EventType) => i.id === item.id);
+ const event = events.find((i: EventInput) => i.id === item.id);
const start = dayjs(item.start, DateParser).format();
const end = dayjs(item.end, DateParser).format();
if (
@@ -1007,6 +1039,8 @@ let CalendarBasicComp = (function () {
}}
eventDrop={handleDrop}
eventResize={handleResize}
+ eventMouseEnter={({event}) => setHoverEvent(event.id)}
+ eventMouseLeave={({event}) => setHoverEvent(undefined)}
/>
@@ -1031,8 +1065,10 @@ let CalendarBasicComp = (function () {
style: { getPropertyView: () => any; };
animationStyle: { getPropertyView: () => any; };
modalStyle: { getPropertyView: () => any; };
- licenseKey: { getView: () => any; propertyView: (arg0: { label: string; }) => any; };
+ licenseKey: { getView: () => any; propertyView: (arg0: { label: string; tooltip: string }) => any; };
showVerticalScrollbar: { propertyView: (arg0: { label: string; }) => any; };
+ showResourceEventsInFreeView: { propertyView: (arg0: { label: string; }) => any; };
+ inputFormat: { propertyView: (arg0: {}) => any; };
}) => {
const license = children.licenseKey.getView();
@@ -1072,12 +1108,29 @@ let CalendarBasicComp = (function () {
{children.eventMaxStack.propertyView({ label: trans("calendar.eventMaxStack"), tooltip: trans("calendar.eventMaxStackTooltip"), })}
+ {children.inputFormat.propertyView({
+ label: trans("calendar.inputFormat"),
+ placeholder: DATE_TIME_FORMAT,
+ tooltip: (
+ <>
+ {trans("calendar.reference")}
+
+ dayjs format
+
+
+ ),
+ })}
{children.licenseKey.propertyView({ label: trans("calendar.license"), tooltip: trans("calendar.licenseTooltip"), })}
{license == ""
? children.currentFreeView.propertyView({ label: trans("calendar.defaultView"), tooltip: trans("calendar.defaultViewTooltip"), })
: children.currentPremiumView.propertyView({ label: trans("calendar.defaultView"), tooltip: trans("calendar.defaultViewTooltip"), })}
{children.firstDay.propertyView({ label: trans("calendar.startWeek"), })}
{children.showVerticalScrollbar.propertyView({ label: trans("calendar.showVerticalScrollbar")})}
+ {Boolean(license) && children.showResourceEventsInFreeView.propertyView({ label: trans("calendar.showResourceEventsInFreeView")})}
{children.style.getPropertyView()}
@@ -1108,25 +1161,25 @@ const TmpCalendarComp = withExposingConfigs(CalendarBasicComp, [
depsConfig({
name: "allEvents",
desc: trans("calendar.events"),
- depKeys: ["events"],
- func: (input: { events: any[]; }) => {
- return input.events;
+ depKeys: ["updatedEventsData"],
+ func: (input: { updatedEventsData: any[]; }) => {
+ return input.updatedEventsData;
},
}),
depsConfig({
name: "events",
desc: trans("calendar.events"),
- depKeys: ["events"],
- func: (input: { events: any[]; }) => {
- return input.events.filter(event => !Boolean(event.resourceId));
+ depKeys: ["updatedEventsData"],
+ func: (input: { updatedEventsData: any[]; }) => {
+ return input.updatedEventsData.filter(event => !Boolean(event.resourceId));
},
}),
depsConfig({
name: "resourcesEvents",
desc: trans("calendar.resourcesEvents"),
- depKeys: ["events"],
- func: (input: { events: any[]; }) => {
- return input.events.filter(event => Boolean(event.resourceId));
+ depKeys: ["updatedEventsData"],
+ func: (input: { updatedEventsData: any[]; }) => {
+ return input.updatedEventsData.filter(event => Boolean(event.resourceId));
},
}),
depsConfig({
@@ -1166,7 +1219,7 @@ let CalendarComp = withMethodExposing(TmpCalendarComp, [
},
execute: (comp, values) => {
const viewType = values[0] as string || "timeGridWeek"; // Default to "timeGridWeek" if undefined
- const viewKey = comp.children.licenseKey.getView() === "" ? 'defaultFreeView' : 'defaultPremiumView';
+ const viewKey = comp.children.licenseKey.getView() === "" ? 'currentFreeView' : 'currentPremiumView';
comp.children[viewKey].dispatchChangeValueAction(viewType);
}
},*/
@@ -1179,8 +1232,8 @@ let CalendarComp = withMethodExposing(TmpCalendarComp, [
params: [{ name: "viewType", type: "string" }],
},
execute: (comp) => {
- const viewKey = comp.children.licenseKey.getView() === "" ? 'defaultFreeView' : 'defaultPremiumView';
- comp.children["viewKey"].dispatchChangeValueAction("resourceTimeGridDay");
+ const viewKey = comp.children.licenseKey.getView() === "" ? 'currentFreeView' : 'currentPremiumView';
+ comp.children[viewKey].dispatchChangeValueAction("resourceTimeGridDay");
}
},
{
@@ -1190,8 +1243,8 @@ let CalendarComp = withMethodExposing(TmpCalendarComp, [
params: [{ name: "viewType", type: "string" }],
},
execute: (comp) => {
- const viewKey = comp.children.licenseKey.getView() === "" ? 'defaultFreeView' : 'defaultPremiumView';
- comp.children["viewKey"].dispatchChangeValueAction("resourceTimelineDay");
+ const viewKey = comp.children.licenseKey.getView() === "" ? 'currentFreeView' : 'currentPremiumView';
+ comp.children[viewKey].dispatchChangeValueAction("resourceTimelineDay");
}
},
{
@@ -1201,8 +1254,8 @@ let CalendarComp = withMethodExposing(TmpCalendarComp, [
params: [{ name: "viewType", type: "string" }],
},
execute: (comp) => {
- const viewKey = comp.children.licenseKey.getView() === "" ? 'defaultFreeView' : 'defaultPremiumView';
- comp.children["viewKey"].dispatchChangeValueAction("dayGridWeek");
+ const viewKey = comp.children.licenseKey.getView() === "" ? 'currentFreeView' : 'currentPremiumView';
+ comp.children[viewKey].dispatchChangeValueAction("dayGridWeek");
}
},
{
@@ -1212,8 +1265,8 @@ let CalendarComp = withMethodExposing(TmpCalendarComp, [
params: [{ name: "viewType", type: "string" }],
},
execute: (comp) => {
- const viewKey = comp.children.licenseKey.getView() === "" ? 'defaultFreeView' : 'defaultPremiumView';
- comp.children["viewKey"].dispatchChangeValueAction("timeGridWeek");
+ const viewKey = comp.children.licenseKey.getView() === "" ? 'currentFreeView' : 'currentPremiumView';
+ comp.children[viewKey].dispatchChangeValueAction("timeGridWeek");
}
},
{
@@ -1223,8 +1276,8 @@ let CalendarComp = withMethodExposing(TmpCalendarComp, [
params: [{ name: "viewType", type: "string" }],
},
execute: (comp) => {
- const viewKey = comp.children.licenseKey.getView() === "" ? 'defaultFreeView' : 'defaultPremiumView';
- comp.children["viewKey"].dispatchChangeValueAction("timeGridDay");
+ const viewKey = comp.children.licenseKey.getView() === "" ? 'currentFreeView' : 'currentPremiumView';
+ comp.children[viewKey].dispatchChangeValueAction("timeGridDay");
}
},
{
@@ -1234,8 +1287,8 @@ let CalendarComp = withMethodExposing(TmpCalendarComp, [
params: [{ name: "viewType", type: "string" }],
},
execute: (comp) => {
- const viewKey = comp.children.licenseKey.getView() === "" ? 'defaultFreeView' : 'defaultPremiumView';
- comp.children["viewKey"].dispatchChangeValueAction("dayGridDay");
+ const viewKey = comp.children.licenseKey.getView() === "" ? 'currentFreeView' : 'currentPremiumView';
+ comp.children[viewKey].dispatchChangeValueAction("dayGridDay");
}
},
{
@@ -1245,8 +1298,8 @@ let CalendarComp = withMethodExposing(TmpCalendarComp, [
params: [{ name: "viewType", type: "string" }],
},
execute: (comp) => {
- const viewKey = comp.children.licenseKey.getView() === "" ? 'defaultFreeView' : 'defaultPremiumView';
- comp.children["viewKey"].dispatchChangeValueAction("listWeek");
+ const viewKey = comp.children.licenseKey.getView() === "" ? 'currentFreeView' : 'currentPremiumView';
+ comp.children[viewKey].dispatchChangeValueAction("listWeek");
}
},
{
@@ -1256,8 +1309,8 @@ let CalendarComp = withMethodExposing(TmpCalendarComp, [
params: [{ name: "viewType", type: "string" }],
},
execute: (comp) => {
- const viewKey = comp.children.licenseKey.getView() === "" ? 'defaultFreeView' : 'defaultPremiumView';
- comp.children["viewKey"].dispatchChangeValueAction("dayGridMonth");
+ const viewKey = comp.children.licenseKey.getView() === "" ? 'currentFreeView' : 'currentPremiumView';
+ comp.children[viewKey].dispatchChangeValueAction("dayGridMonth");
}
},
{
@@ -1267,8 +1320,8 @@ let CalendarComp = withMethodExposing(TmpCalendarComp, [
params: [{ name: "viewType", type: "string" }],
},
execute: (comp) => {
- const viewKey = comp.children.licenseKey.getView() === "" ? 'defaultFreeView' : 'defaultPremiumView';
- comp.children["viewKey"].dispatchChangeValueAction("multiMonthYear");
+ const viewKey = comp.children.licenseKey.getView() === "" ? 'currentFreeView' : 'currentPremiumView';
+ comp.children[viewKey].dispatchChangeValueAction("multiMonthYear");
}
},
{
diff --git a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx
index e8602a8fe0..306f90a79d 100644
--- a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx
+++ b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx
@@ -15,7 +15,10 @@ import {
lightenColor,
toHex,
UnderlineCss,
- EventModalStyleType
+ EventModalStyleType,
+ DateParser,
+ isValidColor,
+ Theme,
} from "lowcoder-sdk";
import styled from "styled-components";
import dayjs from "dayjs";
@@ -27,6 +30,10 @@ import {
} from "@fullcalendar/core";
import { default as Form } from "antd/es/form";
+type Theme = typeof Theme;
+type EventModalStyleType = typeof EventModalStyleType;
+type CalendarStyleType = typeof CalendarStyleType;
+
export const Wrapper = styled.div<{
$editable?: boolean;
$style?: CalendarStyleType;
@@ -69,8 +76,20 @@ export const Wrapper = styled.div<{
.fc-list {
.fc-list-table {
table-layout: fixed;
+ thead {
+ position: relative;
+ left: unset;
+ visibility: hidden;
+ }
th {
background-color: ${(props) => props.$style.background};
+
+ &:first-child {
+ width: 150px;
+ }
+ &:nth-child(2) {
+ width: 300px;
+ }
}
}
.fc-list-event-graphic {
@@ -116,7 +135,6 @@ export const Wrapper = styled.div<{
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);
border-width: 1px;
margin: 2px 5px;
- height: 20px;
.event-title {
margin-left: 15px;
}
@@ -128,8 +146,6 @@ export const Wrapper = styled.div<{
.fc-event {
font-size: 13px;
line-height: 20px;
- display: flex;
- align-items: center;
&.no-time {
padding-left: 19px;
}
@@ -142,21 +158,15 @@ export const Wrapper = styled.div<{
box-sizing: content-box;
}
.fc-list-event-title {
- min-width: 266px;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
padding: 0 14px 0 0;
cursor: pointer;
.event {
font-size: 13px;
- height: 18px;
line-height: 18px;
margin: 3px 5px;
border-width: 0;
align-items: center;
&::before {
- height: 14px;
top: 2px;
left: 3px;
}
@@ -165,9 +175,6 @@ export const Wrapper = styled.div<{
}
.event-title {
margin-left: 16px;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
}
.event-remove {
background-color: inherit;
@@ -1135,3 +1142,32 @@ export const viewClassNames = (info: ViewContentArg) => {
return className;
};
+export const formattedEvents = (events: EventType[], theme?: Theme) => {
+ return events.map((item: EventType) => {
+ return {
+ title: item.label,
+ label: item.label,
+ id: item.id,
+ start: dayjs(item.start, DateParser).format(),
+ end: dayjs(item.end, DateParser).format(),
+ allDay: item.allDay,
+ ...(item.resourceId ? { resourceId: item.resourceId } : {}),
+ ...(item.groupId ? { groupId: item.groupId } : {}),
+ backgroundColor: item.backgroundColor,
+ extendedProps: { // Ensure color is in extendedProps
+ color: isValidColor(item.color || "") ? item.color : theme?.theme?.primary,
+ detail: item.detail,
+ titleColor: item.titleColor,
+ detailColor: item.detailColor,
+ titleFontWeight: item.titleFontWeight,
+ titleFontStyle: item.titleFontStyle,
+ detailFontWeight: item.detailFontWeight,
+ detailFontStyle: item.detailFontStyle,
+ animation: item?.animation,
+ animationDelay: item?.animationDelay,
+ animationDuration: item?.animationDuration,
+ animationIterationCount: item?.animationIterationCount
+ }
+ }
+ })
+}
diff --git a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartComp.tsx b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartComp.tsx
index ff33cc260e..8692ef8cfc 100644
--- a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartComp.tsx
+++ b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartComp.tsx
@@ -10,7 +10,7 @@ import { candleStickChartChildrenMap, ChartSize, getDataKeys } from "./candleSti
import { candleStickChartPropertyView } from "./candleStickChartPropertyView";
import _ from "lodash";
import { useContext, useEffect, useMemo, useRef, useState } from "react";
-import ReactResizeDetector from "react-resize-detector";
+import { useResizeDetector } from "react-resize-detector";
import ReactECharts from "../chartComp/reactEcharts";
import {
childrenToProps,
@@ -56,6 +56,7 @@ CandleStickChartTmpComp = withViewFn(CandleStickChartTmpComp, (comp) => {
const onUIEvent = comp.children.onUIEvent.getView();
const onEvent = comp.children.onEvent.getView();
const echartsCompRef = useRef();
+ const containerRef = useRef(null);
const [chartSize, setChartSize] = useState();
const firstResize = useRef(true);
const theme = useContext(ThemeContext);
@@ -140,33 +141,37 @@ CandleStickChartTmpComp = withViewFn(CandleStickChartTmpComp, (comp) => {
}, [onUIEvent]);
const echartsConfigChildren = _.omit(comp.children, echartsConfigOmitChildren);
+ const childrenProps = childrenToProps(echartsConfigChildren);
const option = useMemo(() => {
return getEchartsConfig(
- childrenToProps(echartsConfigChildren) as ToViewReturn,
+ childrenProps as ToViewReturn,
chartSize,
- theme?.theme?.components?.candleStickChart || {},
+ themeConfig
);
- }, [chartSize, ...Object.values(echartsConfigChildren)]);
+ }, [theme, childrenProps, chartSize, ...Object.values(echartsConfigChildren)]);
useEffect(() => {
comp.children.mapInstance.dispatch(changeValueAction(null, false))
if(comp.children.mapInstance.value) return;
}, [option])
+ useResizeDetector({
+ targetRef: containerRef,
+ onResize: ({width, height}) => {
+ if (width && height) {
+ setChartSize({ w: width, h: height });
+ }
+ if (!firstResize.current) {
+ // ignore the first resize, which will impact the loading animation
+ echartsCompRef.current?.getEchartsInstance().resize();
+ } else {
+ firstResize.current = false;
+ }
+ }
+ })
+
return (
- {
- if (w && h) {
- setChartSize({ w: w, h: h });
- }
- if (!firstResize.current) {
- // ignore the first resize, which will impact the loading animation
- echartsCompRef.current?.getEchartsInstance().resize();
- } else {
- firstResize.current = false;
- }
- }}
- >
+
(echartsCompRef.current = e)}
style={{ height: "100%" }}
@@ -177,7 +182,7 @@ CandleStickChartTmpComp = withViewFn(CandleStickChartTmpComp, (comp) => {
theme={mode !== 'map' ? themeConfig : undefined}
mode={mode}
/>
-
+
);
});
diff --git a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx
index 35852214df..fcb7ac9ea2 100644
--- a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx
+++ b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx
@@ -16,14 +16,17 @@ import {
uiChildren,
clickEvent,
styleControl,
- EchartsStyle
+ EchartCandleStickChartStyle,
+ EchartDefaultTextStyle,
+ toArray
} from "lowcoder-sdk";
import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core";
import { BarChartConfig } from "../chartComp/chartConfigs/barChartConfig";
import { XAxisConfig, YAxisConfig } from "../chartComp/chartConfigs/cartesianAxisConfig";
import { LegendConfig } from "../chartComp/chartConfigs/legendConfig";
-import { EchartsLegendConfig } from "../chartComp/chartConfigs/echartsLegendConfig";
+import { EchartsTitleVerticalConfig } from "../chartComp/chartConfigs/echartsTitleVerticalConfig";
import { EchartsLabelConfig } from "../chartComp/chartConfigs/echartsLabelConfig";
+import { EchartsTitleConfig } from "comps/chartComp/chartConfigs/echartsTitleConfig";
import { LineChartConfig } from "../chartComp/chartConfigs/lineChartConfig";
import { PieChartConfig } from "../chartComp/chartConfigs/pieChartConfig";
import { ScatterChartConfig } from "../chartComp/chartConfigs/scatterChartConfig";
@@ -248,19 +251,31 @@ export const chartUiModeChildren = {
};
let chartJsonModeChildren: any = {
+ echartsData: jsonControl(toArray, i18nObjs.defaultCandleStickChartOption.data),
echartsOption: jsonControl(toObject, i18nObjs.defaultCandleStickChartOption),
echartsTitle: withDefault(StringControl, trans("candleStickChart.defaultTitle")),
- echartsLegendConfig: EchartsLegendConfig,
+ echartsTitleData: jsonControl(toArray, i18nObjs.defaultCandleStickChartOption.xAxis.data),
+ echartsTitleVerticalConfig: EchartsTitleVerticalConfig,
echartsLabelConfig: EchartsLabelConfig,
+ echartsTitleConfig:EchartsTitleConfig,
echartsConfig: EchartsOptionComp,
- // style: styleControl(EchartsStyle, 'style'),
+ left:withDefault(NumberControl,trans('candleStickChart.defaultLeft')),
+ right:withDefault(NumberControl,trans('candleStickChart.defaultRight')),
+ top:withDefault(NumberControl,trans('candleStickChart.defaultTop')),
+ bottom:withDefault(NumberControl,trans('candleStickChart.defaultBottom')),
+ dataZoomBottom:withDefault(NumberControl,trans('candleStickChart.defaultDataZoomBottom')),
+ dataZoomHeight:withDefault(NumberControl,trans('candleStickChart.defaultDataZoomHeight')),
tooltip: withDefault(BoolControl, true),
- legendVisibility: withDefault(BoolControl, true),
+ dataZoomVisibility: withDefault(BoolControl, true),
+ axisFlagVisibility: withDefault(BoolControl, true),
}
-if (EchartsStyle) {
+if (EchartCandleStickChartStyle && EchartDefaultTextStyle) {
chartJsonModeChildren = {
...chartJsonModeChildren,
- style: styleControl(EchartsStyle, 'style'),
+ chartStyle: styleControl(EchartCandleStickChartStyle, 'chartStyle'),
+ titleStyle: styleControl(EchartDefaultTextStyle, 'titleStyle'),
+ xAxisStyle: styleControl(EchartDefaultTextStyle, 'xAxisStyle'),
+ yAxisStyle: styleControl(EchartDefaultTextStyle, 'yAxisStyle'),
}
}
diff --git a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartPropertyView.tsx
index b3c545d4a8..058a35d8d4 100644
--- a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartPropertyView.tsx
+++ b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartPropertyView.tsx
@@ -16,6 +16,39 @@ export function candleStickChartPropertyView(
const jsonModePropertyView = (
<>
+ {children.echartsData.propertyView({ label: trans("chart.data") })}
+ {children.echartsTitleConfig.getPropertyView()}
+ {children.echartsTitleData.propertyView({ label: trans("chart.xAxisLabels"), tooltip: trans("chart.xAxisLabelsTooltip") })}
+ {children.echartsTitleVerticalConfig.getPropertyView()}
+ {children.echartsTitle.propertyView({ label: trans("candleStickChart.title"), tooltip: trans("echarts.titleTooltip") })}
+ {children.left.propertyView({ label: trans("candleStickChart.left"), tooltip: trans("echarts.leftTooltip") })}
+ {children.right.propertyView({ label: trans("candleStickChart.right"), tooltip: trans("echarts.rightTooltip") })}
+ {children.top.propertyView({ label: trans("candleStickChart.top"), tooltip: trans("echarts.topTooltip") })}
+ {children.bottom.propertyView({ label: trans("candleStickChart.bottom"), tooltip: trans("echarts.bottomTooltip") })}
+ {children.dataZoomVisibility.getView() && children.dataZoomHeight.propertyView({ label: trans("candleStickChart.dataZoomHeight"), tooltip: trans("candleStickChart.dataZoomHeightTooltip") })}
+ {children.dataZoomVisibility.getView() && children.dataZoomBottom.propertyView({ label: trans("candleStickChart.dataZoomBottom"), tooltip: trans("candleStickChart.dataZoomBottomTooltip") })}
+ {children.axisFlagVisibility.propertyView({label: trans("candleStickChart.axisFlagVisibility"), tooltip: trans("candleStickChart.axisFlagVisibilityTooltip") })}
+ {children.dataZoomVisibility.propertyView({label: trans("candleStickChart.dataZoomVisibility"), tooltip: trans("candleStickChart.dataZoomVisibilityTooltip") })}
+
+
+ {children.onEvent.propertyView()}
+
+ {hiddenPropertyView(children)}
+
+
+
+ {children.chartStyle?.getPropertyView()}
+
+
+ {children.titleStyle?.getPropertyView()}
+
+
+ {children.xAxisStyle?.getPropertyView()}
+
+
+ {children.yAxisStyle?.getPropertyView()}
+
+
{children.echartsOption.propertyView({
label: trans("chart.echartsOptionLabel"),
styleName: "higher",
@@ -31,16 +64,7 @@ export function candleStickChartPropertyView(
),
})}
- {children.echartsTitle.propertyView({ label: trans("candleStickChart.title") })}
- {children.tooltip.propertyView({label: trans("candleStickChart.tooltip")})}
-
-
- {children.onEvent.propertyView()}
-
-
- {children.style?.getPropertyView()}
- {hiddenPropertyView(children)}
);
diff --git a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts
index b4b5d6f71c..ef079c6a2c 100644
--- a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts
+++ b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts
@@ -14,6 +14,7 @@ import Big from "big.js";
import { googleMapsApiUrl } from "../chartComp/chartConfigs/chartUrls";
import { useContext } from "react";
import parseBackground from "../../util/gradientBackgroundColor";
+import {styleWrapper} from "../../util/styleWrapper";
export function transformData(
originData: JSONObject[],
@@ -135,54 +136,107 @@ export function getEchartsConfig(
chartSize?: ChartSize,
theme?: any,
): EChartsOptionWithMap {
+
+
if (props.mode === "json") {
- let opt={
- "title": {
- "text": props.echartsTitle,
- 'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom',
- "left":"center"
+ let opt= {
+ title: {
+ text: props.echartsTitle,
+ top: props.echartsTitleVerticalConfig.top,
+ left:props.echartsTitleConfig.top,
+ textStyle: {
+ ...styleWrapper(props?.titleStyle, theme?.titleStyle)
+ }
},
- "backgroundColor": parseBackground( props?.style?.background || theme?.style?.background || "#FFFFFF"),
- "color": props.echartsOption.data?.map(data => data.color),
- "tooltip": props.tooltip&&{
- "trigger": "axis",
- "axisPointer": {
- "type": "cross"
+ backgroundColor: parseBackground( props?.chartStyle?.background || theme?.chartStyle?.backgroundColor || "#FFFFFF"),
+ color: props?.echartsData.data?.map(data => data.color) || props?.echartsOption.data?.map(data => data.color),
+ tooltip: props?.tooltip && {
+ trigger: "axis",
+ axisPointer: {
+ type: "cross"
}
},
- "grid": {
- "left": "10%",
- "right": "10%",
- "bottom": "10%",
+ grid: {
+ left: `${props?.left}%`,
+ right: `${props?.right}%`,
+ bottom: `${props?.bottom}%`,
+ top: `${props?.top}%`,
},
- "xAxis": {
- "type": "category",
- "data": props.echartsOption.xAxis.data
+ dataZoom: [
+ {
+ show: props?.dataZoomVisibility,
+ type: 'slider',
+ start: 0,
+ end: 100,
+ bottom: props?.dataZoomBottom,
+ height: props?.dataZoomHeight
+ }
+ ],
+ yAxis: {
+ type: "value",
+ scale: true,
+ splitArea: props?.axisFlagVisibility && {
+ show: true,
+ areaStyle: {
+ color: props?.echartsData?.axisColor || props?.echartsOption?.axisColor
+ }
+ },
+ axisLabel: {
+ ...styleWrapper(props?.yAxisStyle, theme?.yAxisStyle, 13),
+ }
},
- "yAxis": {
- "type": "value",
- "scale": true
+ xAxis: props?.echartsOption && {
+ type: 'category',
+ data: props?.echartsTitleData.length && props?.echartsTitleData || props?.echartsData.xAxis && props?.echartsData.xAxis.data || props?.echartsOption.xAxis && props?.echartsOption.xAxis.data,
+ splitArea: !props?.axisFlagVisibility && {
+ show: true,
+ areaStyle: {
+ // Provide multiple colors to alternate through
+ color: props?.echartsData?.axisColor || props?.echartsOption?.axisColor
+ },
+ },
+ axisLabel: {
+ ...styleWrapper(props?.xAxisStyle, theme?.xAxisStyle, 13),
+ },
+ boundaryGap: true,
+ // Turn off x-axis split lines if desired, so you only see colored areas
+ splitLine: {
+ show: false
+ },
+ // Show split areas, each day with a different background color
},
- "series": [
+ series: props?.echartsOption && [
{
- "name": props.echartsConfig.type,
- "type": props.echartsConfig.type,
- "left": "10%",
- "top": 60,
- "bottom": 60,
- "width": "80%",
- "min": 0,
- "max": 100,
- "gap": 2,
- "label": {
- "show": true,
- "position": props.echartsLabelConfig.top
+ name: props?.echartsConfig.type,
+ type: props?.echartsConfig.type,
+ label: {
+ show: true,
+ position: props?.echartsLabelConfig.top
},
- "data": props.echartsOption.data,
- }
- ]
+ data: props?.echartsData.length !== 0 && props?.echartsData || props?.echartsOption.data,
+ itemStyle: props?.echartsData.itemStyle ? {
+ ...props?.echartsData.itemStyle,
+ borderWidth: props?.chartStyle?.chartBorderWidth || theme?.chartStyle?.borderWidth,
+ borderType: props?.chartStyle?.chartBorderStyle || theme?.chartStyle?.borderType,
+ borderRadius: Number(props?.chartStyle?.chartBorderRadius || theme?.chartStyle?.borderRadius),
+ shadowColor: props?.chartStyle?.chartShadowColor || theme?.chartStyle?.shadowColor,
+ shadowBlur: props?.chartStyle?.chartBoxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow?.split('px')[0],
+ shadowOffsetX: props?.chartStyle?.chartBoxShadow?.split('px')[1] || theme?.chartStyle?.boxShadow?.split('px')[1],
+ shadowOffsetY: props?.chartStyle?.chartBoxShadow?.split('px')[2] || theme?.chartStyle?.boxShadow?.split('px')[2]
+ } : {
+ ...props?.echartsOption.itemStyle,
+ borderWidth: props?.chartStyle?.chartBorderWidth || theme?.chartStyle?.borderWidth,
+ borderType: props?.chartStyle?.chartBorderStyle || theme?.chartStyle?.borderType,
+ borderRadius: Number(props?.chartStyle?.chartBorderRadius || theme?.chartStyle?.borderRadius),
+ shadowColor: props?.chartStyle?.chartShadowColor || theme?.chartStyle?.shadowColor,
+ shadowBlur: props?.chartStyle?.chartBoxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow?.split('px')[0],
+ shadowOffsetX: props?.chartStyle?.chartBoxShadow?.split('px')[1] || theme?.chartStyle?.boxShadow?.split('px')[1],
+ shadowOffsetY: props?.chartStyle?.chartBoxShadow?.split('px')[2] || theme?.chartStyle?.boxShadow?.split('px')[2]
+ }
+ },
+ ],
}
- return props.echartsOption ? opt : {};
+ return props.echartsData || props.echartsOption ? opt : {};
}
diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartComp.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartComp.tsx
index f93ae0f505..74ebfca4d3 100644
--- a/client/packages/lowcoder-comps/src/comps/chartComp/chartComp.tsx
+++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartComp.tsx
@@ -10,7 +10,7 @@ import { chartChildrenMap, ChartSize, getDataKeys } from "./chartConstants";
import { chartPropertyView } from "./chartPropertyView";
import _ from "lodash";
import { useContext, useEffect, useMemo, useRef, useState } from "react";
-import ReactResizeDetector from "react-resize-detector";
+import { useResizeDetector } from "react-resize-detector";
import ReactECharts from "./reactEcharts";
import {
childrenToProps,
@@ -61,6 +61,7 @@ ChartTmpComp = withViewFn(ChartTmpComp, (comp) => {
const onEvent = comp.children.onEvent.getView();
const echartsCompRef = useRef();
+ const containerRef = useRef(null);
const [chartSize, setChartSize] = useState();
const [mapScriptLoaded, setMapScriptLoaded] = useState(false);
const firstResize = useRef(true);
@@ -156,12 +157,14 @@ ChartTmpComp = withViewFn(ChartTmpComp, (comp) => {
}, [mode, onUIEvent]);
const echartsConfigChildren = _.omit(comp.children, echartsConfigOmitChildren);
+ const childrenProps = childrenToProps(echartsConfigChildren);
const option = useMemo(() => {
return getEchartsConfig(
- childrenToProps(echartsConfigChildren) as ToViewReturn,
- chartSize
+ childrenProps as ToViewReturn,
+ chartSize,
+ themeConfig
);
- }, [chartSize, ...Object.values(echartsConfigChildren)]);
+ }, [theme, childrenProps, chartSize, ...Object.values(echartsConfigChildren)]);
const isMapScriptLoaded = useMemo(() => {
return mapScriptLoaded || window?.google;
@@ -213,20 +216,23 @@ ChartTmpComp = withViewFn(ChartTmpComp, (comp) => {
onMapEvent('zoomLevelChange');
}, [mode, mapZoomlevel])
+ useResizeDetector({
+ targetRef: containerRef,
+ onResize: ({width, height}) => {
+ if (width && height) {
+ setChartSize({ w: width, h: height });
+ }
+ if (!firstResize.current) {
+ // ignore the first resize, which will impact the loading animation
+ echartsCompRef.current?.getEchartsInstance().resize();
+ } else {
+ firstResize.current = false;
+ }
+ }
+ })
+
return (
- {
- if (w && h) {
- setChartSize({ w: w, h: h });
- }
- if (!firstResize.current) {
- // ignore the first resize, which will impact the loading animation
- echartsCompRef.current?.getEchartsInstance().resize();
- } else {
- firstResize.current = false;
- }
- }}
- >
+
{(mode !== 'map' || (mode === 'map' && isMapScriptLoaded)) && (
(echartsCompRef.current = e)}
@@ -239,7 +245,7 @@ ChartTmpComp = withViewFn(ChartTmpComp, (comp) => {
mode={mode}
/>
)}
-
+
);
});
diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/barChartConfig.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/barChartConfig.tsx
index 6c91fe252a..707b161706 100644
--- a/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/barChartConfig.tsx
+++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/barChartConfig.tsx
@@ -5,7 +5,7 @@ import {
showLabelPropertyView,
} from "lowcoder-sdk";
import { BarSeriesOption } from "echarts";
-import { trans } from "i18n/comps";
+import { i18nObjs, trans } from "i18n/comps";
const BarTypeOptions = [
{
diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendConfig.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendConfig.tsx
index 21dea46f3b..852de74c3c 100644
--- a/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendConfig.tsx
+++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendConfig.tsx
@@ -1,6 +1,7 @@
import {
AlignBottom,
AlignTop,
+ AlignClose,
dropdownControl,
MultiCompBuilder,
} from "lowcoder-sdk";
@@ -12,6 +13,10 @@ const LegendPositionOptions = [
label:
- {children.data.propertyView({
- label: trans("chart.data"),
- })}
+ {children.echartsData.propertyView({ label: trans("chart.data") })}
- {children.title.propertyView({ label: trans("chart.title") })}
+ {children.echartsTitleConfig.getPropertyView()}
+ {children.echartsTitleVerticalConfig.getPropertyView()}
+ {children.legendConfig.getPropertyView()}
+ {children.echartsTitle.propertyView({ label: trans("chart.title") })}
+ {children.left.propertyView({ label: trans("chart.left"), tooltip: trans("echarts.leftTooltip") })}
+ {children.right.propertyView({ label: trans("chart.right"), tooltip: trans("echarts.rightTooltip") })}
+ {children.top.propertyView({ label: trans("chart.top"), tooltip: trans("echarts.topTooltip") })}
+ {children.bottom.propertyView({ label: trans("chart.bottom"), tooltip: trans("echarts.bottomTooltip") })}
{children.chartConfig.children.compType.getView() !== "pie" && (
<>
{children.xAxisDirection.propertyView({
@@ -125,10 +130,30 @@ export function chartPropertyView(
{children.yConfig.getPropertyView()}
)}
- {children.legendConfig.getPropertyView()}
{hiddenPropertyView(children)}
+ {children.tooltip.propertyView({label: trans("echarts.tooltip"), tooltip: trans("echarts.tooltipTooltip")})}
+
+
+
+ {children.chartStyle?.getPropertyView()}
+
+
+ {children.titleStyle?.getPropertyView()}
+
+
+ {children.xAxisStyle?.getPropertyView()}
+
+
+ {children.yAxisStyle?.getPropertyView()}
+
+
+ {children.legendStyle?.getPropertyView()}
+
+
+ {children.data.propertyView({
+ label: trans("chart.data"),
+ })}
- {children.chartConfig.getPropertyView()}
);
diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartUtils.ts b/client/packages/lowcoder-comps/src/comps/chartComp/chartUtils.ts
index d71dd7f561..292f5047ca 100644
--- a/client/packages/lowcoder-comps/src/comps/chartComp/chartUtils.ts
+++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartUtils.ts
@@ -12,6 +12,8 @@ import { chartColorPalette, isNumeric, JSONObject, loadScript } from "lowcoder-s
import { calcXYConfig } from "comps/chartComp/chartConfigs/cartesianAxisConfig";
import Big from "big.js";
import { googleMapsApiUrl } from "./chartConfigs/chartUrls";
+import {chartStyleWrapper, styleWrapper} from "../../util/styleWrapper";
+import parseBackground from "../../util/gradientBackgroundColor";
export function transformData(
originData: JSONObject[],
@@ -134,7 +136,7 @@ export function getEchartsConfig(
theme?: any,
): EChartsOptionWithMap {
if (props.mode === "json") {
- return props.echartsOption ? props.echartsOption : {};
+ return props.echartsOption || props.echartsOption ? props.echartsOption : {};
}
if(props.mode === "map") {
const {
@@ -160,18 +162,38 @@ export function getEchartsConfig(
// axisChart
const axisChart = isAxisChart(props.chartConfig.type);
const gridPos = {
- left: 20,
- right: props.legendConfig.left === "right" ? "10%" : 20,
- top: 50,
- bottom: 35,
+ left: `${props?.left}%`,
+ right: `${props?.right}%`,
+ bottom: `${props?.bottom}%`,
+ top: `${props?.top}%`,
};
- let config: EChartsOptionWithMap = {
- title: { text: props.title, left: "center" },
- tooltip: {
- confine: true,
- trigger: axisChart ? "axis" : "item",
+ let config: any = {
+ title: {
+ text: props.echartsTitle,
+ top: props.echartsTitleVerticalConfig.top,
+ left:props.echartsTitleConfig.top,
+ textStyle: {
+ ...styleWrapper(props?.titleStyle, theme?.titleStyle)
+ }
+ },
+ backgroundColor: parseBackground( props?.chartStyle?.background || theme?.chartStyle?.backgroundColor || "#FFFFFF"),
+ legend: {
+ ...props.legendConfig,
+ textStyle: {
+ ...styleWrapper(props?.legendStyle, theme?.legendStyle, 15)
+ },
+ },
+ tooltip: props.tooltip&&{
+ trigger: "axis",
+ axisPointer: {
+ type: "line",
+ lineStyle: {
+ color: "rgba(0,0,0,0.2)",
+ width: 2,
+ type: "solid"
+ }
+ }
},
- legend: props.legendConfig,
grid: {
...gridPos,
containLabel: true,
@@ -190,9 +212,7 @@ export function getEchartsConfig(
.map((s) => s.getView().columnName);
// y-axis is category and time, data doesn't need to aggregate
const transformedData =
- yAxisConfig.type === "category" || yAxisConfig.type === "time"
- ? props.data
- : transformData(props.data, props.xAxisKey, seriesColumnNames);
+ yAxisConfig.type === "category" || yAxisConfig.type === "time" ? props.echartsData.length && props.echartsData || props.data : transformData(props.echartsData.length && props.echartsData || props.data, props.xAxisKey, seriesColumnNames);
config = {
...config,
dataset: [
@@ -201,7 +221,16 @@ export function getEchartsConfig(
sourceHeader: false,
},
],
- series: getSeriesConfig(props),
+ series: getSeriesConfig(props).map(series => ({
+ ...series,
+ itemStyle: {
+ ...series.itemStyle,
+ ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle)
+ },
+ lineStyle: {
+ ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle)
+ }
+ })),
};
if (axisChart) {
// pure chart's size except the margin around
@@ -229,9 +258,19 @@ export function getEchartsConfig(
config = {
...config,
// @ts-ignore
- xAxis: finalXyConfig.xConfig,
+ xAxis: {
+ ...finalXyConfig.xConfig,
+ axisLabel: {
+ ...styleWrapper(props?.xAxisStyle, theme?.xAxisStyle, 11)
+ }
+ },
// @ts-ignore
- yAxis: finalXyConfig.yConfig,
+ yAxis: {
+ ...finalXyConfig.yConfig,
+ axisLabel: {
+ ...styleWrapper(props?.yAxisStyle, theme?.yAxisStyle, 11)
+ }
+ },
};
}
// log.log("Echarts transformedData and config", transformedData, config);
diff --git a/client/packages/lowcoder-comps/src/comps/chartsGeoMapComp/chartsGeoMapComp.tsx b/client/packages/lowcoder-comps/src/comps/chartsGeoMapComp/chartsGeoMapComp.tsx
index 96bd52f0b3..60bf25cb7d 100644
--- a/client/packages/lowcoder-comps/src/comps/chartsGeoMapComp/chartsGeoMapComp.tsx
+++ b/client/packages/lowcoder-comps/src/comps/chartsGeoMapComp/chartsGeoMapComp.tsx
@@ -10,7 +10,7 @@ import { chartChildrenMap, ChartSize, getDataKeys } from "../basicChartComp/char
import { chartPropertyView } from "../basicChartComp/chartPropertyView";
import _ from "lodash";
import { useContext, useEffect, useMemo, useRef, useState } from "react";
-import ReactResizeDetector from "react-resize-detector";
+import { useResizeDetector } from "react-resize-detector";
import ReactECharts from "../basicChartComp/reactEcharts";
import {
childrenToProps,
@@ -66,6 +66,7 @@ MapTmpComp = withViewFn(MapTmpComp, (comp) => {
const onEvent = comp.children.onEvent.getView();
const echartsCompRef = useRef();
+ const containerRef = useRef(null);
const [chartSize, setChartSize] = useState();
const [mapScriptLoaded, setMapScriptLoaded] = useState(false);
const firstResize = useRef(true);
@@ -116,13 +117,14 @@ MapTmpComp = withViewFn(MapTmpComp, (comp) => {
}, [mapScriptLoaded]);
const echartsConfigChildren = _.omit(comp.children, echartsConfigOmitChildren);
+ const childrenProps = childrenToProps(echartsConfigChildren);
const option = useMemo(() => {
return getEchartsConfig(
- childrenToProps(echartsConfigChildren) as ToViewReturn,
+ childrenProps as ToViewReturn,
chartSize,
theme?.theme?.components?.candleStickChart || {},
);
- }, [chartSize, ...Object.values(echartsConfigChildren)]);
+ }, [theme, childrenProps, chartSize, ...Object.values(echartsConfigChildren)]);
const isMapScriptLoaded = useMemo(() => {
return mapScriptLoaded || window?.google;
@@ -167,33 +169,36 @@ MapTmpComp = withViewFn(MapTmpComp, (comp) => {
onMapEvent('zoomLevelChange');
}, [mapZoomlevel])
+ useResizeDetector({
+ targetRef: containerRef,
+ onResize: ({width, height}) => {
+ if (width && height) {
+ setChartSize({ w: width, h: height });
+ }
+ if (!firstResize.current) {
+ // ignore the first resize, which will impact the loading animation
+ echartsCompRef.current?.getEchartsInstance().resize();
+ } else {
+ firstResize.current = false;
+ }
+ }
+ })
+
return (
- {
- if (w && h) {
- setChartSize({ w: w, h: h });
- }
- if (!firstResize.current) {
- // ignore the first resize, which will impact the loading animation
- echartsCompRef.current?.getEchartsInstance().resize();
- } else {
- firstResize.current = false;
- }
- }}
- >
+
{isMapScriptLoaded && (
(echartsCompRef.current = e)}
- style={{ height: "100%" }}
- notMerge
- lazyUpdate
- opts={{ locale: getEchartsLocale() }}
- option={option}
- theme={undefined}
- mode={mode}
- />
+ ref={(e) => (echartsCompRef.current = e)}
+ style={{ height: "100%" }}
+ notMerge
+ lazyUpdate
+ opts={{ locale: getEchartsLocale() }}
+ option={option}
+ theme={undefined}
+ mode={mode}
+ />
)}
-
+
);
});
diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartComp.tsx b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartComp.tsx
index 339f4e717b..63ccfdc149 100644
--- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartComp.tsx
+++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartComp.tsx
@@ -10,7 +10,7 @@ import { funnelChartChildrenMap, ChartSize, getDataKeys } from "./funnelChartCon
import { funnelChartPropertyView } from "./funnelChartPropertyView";
import _ from "lodash";
import { useContext, useEffect, useMemo, useRef, useState } from "react";
-import ReactResizeDetector from "react-resize-detector";
+import { useResizeDetector } from "react-resize-detector";
import ReactECharts from "../chartComp/reactEcharts";
import {
childrenToProps,
@@ -56,6 +56,7 @@ FunnelChartTmpComp = withViewFn(FunnelChartTmpComp, (comp) => {
const onUIEvent = comp.children.onUIEvent.getView();
const onEvent = comp.children.onEvent.getView();
const echartsCompRef = useRef();
+ const containerRef = useRef(null);
const [chartSize, setChartSize] = useState();
const firstResize = useRef(true);
const theme = useContext(ThemeContext);
@@ -141,43 +142,47 @@ FunnelChartTmpComp = withViewFn(FunnelChartTmpComp, (comp) => {
}, [onUIEvent]);
let echartsConfigChildren = _.omit(comp.children, echartsConfigOmitChildren);
+ const childrenProps = childrenToProps(echartsConfigChildren);
const option = useMemo(() => {
return getEchartsConfig(
- childrenToProps(echartsConfigChildren) as ToViewReturn,
+ childrenProps as ToViewReturn,
chartSize,
themeConfig,
);
- }, [chartSize, ...Object.values(echartsConfigChildren), theme]);
+ }, [theme, childrenProps, chartSize, ...Object.values(echartsConfigChildren)]);
useEffect(() => {
comp.children.mapInstance.dispatch(changeValueAction(null, false))
if(comp.children.mapInstance.value) return;
}, [option])
+ useResizeDetector({
+ targetRef: containerRef,
+ onResize: ({width, height}) => {
+ if (width && height) {
+ setChartSize({ w: width, h: height });
+ }
+ if (!firstResize.current) {
+ // ignore the first resize, which will impact the loading animation
+ echartsCompRef.current?.getEchartsInstance().resize();
+ } else {
+ firstResize.current = false;
+ }
+ }
+ })
+
return (
- {
- if (w && h) {
- setChartSize({ w: w, h: h });
- }
- if (!firstResize.current) {
- // ignore the first resize, which will impact the loading animation
- echartsCompRef.current?.getEchartsInstance().resize();
- } else {
- firstResize.current = false;
- }
- }}
- >
+
(echartsCompRef.current = e)}
- style={{ height: "100%" }}
- notMerge
- lazyUpdate
- opts={{ locale: getEchartsLocale() }}
- option={option}
- mode={mode}
- />
-
+ ref={(e) => (echartsCompRef.current = e)}
+ style={{ height: "100%" }}
+ notMerge
+ lazyUpdate
+ opts={{ locale: getEchartsLocale() }}
+ option={option}
+ mode={mode}
+ />
+
);
});
diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx
index d6a1408657..583fc38d85 100644
--- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx
+++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx
@@ -16,9 +16,9 @@ import {
uiChildren,
clickEvent,
styleControl,
- EchartsStyle,
EchartDefaultChartStyle,
- EchartDefaultTextStyle
+ EchartDefaultTextStyle,
+ toArray
} from "lowcoder-sdk";
import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core";
import { BarChartConfig } from "../chartComp/chartConfigs/barChartConfig";
@@ -38,6 +38,7 @@ import { EchartsTitleConfig } from "comps/chartComp/chartConfigs/echartsTitleCon
import { EchartsSortingConfig } from "../chartComp/chartConfigs/echartsSortingConfig";
import { EchartsLegendAlignConfig } from "../chartComp/chartConfigs/echartsLegendAlignConfig";
import { EchartsLegendOrientConfig } from "../chartComp/chartConfigs/echartsLegendOrientConfig";
+import { EchartsTitleVerticalConfig } from "../chartComp/chartConfigs/echartsTitleVerticalConfig";
export const ChartTypeOptions = [
{
@@ -255,12 +256,14 @@ export const chartUiModeChildren = {
};
let chartJsonModeChildren: any = {
+ echartsData: jsonControl(toArray, i18nObjs.defaultFunnelChartOption.data),
echartsOption: jsonControl(toObject, i18nObjs.defaultFunnelChartOption),
echartsTitle: withDefault(StringControl, trans("funnelChart.defaultTitle")),
- echartsLegendConfig: EchartsLegendConfig,
+ echartsTitleVerticalConfig: EchartsTitleVerticalConfig,
echartsSortingConfig: EchartsSortingConfig,
echartsLabelConfig: EchartsLabelConfig,
echartsFunnelAlignConfig: EchartsFunnelAlignConfig,
+ echartsLegendConfig: EchartsLegendConfig,
echartsLegendOrientConfig: EchartsLegendOrientConfig,
echartsLegendAlignConfig: EchartsLegendAlignConfig,
echartsConfig: EchartsOptionComp,
@@ -279,7 +282,7 @@ let chartJsonModeChildren: any = {
opacity:withDefault(NumberControl,trans('funnelChart.defaultOpacity'))
}
-if (EchartsStyle) {
+if (EchartDefaultChartStyle && EchartDefaultTextStyle) {
chartJsonModeChildren = {
...chartJsonModeChildren,
chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'),
diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx
index 346a48260f..b3b0f61aaa 100644
--- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx
+++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx
@@ -16,24 +16,12 @@ export function funnelChartPropertyView(
const jsonModePropertyView = (
<>
- {children.echartsOption.propertyView({
- label: trans("chart.echartsOptionLabel"),
- styleName: "higher",
- tooltip: (
-
- ),
- })}
+ {children.echartsData.propertyView({ label: trans("chart.data") })}
+
{children.echartsTitleConfig.getPropertyView()}
- {children.legendVisibility.getView() && children.echartsLegendConfig.getPropertyView()}
+ {children.echartsTitleVerticalConfig.getPropertyView()}
{children.legendVisibility.getView() && children.echartsLegendAlignConfig.getPropertyView()}
+ {children.legendVisibility.getView() && children.echartsLegendConfig.getPropertyView()}
{children.legendVisibility.getView() && children.echartsLegendOrientConfig.getPropertyView()}
{children.echartsSortingConfig.getPropertyView()}
{children.label.getView()&& children.echartsLabelConfig.getPropertyView()}
@@ -73,6 +61,23 @@ export function funnelChartPropertyView(
: <>
}
{hiddenPropertyView(children)}
+
+ {children.echartsOption.propertyView({
+ label: trans("chart.echartsOptionLabel"),
+ styleName: "higher",
+ tooltip: (
+
+ ),
+ })}
+
);
diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts
index 1442ea9953..36fe24edfa 100644
--- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts
+++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts
@@ -14,6 +14,7 @@ import Big from "big.js";
import { googleMapsApiUrl } from "../chartComp/chartConfigs/chartUrls";
import opacityToHex from "../../util/opacityToHex";
import parseBackground from "../../util/gradientBackgroundColor";
+import {chartStyleWrapper, styleWrapper} from "../../util/styleWrapper";
export function transformData(
originData: JSONObject[],
@@ -140,41 +141,25 @@ export function getEchartsConfig(
let opt={
"title": {
"text": props.echartsTitle,
- 'top': "top",
+ "top": props.echartsTitleVerticalConfig.top,
"left":props.echartsTitleConfig.top,
"textStyle": {
- "fontFamily": props?.titleStyle?.chartFontFamily || theme?.titleStyle?.fontFamily,
- "fontSize": props?.titleStyle?.chartTextSize || theme?.titleStyle?.fontSize || '18',
- "fontWeight": props?.titleStyle?.chartTextWeight || theme?.titleStyle?.fontWeight,
- "color": props?.titleStyle?.chartTextColor || theme?.titleStyle?.fontColor || "#000000",
- "fontStyle": props?.titleStyle?.chartFontStyle || theme?.titleStyle?.fontStyle,
- "textShadowColor": props?.titleStyle?.chartShadowColor || theme?.titleStyle?.shadowColor,
- "textShadowBlur": props?.titleStyle?.chartBoxShadow?.split('px')[0] || theme?.titleStyle?.boxShadow?.split('px')[0],
- "textShadowOffsetX": props?.titleStyle?.chartBoxShadow?.split('px')[1] || theme?.titleStyle?.boxShadow?.split('px')[1],
- "textShadowOffsetY": props?.titleStyle?.chartBoxShadow?.split('px')[2] || theme?.titleStyle?.boxShadow?.split('px')[2]
+ ...styleWrapper(props?.titleStyle, theme?.titleStyle)
}
},
"backgroundColor": parseBackground( props?.chartStyle?.background || theme?.chartStyle?.backgroundColor || "#FFFFFF"),
- "color": props.echartsOption.data?.map(data => data.color),
+ "color": props.echartsData.data?.map(data => data.color) || props.echartsOption.data?.map(data => data.color),
"tooltip": props.tooltip&&{
"trigger": "item",
"formatter": "{a} ();
+ const containerRef = useRef(null);
const [chartSize, setChartSize] = useState();
const firstResize = useRef(true);
const theme = useContext(ThemeContext);
@@ -142,43 +143,47 @@ GaugeChartTmpComp = withViewFn(GaugeChartTmpComp, (comp) => {
}, [onUIEvent]);
const echartsConfigChildren = _.omit(comp.children, echartsConfigOmitChildren);
+ const childrenProps = childrenToProps(echartsConfigChildren);
const option = useMemo(() => {
return getEchartsConfig(
- childrenToProps(echartsConfigChildren) as ToViewReturn,
+ childrenProps as ToViewReturn,
chartSize,
themeConfig
);
- }, [chartSize, ...Object.values(echartsConfigChildren), theme]);
+ }, [theme, childrenProps, chartSize, ...Object.values(echartsConfigChildren)]);
useEffect(() => {
comp.children.mapInstance.dispatch(changeValueAction(null, false))
if(comp.children.mapInstance.value) return;
}, [option])
+ useResizeDetector({
+ targetRef: containerRef,
+ onResize: ({width, height}) => {
+ if (width && height) {
+ setChartSize({ w: width, h: height });
+ }
+ if (!firstResize.current) {
+ // ignore the first resize, which will impact the loading animation
+ echartsCompRef.current?.getEchartsInstance().resize();
+ } else {
+ firstResize.current = false;
+ }
+ }
+ })
+
return (
- {
- if (w && h) {
- setChartSize({ w: w, h: h });
- }
- if (!firstResize.current) {
- // ignore the first resize, which will impact the loading animation
- echartsCompRef.current?.getEchartsInstance().resize();
- } else {
- firstResize.current = false;
- }
- }}
- >
+
(echartsCompRef.current = e)}
- style={{ height: "100%" }}
- notMerge
- lazyUpdate
- opts={{ locale: getEchartsLocale() }}
- option={option}
- mode={mode}
- />
-
+ ref={(e) => (echartsCompRef.current = e)}
+ style={{ height: "100%" }}
+ notMerge
+ lazyUpdate
+ opts={{ locale: getEchartsLocale() }}
+ option={option}
+ mode={mode}
+ />
+
);
});
diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx
index f9f6210b5f..f09412345d 100644
--- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx
+++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx
@@ -16,9 +16,11 @@ import {
uiChildren,
clickEvent,
styleControl,
- EchartsStyle,
EchartDefaultChartStyle,
- EchartDefaultTextStyle
+ EchartDefaultTextStyle,
+ ColorControl,
+ EchartDefaultDetailStyle,
+ toArray
} from "lowcoder-sdk";
import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core";
import { BarChartConfig } from "../chartComp/chartConfigs/barChartConfig";
@@ -35,25 +37,6 @@ import { i18nObjs, trans } from "i18n/comps";
import { GaugeChartConfig } from "../chartComp/chartConfigs/gaugeChartConfig";
import { EchartsTitleConfig } from "comps/chartComp/chartConfigs/echartsTitleConfig";
-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;
-
export const UIEventOptions = [
{
label: trans("chart.select"),
@@ -233,6 +216,41 @@ const EchartsOptionMap = {
gauge: GaugeChartConfig,
};
+const ChartTypeOptions = [
+ {
+ label: trans("chart.default"),
+ value: "default",
+ },
+ {
+ label: trans("chart.stageGauge"),
+ value: "stageGauge",
+ },
+ {
+ label: trans("chart.gradeGauge"),
+ value: "gradeGauge",
+ },
+ {
+ label: trans("chart.temperatureGauge"),
+ value: "temperatureGauge",
+ },
+ {
+ label: trans("chart.multiGauge"),
+ value: "multiGauge",
+ },
+ {
+ label: trans("chart.ringGauge"),
+ value: "ringGauge",
+ },
+ {
+ label: trans("chart.barometerGauge"),
+ value: "barometerGauge",
+ },
+ {
+ label: trans("chart.clockGauge"),
+ value: "clockGauge",
+ },
+] as const;
+
const ChartOptionComp = withType(ChartOptionMap, "bar");
const EchartsOptionComp = withType(EchartsOptionMap, "gauge");
export type CharOptionCompType = keyof typeof ChartOptionMap;
@@ -251,7 +269,25 @@ export const chartUiModeChildren = {
};
let chartJsonModeChildren: any = {
+ echartsData: jsonControl(toArray),
echartsOption: jsonControl(toObject, i18nObjs.defaultGaugeChartOption),
+ stageGaugeOption: jsonControl(toObject, i18nObjs.defaultStageGaugeChartOption),
+ gradeGaugeOption: jsonControl(toObject, i18nObjs.defaultGradeGaugeChartOption),
+ temperatureGaugeOption: jsonControl(toObject, i18nObjs.defaultTemperatureGaugeChartOption),
+ multiTitleGaugeOption: jsonControl(toObject, i18nObjs.defaultMultiTitleGaugeChartOption),
+ ringGaugeOption: jsonControl(toObject, i18nObjs.defaultRingGaugeChartOption),
+ clockGaugeOption: jsonControl(toObject, i18nObjs.defaultClockGaugeChartOption),
+ barometerGaugeOption: jsonControl(toObject, i18nObjs.defaultBarometerGaugeChartOption),
+
+ stageGaugeData:jsonControl(toArray),
+ gradeGaugeData:jsonControl(toArray),
+ temperatureGaugeData:jsonControl(toArray),
+ multiTitleGaugeData:jsonControl(toArray),
+ ringGaugeData:jsonControl(toArray),
+ clockGaugeData:jsonControl(toArray),
+ barometerGaugeData:jsonControl(toArray),
+
+ chartType: dropdownControl(ChartTypeOptions, trans("chart.default")),
echartsTitle: withDefault(StringControl, trans("gaugeChart.defaultTitle")),
echartsLegendConfig: EchartsLegendConfig,
echartsLabelConfig: EchartsLabelConfig,
@@ -268,6 +304,7 @@ let chartJsonModeChildren: any = {
bottom:withDefault(NumberControl,trans('gaugeChart.defaultBottom')),
width:withDefault(NumberControl,trans('gaugeChart.defaultWidth')),
radius:withDefault(NumberControl,trans('gaugeChart.defaultRadius')),
+ temperatureRadius:withDefault(NumberControl,trans('gaugeChart.defaultTemperatureRadius')),
min:withDefault(NumberControl,trans('gaugeChart.defaultMin')),
max:withDefault(NumberControl,trans('gaugeChart.defaultMax')),
gap:withDefault(NumberControl,trans('gaugeChart.defaultGap')),
@@ -277,18 +314,43 @@ let chartJsonModeChildren: any = {
endAngle:withDefault(NumberControl,trans('gaugeChart.defaultEndAngle')),
splitNumber:withDefault(NumberControl,trans('gaugeChart.defaultSplitNumber')),
pointerLength:withDefault(NumberControl,trans('gaugeChart.defaultPointerLength')),
+ barometerPointerLength:withDefault(NumberControl,trans('gaugeChart.defaultBarometerPointerLength')),
pointerWidth:withDefault(NumberControl,trans('gaugeChart.defaultPointerWidth')),
+ barometerPointerWidth:withDefault(NumberControl,trans('gaugeChart.defaultBarometerPointerWidth')),
+ pointer_Y:withDefault(NumberControl,trans('gaugeChart.defaultPointer_Y')),
+ barometerPointer_Y:withDefault(NumberControl,trans('gaugeChart.defaultBarometerPointer_Y')),
+ pointerIcon:withDefault(StringControl),
+ gradePointerIcon:withDefault(StringControl, trans('gaugeChart.gradeDefaultPointerIcon')),
+ clockPointerIcon:withDefault(StringControl, trans('gaugeChart.clockDefaultPointerIcon')),
+ barometerPointerIcon:withDefault(StringControl, trans('gaugeChart.defaultBarometerPointerIcon')),
+ multiTitlePointerIcon:withDefault(StringControl, trans('gaugeChart.defaultMultiTitlePointerIcon')),
progressBarWidth:withDefault(NumberControl,trans('gaugeChart.defaultProgressBarWidth')),
+ axisTickWidth: withDefault(NumberControl, trans('gaugeChart.defaultAxisTickWidth')),
+ axisTickLength: withDefault(NumberControl, trans('gaugeChart.defaultAxisTickLength')),
+ axisLabelDistance: withDefault(NumberControl, trans('gaugeChart.defaultAxisLabelDistance')),
+ axisTickColor: withDefault(ColorControl, trans('gaugeChart.defaultAxisTickColor')),
+
+ gradeGaugePointerLength:withDefault(NumberControl,trans('gaugeChart.defaultGradeGaugePointerLength')),
+ gradeGaugePointerWidth:withDefault(NumberControl,trans('gaugeChart.defaultGradeGaugePointerWidth')),
+ gradeGaugePointer_Y:withDefault(NumberControl,trans('gaugeChart.defaultGradeGaugePointer_Y')),
+ stageProgressBarWidth:withDefault(NumberControl,trans('gaugeChart.defaultStageProgressBarWidth')),
+ temperatureProgressBarWidth:withDefault(NumberControl,trans('gaugeChart.defaultTemperatureProgressBarWidth')),
+ ringProgressBarWidth:withDefault(NumberControl,trans('gaugeChart.defaultRingProgressBarWidth')),
+ temperatureAxisLabelDistance:withDefault(NumberControl,trans('gaugeChart.defaultTemperatureAxisLabelDistance')),
+ stageAxisTickColor: withDefault(ColorControl, trans('gaugeChart.defaultStageAxisTickColor')),
+ gradeAxisTickColor: withDefault(ColorControl),
}
-if (EchartsStyle) {
+
+if (EchartDefaultChartStyle && EchartDefaultTextStyle && EchartDefaultDetailStyle) {
chartJsonModeChildren = {
...chartJsonModeChildren,
chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'),
titleStyle: styleControl(EchartDefaultTextStyle, 'titleStyle'),
labelStyle: styleControl(EchartDefaultTextStyle, 'labelStyle'),
- legendStyle: styleControl(EchartDefaultTextStyle, 'legendStyle'),
+ legendStyle: styleControl(EchartDefaultDetailStyle, 'legendStyle'),
axisLabelStyle: styleControl(EchartDefaultTextStyle, 'axisLabelStyle'),
+ axisLabelStyleOutline: styleControl(EchartDefaultTextStyle, 'axisLabelStyleOutline'),
}
}
const chartMapModeChildren = {
diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx
index cb25183bda..cab358d440 100644
--- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx
+++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx
@@ -16,6 +16,51 @@ export function gaugeChartPropertyView(
const jsonModePropertyView = (
<>
+ {children.echartsData.propertyView({ label: trans("chart.data") })}
+ {children.chartType.propertyView({label: trans("gaugeChart.chartType"), tooltip: trans("gaugeChart.chartTypeTooltip") })}
+ {children.echartsTitleConfig.getPropertyView()}
+ {children.echartsTitle.propertyView({ label: trans("gaugeChart.title"), tooltip: trans("echarts.titleTooltip") })}
+ {children.radius.propertyView({ label: trans("gaugeChart.radius"), tooltip: trans("echarts.radiusTooltip") })}
+ {children.min.propertyView({ label: trans("gaugeChart.min"), tooltip: trans("echarts.minTooltip") })}
+ {children.max.propertyView({ label: trans("gaugeChart.max"), tooltip: trans("echarts.maxTooltip") })}
+ {children.position_x.propertyView({ label: trans("gaugeChart.position_x"), tooltip: trans("echarts.positionChart_x_Tooltip") })}
+ {children.position_y.propertyView({ label: trans("gaugeChart.position_y"), tooltip: trans("echarts.positionChart_x_Tooltip") })}
+ {children.startAngle.propertyView({ label: trans("gaugeChart.startAngle"), tooltip: trans("echarts.startAngleTooltip") })}
+ {children.endAngle.propertyView({ label: trans("gaugeChart.endAngle"), tooltip: trans("echarts.endAngleTooltip") })}
+ {children.pointerLength.propertyView({ label: trans("gaugeChart.pointerLength"), tooltip: trans("echarts.pointerLengthTooltip") })}
+ {children.pointerWidth.propertyView({ label: trans("gaugeChart.pointerWidth"), tooltip: trans("echarts.pointerWidthTooltip") })}
+ {children.pointer_Y.propertyView({ label: trans("gaugeChart.pointer_Y"), tooltip: trans("gaugeChart.pointer_Y_Tooltip") })}
+ {children.pointerIcon.propertyView({ label: trans("gaugeChart.pointerIcon"), tooltip: trans("gaugeChart.pointerIconTooltip") })}
+ {children.progressBar.getView() && children.progressBarWidth.propertyView({ label: trans("gaugeChart.progressBarWidth"), tooltip: trans("echarts.pointerWidthTooltip") })}
+ {children.splitNumber.propertyView({ label: trans("gaugeChart.splitNumber"), tooltip: trans("echarts.splitNumberTooltip") })}
+ {children.axisTickLength.propertyView({ label: trans("gaugeChart.axisTickLength"), tooltip: trans("echarts.axisTickLengthTooltip") })}
+ {children.axisTickWidth.propertyView({ label: trans("gaugeChart.axisTickWidth"), tooltip: trans("echarts.axisTickWidthTooltip") })}
+ {children.axisLabelDistance.propertyView({ label: trans("gaugeChart.axisLabelDistance"), tooltip: trans("echarts.axisLabelDistanceTooltip") })}
+ {children.axisTickColor.propertyView({ label: trans("gaugeChart.axisTickColor"), tooltip: trans("echarts.axisTickColorTooltip") })}
+ {children.tooltip.propertyView({ label: trans("gaugeChart.tooltip"), tooltip: trans("echarts.tooltipVisibilityTooltip") })}
+ {children.progressBar.propertyView({ label: trans("gaugeChart.progressBar"), tooltip: trans("echarts.progressBarVisibilityTooltip") })}
+ {children.roundCap.propertyView({ label: trans("gaugeChart.roundCap"), tooltip: trans("echarts.roundCapVisibilityTooltip") })}
+
+
+ {children.onEvent.propertyView()}
+
+
+ {children.chartStyle?.getPropertyView()}
+
+
+ {children.titleStyle?.getPropertyView()}
+
+
+ {children.labelStyle?.getPropertyView()}
+
+
+ {children.legendStyle?.getPropertyView()}
+
+
+ {children.axisLabelStyle?.getPropertyView()}
+
+ {hiddenPropertyView(children)}
+
{children.echartsOption.propertyView({
label: trans("chart.echartsOptionLabel"),
styleName: "higher",
@@ -31,12 +76,17 @@ export function gaugeChartPropertyView(
),
})}
+
+
+ );
+
+ const stageGaugePropertyView = (
+ <>
+
+ {children.stageGaugeData.propertyView({ label: trans("chart.data") })}
+ {children.chartType.propertyView({label: trans("gaugeChart.chartType"), tooltip: trans("gaugeChart.chartTypeTooltip") })}
{children.echartsTitleConfig.getPropertyView()}
{children.echartsTitle.propertyView({ label: trans("gaugeChart.title"), tooltip: trans("echarts.titleTooltip") })}
- {/* {children.left.propertyView({ label: trans("gaugeChart.left") })}
- {children.top.propertyView({ label: trans("gaugeChart.top") })}
- {children.bottom.propertyView({ label: trans("gaugeChart.bottom") })}
- {children.width.propertyView({ label: trans("gaugeChart.width") })} */}
{children.radius.propertyView({ label: trans("gaugeChart.radius"), tooltip: trans("echarts.radiusTooltip") })}
{children.min.propertyView({ label: trans("gaugeChart.min"), tooltip: trans("echarts.minTooltip") })}
{children.max.propertyView({ label: trans("gaugeChart.max"), tooltip: trans("echarts.maxTooltip") })}
@@ -44,13 +94,218 @@ export function gaugeChartPropertyView(
{children.position_y.propertyView({ label: trans("gaugeChart.position_y"), tooltip: trans("echarts.positionChart_x_Tooltip") })}
{children.startAngle.propertyView({ label: trans("gaugeChart.startAngle"), tooltip: trans("echarts.startAngleTooltip") })}
{children.endAngle.propertyView({ label: trans("gaugeChart.endAngle"), tooltip: trans("echarts.endAngleTooltip") })}
+ {children.pointerLength.propertyView({ label: trans("gaugeChart.pointerLength"), tooltip: trans("echarts.pointerLengthTooltip") })}
+ {children.pointerWidth.propertyView({ label: trans("gaugeChart.pointerWidth"), tooltip: trans("echarts.pointerWidthTooltip") })}
+ {children.pointer_Y.propertyView({ label: trans("gaugeChart.pointer_Y"), tooltip: trans("gaugeChart.pointer_Y_Tooltip") })}
+ {children.pointerIcon.propertyView({ label: trans("gaugeChart.pointerIcon"), tooltip: trans("gaugeChart.pointerIconTooltip") })}
+ {children.stageProgressBarWidth.propertyView({ label: trans("gaugeChart.progressBarWidth"), tooltip: trans("echarts.pointerWidthTooltip") })}
{children.splitNumber.propertyView({ label: trans("gaugeChart.splitNumber"), tooltip: trans("echarts.splitNumberTooltip") })}
+ {children.axisTickLength.propertyView({ label: trans("gaugeChart.axisTickLength"), tooltip: trans("echarts.axisTickLengthTooltip") })}
+ {children.axisTickWidth.propertyView({ label: trans("gaugeChart.axisTickWidth"), tooltip: trans("echarts.axisTickWidthTooltip") })}
+ {children.axisLabelDistance.propertyView({ label: trans("gaugeChart.axisLabelDistance"), tooltip: trans("echarts.axisLabelDistanceTooltip") })}
+ {children.stageAxisTickColor.propertyView({ label: trans("gaugeChart.axisTickColor"), tooltip: trans("echarts.axisTickColorTooltip") })}
+ {children.tooltip.propertyView({ label: trans("gaugeChart.tooltip"), tooltip: trans("echarts.tooltipVisibilityTooltip") })}
+ {/*{children.progressBar.propertyView({ label: trans("gaugeChart.progressBar"), tooltip: trans("echarts.progressBarVisibilityTooltip") })}*/}
+ {/*{children.roundCap.propertyView({ label: trans("gaugeChart.roundCap"), tooltip: trans("echarts.roundCapVisibilityTooltip") })}*/}
+
+
+ {children.onEvent.propertyView()}
+
+
+ {children.chartStyle?.getPropertyView()}
+
+
+ {children.titleStyle?.getPropertyView()}
+
+ {/**/}
+ {/* {children.labelStyle?.getPropertyView()}*/}
+ {/* */}
+
+ {children.legendStyle?.getPropertyView()}
+
+
+ {children.axisLabelStyle?.getPropertyView()}
+
+ {hiddenPropertyView(children)}
+
+ {children.stageGaugeOption.propertyView({
+ label: trans("chart.echartsOptionLabel"),
+ styleName: "higher",
+ tooltip: (
+
+ ),
+ })}
+
+
+ );
+
+ const gradeGaugePropertyView = (
+ <>
+
+ {children.gradeGaugeData.propertyView({ label: trans("chart.data") })}
+ {children.chartType.propertyView({label: trans("gaugeChart.chartType"), tooltip: trans("gaugeChart.chartTypeTooltip") })}
+ {children.echartsTitleConfig.getPropertyView()}
+ {children.echartsTitle.propertyView({ label: trans("gaugeChart.title"), tooltip: trans("echarts.titleTooltip") })}
+ {children.radius.propertyView({ label: trans("gaugeChart.radius"), tooltip: trans("echarts.radiusTooltip") })}
+ {children.min.propertyView({ label: trans("gaugeChart.min"), tooltip: trans("echarts.minTooltip") })}
+ {children.max.propertyView({ label: trans("gaugeChart.max"), tooltip: trans("echarts.maxTooltip") })}
+ {children.position_x.propertyView({ label: trans("gaugeChart.position_x"), tooltip: trans("echarts.positionChart_x_Tooltip") })}
+ {children.position_y.propertyView({ label: trans("gaugeChart.position_y"), tooltip: trans("echarts.positionChart_x_Tooltip") })}
+ {children.startAngle.propertyView({ label: trans("gaugeChart.startAngle"), tooltip: trans("echarts.startAngleTooltip") })}
+ {children.endAngle.propertyView({ label: trans("gaugeChart.endAngle"), tooltip: trans("echarts.endAngleTooltip") })}
+ {children.gradeGaugePointerLength.propertyView({ label: trans("gaugeChart.pointerLength"), tooltip: trans("echarts.pointerLengthTooltip") })}
+ {children.gradeGaugePointerWidth.propertyView({ label: trans("gaugeChart.pointerWidth"), tooltip: trans("echarts.pointerWidthTooltip") })}
+ {children.gradeGaugePointer_Y.propertyView({ label: trans("gaugeChart.pointer_Y"), tooltip: trans("gaugeChart.pointer_Y_Tooltip") })}
+ {children.gradePointerIcon.propertyView({ label: trans("gaugeChart.pointerIcon"), tooltip: trans("gaugeChart.pointerIconTooltip") })}
+ {children.progressBarWidth.propertyView({ label: trans("gaugeChart.progressBarWidth"), tooltip: trans("echarts.pointerWidthTooltip") })}
+ {children.splitNumber.propertyView({ label: trans("gaugeChart.splitNumber"), tooltip: trans("echarts.splitNumberTooltip") })}
+ {children.axisTickLength.propertyView({ label: trans("gaugeChart.axisTickLength"), tooltip: trans("echarts.axisTickLengthTooltip") })}
+ {children.axisTickWidth.propertyView({ label: trans("gaugeChart.axisTickWidth"), tooltip: trans("echarts.axisTickWidthTooltip") })}
+ {/*{children.axisLabelDistance.propertyView({ label: trans("gaugeChart.axisLabelDistance"), tooltip: trans("echarts.axisLabelDistanceTooltip") })}*/}
+ {children.gradeAxisTickColor.propertyView({ label: trans("gaugeChart.axisTickColor"), tooltip: trans("echarts.axisTickColorTooltip") })}
+ {children.tooltip.propertyView({ label: trans("gaugeChart.tooltip"), tooltip: trans("echarts.tooltipVisibilityTooltip") })}
+ {/*{children.progressBar.propertyView({ label: trans("gaugeChart.progressBar"), tooltip: trans("echarts.progressBarVisibilityTooltip") })}*/}
+ {/*{children.roundCap.propertyView({ label: trans("gaugeChart.roundCap"), tooltip: trans("echarts.roundCapVisibilityTooltip") })}*/}
+
+
+ {children.onEvent.propertyView()}
+
+
+ {children.chartStyle?.getPropertyView()}
+
+
+ {children.titleStyle?.getPropertyView()}
+
+
+ {children.labelStyle?.getPropertyView()}
+
+
+ {children.legendStyle?.getPropertyView()}
+
+ {/**/}
+ {/* {children.axisLabelStyle?.getPropertyView()}*/}
+ {/* */}
+ {hiddenPropertyView(children)}
+
+ {children.gradeGaugeOption.propertyView({
+ label: trans("chart.echartsOptionLabel"),
+ styleName: "higher",
+ tooltip: (
+
+ ),
+ })}
+
+
+ );
+
+ const temperatureGaugePropertyView = (
+ <>
+
+ {children.temperatureGaugeData.propertyView({ label: trans("chart.data") })}
+ {children.chartType.propertyView({label: trans("gaugeChart.chartType"), tooltip: trans("gaugeChart.chartTypeTooltip") })}
+ {children.echartsTitleConfig.getPropertyView()}
+ {children.echartsTitle.propertyView({ label: trans("gaugeChart.title"), tooltip: trans("echarts.titleTooltip") })}
+ {children.temperatureRadius.propertyView({ label: trans("gaugeChart.radius"), tooltip: trans("echarts.radiusTooltip") })}
+ {children.min.propertyView({ label: trans("gaugeChart.min"), tooltip: trans("echarts.minTooltip") })}
+ {children.max.propertyView({ label: trans("gaugeChart.max"), tooltip: trans("echarts.maxTooltip") })}
+ {children.position_x.propertyView({ label: trans("gaugeChart.position_x"), tooltip: trans("echarts.positionChart_x_Tooltip") })}
+ {children.position_y.propertyView({ label: trans("gaugeChart.position_y"), tooltip: trans("echarts.positionChart_x_Tooltip") })}
+ {children.startAngle.propertyView({ label: trans("gaugeChart.startAngle"), tooltip: trans("echarts.startAngleTooltip") })}
+ {children.endAngle.propertyView({ label: trans("gaugeChart.endAngle"), tooltip: trans("echarts.endAngleTooltip") })}
+ {/*{children.gradeGaugePointerLength.propertyView({ label: trans("gaugeChart.pointerLength"), tooltip: trans("echarts.pointerLengthTooltip") })}*/}
+ {/*{children.gradeGaugePointerWidth.propertyView({ label: trans("gaugeChart.pointerWidth"), tooltip: trans("echarts.pointerWidthTooltip") })}*/}
+ {/*{children.gradeGaugePointer_Y.propertyView({ label: trans("gaugeChart.pointer_Y"), tooltip: trans("gaugeChart.pointer_Y_Tooltip") })}*/}
+ {/*{children.gradePointerIcon.propertyView({ label: trans("gaugeChart.pointerIcon"), tooltip: trans("gaugeChart.pointerIconTooltip") })}*/}
+ {children.temperatureProgressBarWidth.propertyView({ label: trans("gaugeChart.progressBarWidth"), tooltip: trans("echarts.pointerWidthTooltip") })}
+ {children.splitNumber.propertyView({ label: trans("gaugeChart.splitNumber"), tooltip: trans("echarts.splitNumberTooltip") })}
+ {children.axisTickLength.propertyView({ label: trans("gaugeChart.axisTickLength"), tooltip: trans("echarts.axisTickLengthTooltip") })}
+ {children.axisTickWidth.propertyView({ label: trans("gaugeChart.axisTickWidth"), tooltip: trans("echarts.axisTickWidthTooltip") })}
+ {children.temperatureAxisLabelDistance.propertyView({ label: trans("gaugeChart.axisLabelDistance"), tooltip: trans("echarts.axisLabelDistanceTooltip") })}
+ {children.gradeAxisTickColor.propertyView({ label: trans("gaugeChart.axisTickColor"), tooltip: trans("echarts.axisTickColorTooltip") })}
+ {children.tooltip.propertyView({ label: trans("gaugeChart.tooltip"), tooltip: trans("echarts.tooltipVisibilityTooltip") })}
+ {/*{children.progressBar.propertyView({ label: trans("gaugeChart.progressBar"), tooltip: trans("echarts.progressBarVisibilityTooltip") })}*/}
+ {/*{children.roundCap.propertyView({ label: trans("gaugeChart.roundCap"), tooltip: trans("echarts.roundCapVisibilityTooltip") })}*/}
+
+
+ {children.onEvent.propertyView()}
+
+
+ {children.chartStyle?.getPropertyView()}
+
+
+ {children.titleStyle?.getPropertyView()}
+
+ {/**/}
+ {/* {children.labelStyle?.getPropertyView()}*/}
+ {/* */}
+
+ {children.legendStyle?.getPropertyView()}
+
+
+ {children.axisLabelStyle?.getPropertyView()}
+
+ {hiddenPropertyView(children)}
+
+ {children.temperatureGaugeOption.propertyView({
+ label: trans("chart.echartsOptionLabel"),
+ styleName: "higher",
+ tooltip: (
+
+ ),
+ })}
+
+
+
+ );
+
+ const multiGaugePropertyView = (
+ <>
+
+ {children.multiTitleGaugeData.propertyView({ label: trans("chart.data") })}
+ {children.chartType.propertyView({label: trans("gaugeChart.chartType"), tooltip: trans("gaugeChart.chartTypeTooltip") })}
+ {children.echartsTitleConfig.getPropertyView()}
+ {children.echartsTitle.propertyView({ label: trans("gaugeChart.title"), tooltip: trans("echarts.titleTooltip") })}
+ {children.radius.propertyView({ label: trans("gaugeChart.radius"), tooltip: trans("echarts.radiusTooltip") })}
+ {children.min.propertyView({ label: trans("gaugeChart.min"), tooltip: trans("echarts.minTooltip") })}
+ {children.max.propertyView({ label: trans("gaugeChart.max"), tooltip: trans("echarts.maxTooltip") })}
+ {children.position_x.propertyView({ label: trans("gaugeChart.position_x"), tooltip: trans("echarts.positionChart_x_Tooltip") })}
+ {children.position_y.propertyView({ label: trans("gaugeChart.position_y"), tooltip: trans("echarts.positionChart_x_Tooltip") })}
+ {children.startAngle.propertyView({ label: trans("gaugeChart.startAngle"), tooltip: trans("echarts.startAngleTooltip") })}
+ {children.endAngle.propertyView({ label: trans("gaugeChart.endAngle"), tooltip: trans("echarts.endAngleTooltip") })}
+ {children.splitNumber.propertyView({ label: trans("gaugeChart.splitNumber"), tooltip: trans("echarts.splitNumberTooltip") })}
+ {children.axisTickLength.propertyView({ label: trans("gaugeChart.axisTickLength"), tooltip: trans("echarts.axisTickLengthTooltip") })}
+ {children.axisTickWidth.propertyView({ label: trans("gaugeChart.axisTickWidth"), tooltip: trans("echarts.axisTickWidthTooltip") })}
+ {children.axisTickColor.propertyView({ label: trans("gaugeChart.axisTickColor"), tooltip: trans("echarts.axisTickColorTooltip") })}
{children.pointerLength.propertyView({ label: trans("gaugeChart.pointerLength"), tooltip: trans("echarts.pointerLengthTooltip") })}
{children.pointerWidth.propertyView({ label: trans("gaugeChart.pointerWidth"), tooltip: trans("echarts.pointerWidthTooltip") })}
- {children.progressBar.getView() && children.progressBarWidth.propertyView({ label: trans("gaugeChart.progressBarWidth"), tooltip: trans("echarts.pointerWidthTooltip") })}
- {/* {children.gap.propertyView({ label: trans("gaugeChart.gap") })} */}
+ {children.pointer_Y.propertyView({ label: trans("gaugeChart.pointer_Y"), tooltip: trans("gaugeChart.pointer_Y_Tooltip") })}
+ {children.multiTitlePointerIcon.propertyView({ label: trans("gaugeChart.pointerIcon"), tooltip: trans("gaugeChart.pointerIconTooltip") })}
+ {children.progressBarWidth.propertyView({ label: trans("gaugeChart.progressBarWidth"), tooltip: trans("echarts.pointerWidthTooltip") })}
{children.tooltip.propertyView({ label: trans("gaugeChart.tooltip"), tooltip: trans("echarts.tooltipVisibilityTooltip") })}
- {children.progressBar.propertyView({ label: trans("gaugeChart.progressBar"), tooltip: trans("echarts.progressBarVisibilityTooltip") })}
{children.roundCap.propertyView({ label: trans("gaugeChart.roundCap"), tooltip: trans("echarts.roundCapVisibilityTooltip") })}
@@ -72,13 +327,217 @@ export function gaugeChartPropertyView(
{children.axisLabelStyle?.getPropertyView()}
{hiddenPropertyView(children)}
+
+ {children.multiTitleGaugeOption.propertyView({
+ label: trans("chart.echartsOptionLabel"),
+ styleName: "higher",
+ tooltip: (
+
+ ),
+ })}
+
+
+ );
+
+ const ringGaugePropertyView = (
+ <>
+
+ {children.ringGaugeData.propertyView({ label: trans("chart.data") })}
+ {children.chartType.propertyView({label: trans("gaugeChart.chartType"), tooltip: trans("gaugeChart.chartTypeTooltip") })}
+ {children.echartsTitleConfig.getPropertyView()}
+ {children.echartsTitle.propertyView({ label: trans("gaugeChart.title"), tooltip: trans("echarts.titleTooltip") })}
+ {children.radius.propertyView({ label: trans("gaugeChart.radius"), tooltip: trans("echarts.radiusTooltip") })}
+ {children.min.propertyView({ label: trans("gaugeChart.min"), tooltip: trans("echarts.minTooltip") })}
+ {children.max.propertyView({ label: trans("gaugeChart.max"), tooltip: trans("echarts.maxTooltip") })}
+ {children.position_x.propertyView({ label: trans("gaugeChart.position_x"), tooltip: trans("echarts.positionChart_x_Tooltip") })}
+ {children.position_y.propertyView({ label: trans("gaugeChart.position_y"), tooltip: trans("echarts.positionChart_x_Tooltip") })}
+ {children.ringProgressBarWidth.propertyView({ label: trans("gaugeChart.progressBarWidth"), tooltip: trans("echarts.pointerWidthTooltip") })}
+ {children.tooltip.propertyView({ label: trans("gaugeChart.tooltip"), tooltip: trans("echarts.tooltipVisibilityTooltip") })}
+ {children.roundCap.propertyView({ label: trans("gaugeChart.roundCap"), tooltip: trans("echarts.roundCapVisibilityTooltip") })}
+
+
+ {children.onEvent.propertyView()}
+
+
+ {children.chartStyle?.getPropertyView()}
+
+
+ {children.titleStyle?.getPropertyView()}
+
+
+ {children.labelStyle?.getPropertyView()}
+
+
+ {children.legendStyle?.getPropertyView()}
+
+
+ {children.axisLabelStyle?.getPropertyView()}
+
+ {hiddenPropertyView(children)}
+
+ {children.ringGaugeOption.propertyView({
+ label: trans("chart.echartsOptionLabel"),
+ styleName: "higher",
+ tooltip: (
+
+ ),
+ })}
+
+
+ );
+
+ const barometerGaugePropertyView = (
+ <>
+
+ {children.barometerGaugeData.propertyView({ label: trans("chart.data") })}
+ {children.chartType.propertyView({label: trans("gaugeChart.chartType"), tooltip: trans("gaugeChart.chartTypeTooltip") })}
+ {children.echartsTitleConfig.getPropertyView()}
+ {children.echartsTitle.propertyView({ label: trans("gaugeChart.title"), tooltip: trans("echarts.titleTooltip") })}
+ {children.position_x.propertyView({ label: trans("gaugeChart.position_x"), tooltip: trans("echarts.positionChart_x_Tooltip") })}
+ {children.position_y.propertyView({ label: trans("gaugeChart.position_y"), tooltip: trans("echarts.positionChart_x_Tooltip") })}
+ {children.startAngle.propertyView({ label: trans("gaugeChart.startAngle"), tooltip: trans("echarts.startAngleTooltip") })}
+ {children.endAngle.propertyView({ label: trans("gaugeChart.endAngle"), tooltip: trans("echarts.endAngleTooltip") })}
+ {children.barometerPointerLength.propertyView({ label: trans("gaugeChart.pointerLength"), tooltip: trans("echarts.pointerLengthTooltip") })}
+ {children.barometerPointerWidth.propertyView({ label: trans("gaugeChart.pointerWidth"), tooltip: trans("echarts.pointerWidthTooltip") })}
+ {children.barometerPointer_Y.propertyView({ label: trans("gaugeChart.pointer_Y"), tooltip: trans("gaugeChart.pointer_Y_Tooltip") })}
+ {children.barometerPointerIcon.propertyView({ label: trans("gaugeChart.pointerIcon"), tooltip: trans("gaugeChart.pointerIconTooltip") })}
+ {children.tooltip.propertyView({ label: trans("gaugeChart.tooltip"), tooltip: trans("echarts.tooltipVisibilityTooltip") })}
+
+
+ {children.onEvent.propertyView()}
+
+
+ {children.chartStyle?.getPropertyView()}
+
+
+ {children.titleStyle?.getPropertyView()}
+
+
+ {children.labelStyle?.getPropertyView()}
+
+
+ {children.legendStyle?.getPropertyView()}
+
+
+ {children.axisLabelStyle?.getPropertyView()}
+
+
+ {children.axisLabelStyleOutline?.getPropertyView()}
+
+ {hiddenPropertyView(children)}
+
+ {children.barometerGaugeOption.propertyView({
+ label: trans("chart.echartsOptionLabel"),
+ styleName: "higher",
+ tooltip: (
+
+ ),
+ })}
+
+
+ );
+
+ const clockGaugePropertyView = (
+ <>
+
+ {children.clockGaugeData.propertyView({ label: trans("chart.data") })}
+ {children.chartType.propertyView({label: trans("gaugeChart.chartType"), tooltip: trans("gaugeChart.chartTypeTooltip") })}
+ {children.echartsTitleConfig.getPropertyView()}
+ {children.echartsTitle.propertyView({ label: trans("gaugeChart.title"), tooltip: trans("echarts.titleTooltip") })}
+ {children.radius.propertyView({ label: trans("gaugeChart.radius"), tooltip: trans("echarts.radiusTooltip") })}
+ {children.clockPointerIcon.propertyView({ label: trans("gaugeChart.pointerIcon"), tooltip: trans("gaugeChart.pointerIconTooltip") })}
+ {children.progressBarWidth.propertyView({ label: trans("gaugeChart.progressBarWidth"), tooltip: trans("echarts.pointerWidthTooltip") })}
+ {children.axisTickLength.propertyView({ label: trans("gaugeChart.axisTickLength"), tooltip: trans("echarts.axisTickLengthTooltip") })}
+ {children.axisTickWidth.propertyView({ label: trans("gaugeChart.axisTickWidth"), tooltip: trans("echarts.axisTickWidthTooltip") })}
+ {children.axisLabelDistance.propertyView({ label: trans("gaugeChart.axisLabelDistance"), tooltip: trans("echarts.axisLabelDistanceTooltip") })}
+ {children.axisTickColor.propertyView({ label: trans("gaugeChart.axisTickColor"), tooltip: trans("echarts.axisTickColorTooltip") })}
+
+
+ {children.onEvent.propertyView()}
+
+
+ {children.chartStyle?.getPropertyView()}
+
+
+ {children.titleStyle?.getPropertyView()}
+
+ {/**/}
+ {/* {children.labelStyle?.getPropertyView()}*/}
+ {/* */}
+ {/**/}
+ {/* {children.legendStyle?.getPropertyView()}*/}
+ {/* */}
+
+ {children.axisLabelStyle?.getPropertyView()}
+
+ {hiddenPropertyView(children)}
+
+ {children.clockGaugeOption.propertyView({
+ label: trans("chart.echartsOptionLabel"),
+ styleName: "higher",
+ tooltip: (
+
+ ),
+ })}
+
);
const getChatConfigByMode = (mode: string) => {
switch(mode) {
case "json":
- return jsonModePropertyView;
+ switch(children.chartType.getView()) {
+ case "default":
+ return jsonModePropertyView;
+ case "stageGauge":
+ return stageGaugePropertyView;
+ case "gradeGauge":
+ return gradeGaugePropertyView;
+ case "temperatureGauge":
+ return temperatureGaugePropertyView;
+ case "multiGauge":
+ return multiGaugePropertyView;
+ case "ringGauge":
+ return ringGaugePropertyView;
+ case "barometerGauge":
+ return barometerGaugePropertyView;
+ case "clockGauge":
+ return clockGaugePropertyView;
+ default:
+ return jsonModePropertyView;
+ }
}
}
return getChatConfigByMode(children.mode.getView())
diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts
index e2c5fa3107..971775100c 100644
--- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts
+++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts
@@ -14,6 +14,8 @@ import Big from "big.js";
import { googleMapsApiUrl } from "../chartComp/chartConfigs/chartUrls";
import opacityToHex from "../../util/opacityToHex";
import parseBackground from "../../util/gradientBackgroundColor";
+import {ba} from "@fullcalendar/core/internal-common";
+import {chartStyleWrapper, styleWrapper} from "../../util/styleWrapper";
export function transformData(
originData: JSONObject[],
@@ -135,31 +137,23 @@ export function getEchartsConfig(
chartSize?: ChartSize,
theme?: any,
): EChartsOptionWithMap {
-
if (props.mode === "json") {
- let opt={
+
+ const basic={
"title": {
"text": props.echartsTitle,
'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom',
"left":props.echartsTitleConfig.top,
"textStyle": {
- "fontFamily": props?.titleStyle?.chartFontFamily || theme?.titleStyle?.fontFamily,
- "fontSize": props?.titleStyle?.chartTextSize || theme?.titleStyle?.fontSize || 18,
- "fontWeight": props?.titleStyle?.chartTextWeight || theme?.titleStyle?.fontWeight,
- "color": props?.titleStyle?.chartTextColor || theme?.titleStyle?.fontColor || "#000000",
- "fontStyle": props?.titleStyle?.chartFontStyle || theme?.titleStyle?.fontStyle,
- "textShadowColor": props?.titleStyle?.chartShadowColor || theme?.titleStyle?.shadowColor,
- "textShadowBlur": props?.titleStyle?.chartBoxShadow?.split('px')[0] || theme?.titleStyle?.boxShadow?.split('px')[0],
- "textShadowOffsetX": props?.titleStyle?.chartBoxShadow?.split('px')[1] || theme?.titleStyle?.boxShadow?.split('px')[1],
- "textShadowOffsetY": props?.titleStyle?.chartBoxShadow?.split('px')[2] || theme?.titleStyle?.boxShadow?.split('px')[2]
- },
+ ...styleWrapper(props?.titleStyle, theme?.titleStyle)
+ }
},
"backgroundColor": parseBackground( props?.chartStyle?.background || theme?.chartStyle?.backgroundColor || "#FFFFFF"),
"tooltip": props.tooltip&&{
"trigger": "item",
"formatter": "{a} ();
+ const containerRef = useRef(null);
const [chartSize, setChartSize] = useState();
const firstResize = useRef(true);
const theme = useContext(ThemeContext);
@@ -142,44 +143,47 @@ GraphChartTmpComp = withViewFn(GraphChartTmpComp, (comp) => {
}, [onUIEvent]);
const echartsConfigChildren = _.omit(comp.children, echartsConfigOmitChildren);
+ const childrenProps = childrenToProps(echartsConfigChildren);
const option = useMemo(() => {
return getEchartsConfig(
- childrenToProps(echartsConfigChildren) as ToViewReturn,
+ childrenProps as ToViewReturn,
chartSize,
- theme?.theme?.components?.candleStickChart || {},
+ themeConfig
);
- }, [chartSize, ...Object.values(echartsConfigChildren)]);
+ }, [theme, childrenProps, chartSize, ...Object.values(echartsConfigChildren)]);
useEffect(() => {
comp.children.mapInstance.dispatch(changeValueAction(null, false))
if(comp.children.mapInstance.value) return;
}, [option])
+ useResizeDetector({
+ targetRef: containerRef,
+ onResize: ({width, height}) => {
+ if (width && height) {
+ setChartSize({ w: width, h: height });
+ }
+ if (!firstResize.current) {
+ // ignore the first resize, which will impact the loading animation
+ echartsCompRef.current?.getEchartsInstance().resize();
+ } else {
+ firstResize.current = false;
+ }
+ }
+ })
+
return (
- {
- if (w && h) {
- setChartSize({ w: w, h: h });
- }
- if (!firstResize.current) {
- // ignore the first resize, which will impact the loading animation
- echartsCompRef.current?.getEchartsInstance().resize();
- } else {
- firstResize.current = false;
- }
- }}
- >
+
(echartsCompRef.current = e)}
- style={{ height: "100%" }}
- notMerge
- lazyUpdate
- opts={{ locale: getEchartsLocale() }}
- option={option}
- theme={mode !== 'map' ? themeConfig : undefined}
- mode={mode}
- />
-
+ ref={(e) => (echartsCompRef.current = e)}
+ style={{ height: "100%" }}
+ notMerge
+ lazyUpdate
+ opts={{ locale: getEchartsLocale() }}
+ option={option}
+ mode={mode}
+ />
+
);
});
diff --git a/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartConstants.tsx
index ae000e6f7f..ba152c24a8 100644
--- a/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartConstants.tsx
+++ b/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartConstants.tsx
@@ -16,8 +16,12 @@ import {
uiChildren,
clickEvent,
styleControl,
- EchartsStyle
+ EchartsStyle,
+ EchartDefaultChartStyle,
+ EchartDefaultTextStyle,
+ toArray
} from "lowcoder-sdk";
+
import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core";
import { BarChartConfig } from "../chartComp/chartConfigs/barChartConfig";
import { XAxisConfig, YAxisConfig } from "../chartComp/chartConfigs/cartesianAxisConfig";
@@ -27,6 +31,8 @@ import { EchartsLabelConfig } from "../chartComp/chartConfigs/echartsLabelConfig
import { LineChartConfig } from "../chartComp/chartConfigs/lineChartConfig";
import { PieChartConfig } from "../chartComp/chartConfigs/pieChartConfig";
import { ScatterChartConfig } from "../chartComp/chartConfigs/scatterChartConfig";
+import { EchartsTitleVerticalConfig } from "../chartComp/chartConfigs/echartsTitleVerticalConfig";
+import { EchartsTitleConfig } from "comps/chartComp/chartConfigs/echartsTitleConfig";
import { SeriesListComp } from "../chartComp/seriesComp";
import { EChartsOption } from "echarts";
import { i18nObjs, trans } from "i18n/comps";
@@ -248,19 +254,32 @@ export const chartUiModeChildren = {
};
let chartJsonModeChildren: any = {
+ echartsCategories: jsonControl(toArray, i18nObjs.defaultGraphChartOption.categories),
+ echartsLinks: jsonControl(toArray, i18nObjs.defaultGraphChartOption.links),
+ echartsNodes: jsonControl(toArray, i18nObjs.defaultGraphChartOption.nodes),
echartsOption: jsonControl(toObject, i18nObjs.defaultGraphChartOption),
echartsTitle: withDefault(StringControl, trans("graphChart.defaultTitle")),
echartsLegendConfig: EchartsLegendConfig,
echartsLabelConfig: EchartsLabelConfig,
+ echartsTitleVerticalConfig: EchartsTitleVerticalConfig,
+ echartsTitleConfig:EchartsTitleConfig,
echartsConfig: EchartsOptionComp,
- // style: styleControl(EchartsStyle, 'style'),
+ arrowSize:withDefault(NumberControl,trans('graphChart.defaultArrowSize')),
+ pointSize:withDefault(NumberControl,trans('graphChart.defaultPointSize')),
+ repulsion:withDefault(NumberControl,trans('graphChart.defaultRepulsion')),
+ gravity:withDefault(NumberControl,trans('graphChart.defaultGravity')),
+ lineLength:withDefault(NumberControl,trans('graphChart.defaultLineLength')),
+ lineWidth:withDefault(NumberControl,trans('graphChart.defaultLineWidth')),
+ curveness:withDefault(NumberControl,trans('graphChart.defaultCurveness')),
tooltip: withDefault(BoolControl, true),
+ arrowFlag: withDefault(BoolControl, true),
legendVisibility: withDefault(BoolControl, true),
}
-if (EchartsStyle) {
+if (EchartDefaultChartStyle && EchartDefaultTextStyle) {
chartJsonModeChildren = {
...chartJsonModeChildren,
- style: styleControl(EchartsStyle, 'style'),
+ chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'),
+ titleStyle: styleControl(EchartDefaultTextStyle, 'titleStyle'),
}
}
diff --git a/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartPropertyView.tsx
index ba9ebbebc6..51ab7e517b 100644
--- a/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartPropertyView.tsx
+++ b/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartPropertyView.tsx
@@ -16,6 +16,35 @@ export function graphChartPropertyView(
const jsonModePropertyView = (
<>
+ {children.echartsCategories.propertyView({ label: trans("graphChart.categories") })}
+ {children.echartsLinks.propertyView({ label: trans("graphChart.links") })}
+ {children.echartsNodes.propertyView({ label: trans("graphChart.nodes") })}
+ {children.echartsTitle.propertyView({ label: trans("graphChart.title"), tooltip: trans("echarts.titleTooltip") })}
+ {children.echartsTitleConfig.getPropertyView()}
+ {children.echartsTitleVerticalConfig.getPropertyView()}
+
+ {children.arrowFlag.getView() && children.arrowSize.propertyView({ label: trans("graphChart.arrowSize"), tooltip: trans("graphChart.arrowSizeTooltip") })}
+ {children.pointSize.propertyView({ label: trans("graphChart.pointSize"), tooltip: trans("graphChart.pointSizeTooltip") })}
+ {children.repulsion.propertyView({ label: trans("graphChart.repulsion"), tooltip: trans("graphChart.repulsionTooltip") })}
+ {children.gravity.propertyView({ label: trans("graphChart.gravity"), tooltip: trans("graphChart.gravityTooltip") })}
+ {children.lineLength.propertyView({ label: trans("graphChart.lineLength"), tooltip: trans("graphChart.lineLengthTooltip") })}
+ {children.lineWidth.propertyView({ label: trans("graphChart.lineWidth"), tooltip: trans("graphChart.lineWidthTooltip") })}
+ {children.curveness.propertyView({ label: trans("graphChart.curveness"), tooltip: trans("graphChart.curvenessTooltip") })}
+
+ {children.arrowFlag.propertyView({label: trans("graphChart.arrowFlag"), tooltip: trans("graphChart.arrowFlagTooltip") })}
+ {children.tooltip.propertyView({label: trans("graphChart.tooltip"), tooltip: trans("graphChart.tooltipTooltip") })}
+
+
+ {children.onEvent.propertyView()}
+
+
+ {children.chartStyle?.getPropertyView()}
+
+
+ {children.titleStyle?.getPropertyView()}
+
+ {hiddenPropertyView(children)}
+
{children.echartsOption.propertyView({
label: trans("chart.echartsOptionLabel"),
styleName: "higher",
@@ -31,16 +60,7 @@ export function graphChartPropertyView(
),
})}
- {children.echartsTitle.propertyView({ label: trans("graphChart.title") })}
- {children.tooltip.propertyView({label: trans("graphChart.tooltip")})}
-
- {children.onEvent.propertyView()}
-
-
- {children.style?.getPropertyView()}
-
- {hiddenPropertyView(children)}
);
diff --git a/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartUtils.ts b/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartUtils.ts
index a75b6a8c22..3ebe7ae531 100644
--- a/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartUtils.ts
+++ b/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartUtils.ts
@@ -12,6 +12,8 @@ import { chartColorPalette, isNumeric, JSONObject, loadScript } from "lowcoder-s
import { calcXYConfig } from "comps/chartComp/chartConfigs/cartesianAxisConfig";
import Big from "big.js";
import { googleMapsApiUrl } from "../chartComp/chartConfigs/chartUrls";
+import parseBackground from "../../util/gradientBackgroundColor";
+import {chartStyleWrapper, styleWrapper} from "../../util/styleWrapper";
export function transformData(
originData: JSONObject[],
@@ -134,32 +136,48 @@ export function getEchartsConfig(
theme?: any,
): EChartsOptionWithMap {
if (props.mode === "json") {
- let opt={
- "title": {
- "text": props.echartsTitle,
- 'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom',
- "left":"center"
- },
- "backgroundColor": props?.style?.background || theme?.style?.background,
- "color": props.echartsOption.data?.map(data => data.color),
- "tooltip": props.tooltip&& {
- "trigger": "item"
- },
- 'series': [
- {
- "type": "graph",
- "layout": "force",
- "force": {
- "repulsion": 100,
- "gravity": 0.1,
- "edgeLength": 100
- },
- 'categories': props.echartsOption.categories,
- 'links': props.echartsOption.links,
- 'nodes': props.echartsOption.nodes,
+ let opt= props?.echartsOption && {
+ title: {
+ text: props.echartsTitle,
+ top: props.echartsTitleVerticalConfig.top,
+ left:props.echartsTitleConfig.top,
+ textStyle: {
+ ...styleWrapper(props?.titleStyle, theme?.titleStyle)
}
- ]
-}
+ },
+ backgroundColor: parseBackground( props?.chartStyle?.background || theme?.chartStyle?.backgroundColor || "#FFFFFF"),
+ "tooltip": props.tooltip&& {
+ "trigger": "item"
+ },
+ 'series': [
+ {
+
+ "type": "graph",
+ "layout": "force",
+ 'categories': props?.echartsCategories.length !== 0 && props?.echartsCategories || props.echartsOption.categories,
+ 'links': props?.echartsLinks.length !== 0 && props?.echartsLinks || props.echartsOption.links,
+ "force": {
+ "repulsion": props.repulsion,
+ "gravity": props?.gravity,
+ "edgeLength": props?.lineLength
+ },
+ edgeSymbol: ['', props?.arrowFlag ? 'arrow' : ''],
+ edgeSymbolSize: [0, props?.arrowSize],
+ symbolSize: props?.pointSize,
+ lineStyle: {
+ color: props.echartsOption?.color?.lineColor || "#00000033",
+ ...chartStyleWrapper(props?.chartStyle,theme?.chartStyle),
+ width: props?.lineWidth || 1,
+ curveness: props?.curveness
+ },
+ 'nodes': props?.echartsNodes.length !==0 && props?.echartsNodes || props.echartsOption.nodes,
+ itemStyle: {
+ "color": props.echartsOption?.color?.pointColor || "#0000ff",
+ ...chartStyleWrapper(props?.chartStyle,theme?.chartStyle),
+ },
+ }
+ ],
+ }
return props.echartsOption ? opt : {};
}
diff --git a/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartComp.tsx b/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartComp.tsx
index 43fdfc045e..21064ba13d 100644
--- a/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartComp.tsx
+++ b/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartComp.tsx
@@ -10,7 +10,7 @@ import { heatmapChartChildrenMap, ChartSize, getDataKeys } from "./heatmapChartC
import { heatmapChartPropertyView } from "./heatmapChartPropertyView";
import _ from "lodash";
import { useContext, useEffect, useMemo, useRef, useState } from "react";
-import ReactResizeDetector from "react-resize-detector";
+import { useResizeDetector } from "react-resize-detector";
import ReactECharts from "../chartComp/reactEcharts";
import {
childrenToProps,
@@ -56,6 +56,7 @@ HeatmapChartTmpComp = withViewFn(HeatmapChartTmpComp, (comp) => {
const onUIEvent = comp.children.onUIEvent.getView();
const onEvent = comp.children.onEvent.getView();
const echartsCompRef = useRef();
+ const containerRef = useRef(null);
const [chartSize, setChartSize] = useState();
const firstResize = useRef(true);
const theme = useContext(ThemeContext);
@@ -141,44 +142,48 @@ HeatmapChartTmpComp = withViewFn(HeatmapChartTmpComp, (comp) => {
}, [onUIEvent]);
const echartsConfigChildren = _.omit(comp.children, echartsConfigOmitChildren);
+ const childrenProps = childrenToProps(echartsConfigChildren);
const option = useMemo(() => {
return getEchartsConfig(
- childrenToProps(echartsConfigChildren) as ToViewReturn,
+ childrenProps as ToViewReturn,
chartSize,
- theme?.theme?.components?.candleStickChart || {},
+ themeConfig
);
- }, [chartSize, ...Object.values(echartsConfigChildren)]);
+ }, [theme, childrenProps, chartSize, ...Object.values(echartsConfigChildren)]);
useEffect(() => {
comp.children.mapInstance.dispatch(changeValueAction(null, false))
if(comp.children.mapInstance.value) return;
}, [option])
+ useResizeDetector({
+ targetRef: containerRef,
+ onResize: ({width, height}) => {
+ if (width && height) {
+ setChartSize({ w: width, h: height });
+ }
+ if (!firstResize.current) {
+ // ignore the first resize, which will impact the loading animation
+ echartsCompRef.current?.getEchartsInstance().resize();
+ } else {
+ firstResize.current = false;
+ }
+ }
+ })
+
return (
- {
- if (w && h) {
- setChartSize({ w: w, h: h });
- }
- if (!firstResize.current) {
- // ignore the first resize, which will impact the loading animation
- echartsCompRef.current?.getEchartsInstance().resize();
- } else {
- firstResize.current = false;
- }
- }}
- >
+
(echartsCompRef.current = e)}
- style={{ height: "100%" }}
- notMerge
- lazyUpdate
- opts={{ locale: getEchartsLocale() }}
- option={option}
- theme={mode !== 'map' ? themeConfig : undefined}
- mode={mode}
- />
-
+ ref={(e) => (echartsCompRef.current = e)}
+ style={{ height: "100%" }}
+ notMerge
+ lazyUpdate
+ opts={{ locale: getEchartsLocale() }}
+ option={option}
+ theme={mode !== 'map' ? themeConfig : undefined}
+ mode={mode}
+ />
+
);
});
diff --git a/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartConstants.tsx
index 51ccd46da3..a04383845c 100644
--- a/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartConstants.tsx
+++ b/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartConstants.tsx
@@ -16,7 +16,9 @@ import {
uiChildren,
clickEvent,
styleControl,
- EchartsStyle
+ EchartDefaultTextStyle,
+ EchartDefaultChartStyle,
+ toArray
} from "lowcoder-sdk";
import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core";
import { BarChartConfig } from "../chartComp/chartConfigs/barChartConfig";
@@ -25,12 +27,16 @@ import { LegendConfig } from "../chartComp/chartConfigs/legendConfig";
import { EchartsLegendConfig } from "../chartComp/chartConfigs/echartsLegendConfig";
import { EchartsLabelConfig } from "../chartComp/chartConfigs/echartsLabelConfig";
import { LineChartConfig } from "../chartComp/chartConfigs/lineChartConfig";
+import { EchartsTitleVerticalConfig } from "../chartComp/chartConfigs/echartsTitleVerticalConfig";
+import { EchartsTitleConfig } from "comps/chartComp/chartConfigs/echartsTitleConfig";
import { PieChartConfig } from "../chartComp/chartConfigs/pieChartConfig";
import { ScatterChartConfig } from "../chartComp/chartConfigs/scatterChartConfig";
import { SeriesListComp } from "../chartComp/seriesComp";
import { EChartsOption } from "echarts";
import { i18nObjs, trans } from "i18n/comps";
import { HeatmapChartConfig } from "comps/chartComp/chartConfigs/heatmapChartConfig";
+import {EchartsLegendOrientConfig} from "../chartComp/chartConfigs/echartsLegendOrientConfig";
+import {EchartsLegendAlignConfig} from "../chartComp/chartConfigs/echartsLegendAlignConfig";
export const ChartTypeOptions = [
{
@@ -248,19 +254,42 @@ export const chartUiModeChildren = {
};
let chartJsonModeChildren: any = {
+ echartsData: jsonControl(toArray, i18nObjs.defaultHeatmapChartOption.data),
+ echartsDataX: jsonControl(toArray, i18nObjs.defaultHeatmapChartOption.xAxis),
+ echartsDataY: jsonControl(toArray, i18nObjs.defaultHeatmapChartOption.yAxis),
+ echartsColor: jsonControl(toArray, i18nObjs.defaultHeatmapChartOption.color),
echartsOption: jsonControl(toObject, i18nObjs.defaultHeatmapChartOption),
echartsTitle: withDefault(StringControl, trans("heatmapChart.defaultTitle")),
echartsLegendConfig: EchartsLegendConfig,
echartsLabelConfig: EchartsLabelConfig,
+ echartsTitleVerticalConfig: EchartsTitleVerticalConfig,
+ echartsTitleConfig:EchartsTitleConfig,
+ echartsLegendOrientConfig: EchartsLegendOrientConfig,
+ echartsLegendAlignConfig: EchartsLegendAlignConfig,
echartsConfig: EchartsOptionComp,
// style: styleControl(EchartsStyle, 'style'),
+
+ left:withDefault(NumberControl,trans('heatmapChart.defaultLeft')),
+ right:withDefault(NumberControl,trans('heatmapChart.defaultRight')),
+ top:withDefault(NumberControl,trans('heatmapChart.defaultTop')),
+ bottom:withDefault(NumberControl,trans('heatmapChart.defaultBottom')),
+ min:withDefault(NumberControl,trans('heatmapChart.defaultMin')),
+ max:withDefault(NumberControl,trans('heatmapChart.defaultMax')),
+
tooltip: withDefault(BoolControl, true),
- legendVisibility: withDefault(BoolControl, true),
+ xAxisVisibility: withDefault(BoolControl, true),
+ yAxisVisibility: withDefault(BoolControl, true),
+ labelVisibility: withDefault(BoolControl, true),
}
-if (EchartsStyle) {
+if (EchartDefaultChartStyle && EchartDefaultTextStyle) {
chartJsonModeChildren = {
...chartJsonModeChildren,
- style: styleControl(EchartsStyle, 'style'),
+ chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'),
+ titleStyle: styleControl(EchartDefaultTextStyle, 'titleStyle'),
+ labelStyle: styleControl(EchartDefaultTextStyle, 'labelStyle'),
+ xAxisStyle: styleControl(EchartDefaultTextStyle, 'xAxisStyle'),
+ yAxisStyle: styleControl(EchartDefaultTextStyle, 'yAxisStyle'),
+ visualMapStyle: styleControl(EchartDefaultTextStyle, 'visualMapStyle'),
}
}
diff --git a/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartPropertyView.tsx
index c7d350bfc3..aefed93a75 100644
--- a/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartPropertyView.tsx
+++ b/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartPropertyView.tsx
@@ -16,31 +16,67 @@ export function heatmapChartPropertyView(
const jsonModePropertyView = (
<>
- {children.echartsOption.propertyView({
- label: trans("chart.echartsOptionLabel"),
- styleName: "higher",
- tooltip: (
-
- ),
- })}
- {children.echartsTitle.propertyView({ label: trans("heatmapChart.title") })}
- {children.tooltip.propertyView({label: trans("heatmapChart.tooltip")})}
+ {children.echartsData.propertyView({ label: trans("chart.data") })}
+ {children.echartsDataX.propertyView({ label: trans("heatmapChart.xAxisData") })}
+ {children.echartsDataY.propertyView({ label: trans("heatmapChart.yAxisData") })}
+ {children.echartsColor.propertyView({ label: trans("heatmapChart.color") })}
+ {children.echartsTitleConfig.getPropertyView()}
+ {children.echartsTitleVerticalConfig.getPropertyView()}
+ {children.echartsLegendAlignConfig.getPropertyView()}
+ {children.echartsLegendConfig.getPropertyView()}
+ {children.echartsLegendOrientConfig.getPropertyView()}
+ {children.echartsTitle.propertyView({ label: trans("heatmapChart.title"), tooltip: trans("echarts.titleTooltip") })}
+ {children.left.propertyView({ label: trans("heatmapChart.left"), tooltip: trans("echarts.leftTooltip") })}
+ {children.right.propertyView({ label: trans("heatmapChart.right"), tooltip: trans("echarts.rightTooltip") })}
+ {children.top.propertyView({ label: trans("heatmapChart.top"), tooltip: trans("echarts.topTooltip") })}
+ {children.bottom.propertyView({ label: trans("heatmapChart.bottom"), tooltip: trans("echarts.bottomTooltip") })}
+ {children.min.propertyView({ label: trans("heatmapChart.min"), tooltip: trans("echarts.minTooltip") })}
+ {children.max.propertyView({ label: trans("heatmapChart.max"), tooltip: trans("echarts.maxTooltip") })}
+
+ {children.xAxisVisibility.propertyView({label: trans("heatmapChart.xAxisVisibility"), tooltip: trans("heatmapChart.xAxisVisibilityTooltip")})}
+ {children.yAxisVisibility.propertyView({label: trans("heatmapChart.yAxisVisibility"), tooltip: trans("heatmapChart.yAxisVisibilityTooltip")})}
+ {children.labelVisibility.propertyView({label: trans("heatmapChart.labelVisibility"), tooltip: trans("echarts.labelVisibilityTooltip")})}
+ {children.tooltip.propertyView({label: trans("heatmapChart.tooltip"), tooltip: trans("echarts.tooltipTooltip")})}
{children.onEvent.propertyView()}
-
- {children.style?.getPropertyView()}
+
+ {children.chartStyle?.getPropertyView()}
+
+
+ {children.titleStyle?.getPropertyView()}
+
+
+ {children.labelStyle?.getPropertyView()}
+
+
+ {children.xAxisStyle?.getPropertyView()}
+
+
+ {children.yAxisStyle?.getPropertyView()}
+
+
+ {children.visualMapStyle?.getPropertyView()}
{hiddenPropertyView(children)}
+
+ {children.echartsOption.propertyView({
+ label: trans("chart.echartsOptionLabel"),
+ styleName: "higher",
+ tooltip: (
+
+ ),
+ })}
+
);
diff --git a/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartUtils.ts b/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartUtils.ts
index 43bd48e037..80b04f59d8 100644
--- a/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartUtils.ts
+++ b/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartUtils.ts
@@ -12,6 +12,8 @@ import { chartColorPalette, isNumeric, JSONObject, loadScript } from "lowcoder-s
import { calcXYConfig } from "comps/chartComp/chartConfigs/cartesianAxisConfig";
import Big from "big.js";
import { googleMapsApiUrl } from "../chartComp/chartConfigs/chartUrls";
+import {chartStyleWrapper, styleWrapper} from "../../util/styleWrapper";
+import parseBackground from "../../util/gradientBackgroundColor";
export function transformData(
originData: JSONObject[],
@@ -65,29 +67,29 @@ export function isAxisChart(type: CharOptionCompType) {
}
export function getSeriesConfig(props: EchartsConfigProps) {
- const visibleSeries = props.series.filter((s) => !s.getView().hide);
+ const visibleSeries = props?.series.filter((s) => !s.getView().hide);
const seriesLength = visibleSeries.length;
return visibleSeries.map((s, index) => {
- if (isAxisChart(props.chartConfig.type)) {
+ if (isAxisChart(props?.chartConfig.type)) {
let encodeX: string, encodeY: string;
- const horizontalX = props.xAxisDirection === "horizontal";
- let itemStyle = props.chartConfig.itemStyle;
+ const horizontalX = props?.xAxisDirection === "horizontal";
+ let itemStyle = props?.chartConfig.itemStyle;
// FIXME: need refactor... chartConfig returns a function with paramters
- if (props.chartConfig.type === "bar") {
+ if (props?.chartConfig.type === "bar") {
// barChart's border radius, depend on x-axis direction and stack state
const borderRadius = horizontalX ? [2, 2, 0, 0] : [0, 2, 2, 0];
- if (props.chartConfig.stack && index === visibleSeries.length - 1) {
+ if (props?.chartConfig.stack && index === visibleSeries.length - 1) {
itemStyle = { ...itemStyle, borderRadius: borderRadius };
- } else if (!props.chartConfig.stack) {
+ } else if (!props?.chartConfig.stack) {
itemStyle = { ...itemStyle, borderRadius: borderRadius };
}
}
if (horizontalX) {
- encodeX = props.xAxisKey;
+ encodeX = props?.xAxisKey;
encodeY = s.getView().columnName;
} else {
encodeX = s.getView().columnName;
- encodeY = props.xAxisKey;
+ encodeY = props?.xAxisKey;
}
return {
name: s.getView().seriesName,
@@ -102,24 +104,24 @@ export function getSeriesConfig(props: EchartsConfigProps) {
y: encodeY,
},
// each type of chart's config
- ...props.chartConfig,
+ ...props?.chartConfig,
itemStyle: itemStyle,
label: {
- ...props.chartConfig.label,
+ ...props?.chartConfig.label,
...(!horizontalX && { position: "outside" }),
},
};
} else {
// pie
- const radiusAndCenter = getPieRadiusAndCenter(seriesLength, index, props.chartConfig);
+ const radiusAndCenter = getPieRadiusAndCenter(seriesLength, index, props?.chartConfig);
return {
- ...props.chartConfig,
+ ...props?.chartConfig,
radius: radiusAndCenter.radius,
center: radiusAndCenter.center,
name: s.getView().seriesName,
selectedMode: "single",
encode: {
- itemName: props.xAxisKey,
+ itemName: props?.xAxisKey,
value: s.getView().columnName,
},
};
@@ -127,61 +129,86 @@ export function getSeriesConfig(props: EchartsConfigProps) {
});
}
-// https://echarts.apache.org/en/option.html
export function getEchartsConfig(
props: EchartsConfigProps,
chartSize?: ChartSize,
theme?: any,
): EChartsOptionWithMap {
- if (props.mode === "json") {
- let opt={
- "title": {
- "text": props.echartsTitle,
- 'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom',
- "left":"center"
- },
- "backgroundColor": props?.style?.background || theme?.style?.background,
- "color": props.echartsOption.data?.map(data => data.color),
- "tooltip": props.tooltip&&{
- "position": "top"
- },
- "grid": {
- "height": "50%",
- "top": "10%"
- },
- "visualMap": {
- "min": 0,
- "max": 100,
- "calculable": true,
- "orient": "horizontal",
- "left": "center",
- "bottom": "15%"
- },
- "legend": {
- "data": ["Heatmap"],
- "left": "left"
- },
- 'xAxis': {
- "type": "category",
- 'data':props.echartsOption.xAxis.data
+ if (props?.mode === "json") {
+ let opt= {
+ title: {
+ text: props?.echartsTitle,
+ top: props?.echartsTitleVerticalConfig.top,
+ left: props?.echartsTitleConfig.top,
+ textStyle: {
+ ...styleWrapper(props?.titleStyle, theme?.titleStyle)
+ }
+ },
+ backgroundColor: parseBackground( props?.chartStyle?.background || theme?.chartStyle?.backgroundColor || "#FFFFFF"),
+ tooltip: props?.tooltip && {
+ position: "top"
+ },
+ grid: {
+ left: `${props?.left}%`,
+ right: `${props?.right}%`,
+ bottom: `${props?.bottom}%`,
+ top: `${props?.top}%`,
+ },
+ visualMap: {
+ min: props?.min,
+ max: props?.max,
+ calculable: true,
+ top: props?.echartsLegendConfig.top,
+ left: props?.echartsLegendAlignConfig.left,
+ orient: props?.echartsLegendOrientConfig.orient,
+ bottom: "5%",
+ inRange: {
+ color: props?.echartsOption?.color || ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8']
+ },
+ textStyle: {
+ ...styleWrapper(props?.visualMapStyle, theme?.visualMapStyle, 13),
+ }
+ },
+ xAxis: {
+ type: "category",
+ data: props?.echartsData?.xAxis || props?.echartsOption && props?.echartsOption.xAxis,
+ axisLabel: {
+ ...styleWrapper(props?.xAxisStyle, theme?.xAxisStyle, 13),
+ },
+ splitArea: {
+ show: props?.xAxisVisibility
+ }
},
- 'yAxis': {
- "type": "category",
- data: props.echartsOption.yAxis.data
+ yAxis: {
+ type: "category",
+ data: props?.echartsData?.yAxis || props?.echartsOption && props?.echartsOption.yAxis,
+ axisLabel: {
+ ...styleWrapper(props?.yAxisStyle, theme?.yAxisStyle, 13),
+ },
+ splitArea: {
+ show: props?.yAxisVisibility
+ }
},
- 'series': [
+ series: [
{
- 'name': 'Heatmap',
- 'type': 'heatmap',
- 'data':props.echartsOption.data
- }
- ]
-}
- return props.echartsOption ? opt : {};
+ name: 'Heatmap',
+ type: 'heatmap',
+ data: props?.echartsData.length !== 0 && props?.echartsData || props?.echartsOption && props?.echartsOption.data,
+ label: {
+ show: props?.labelVisibility,
+ ...styleWrapper(props?.labelStyle, theme?.labelStyle, 12),
+ },
+ itemStyle: {
+ ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle)
+ }
+ }
+ ]
+ }
+ return props?.echartsOption ? opt : {};
}
- if(props.mode === "map") {
+ if(props?.mode === "map") {
const {
mapZoomLevel,
mapCenterLat,
@@ -203,41 +230,41 @@ export function getEchartsConfig(
}
}
// axisChart
- const axisChart = isAxisChart(props.chartConfig.type);
+ const axisChart = isAxisChart(props?.chartConfig.type);
const gridPos = {
left: 20,
- right: props.legendConfig.left === "right" ? "10%" : 20,
+ right: props?.legendConfig.left === "right" ? "10%" : 20,
top: 50,
bottom: 35,
};
let config: EChartsOptionWithMap = {
- title: { text: props.title, left: "center" },
+ title: { text: props?.title, left: "center" },
tooltip: {
confine: true,
trigger: axisChart ? "axis" : "item",
},
- legend: props.legendConfig,
+ legend: props?.legendConfig,
grid: {
...gridPos,
containLabel: true,
},
};
- if (props.data.length <= 0) {
+ if (props?.data.length <= 0) {
// no data
return {
...config,
...(axisChart ? noDataAxisConfig : noDataPieChartConfig),
};
}
- const yAxisConfig = props.yConfig();
- const seriesColumnNames = props.series
+ const yAxisConfig = props?.yConfig();
+ const seriesColumnNames = props?.series
.filter((s) => !s.getView().hide)
.map((s) => s.getView().columnName);
// y-axis is category and time, data doesn't need to aggregate
const transformedData =
yAxisConfig.type === "category" || yAxisConfig.type === "time"
- ? props.data
- : transformData(props.data, props.xAxisKey, seriesColumnNames);
+ ? props?.data
+ : transformData(props?.data, props?.xAxisKey, seriesColumnNames);
config = {
...config,
dataset: [
@@ -265,10 +292,10 @@ export function getEchartsConfig(
};
}
const finalXyConfig = calcXYConfig(
- props.xConfig,
+ props?.xConfig,
yAxisConfig,
- props.xAxisDirection,
- transformedData.map((d) => d[props.xAxisKey]),
+ props?.xAxisDirection,
+ transformedData.map((d) => d[props?.xAxisKey]),
chartRealSize
);
config = {
diff --git a/client/packages/lowcoder-comps/src/comps/imageEditorComp/index.tsx b/client/packages/lowcoder-comps/src/comps/imageEditorComp/index.tsx
index 70d2bf29bf..311a96eaf1 100644
--- a/client/packages/lowcoder-comps/src/comps/imageEditorComp/index.tsx
+++ b/client/packages/lowcoder-comps/src/comps/imageEditorComp/index.tsx
@@ -13,7 +13,7 @@ import {
stringExposingStateControl,
} from "lowcoder-sdk";
import { useRef } from "react";
-import ReactResizeDetector from "react-resize-detector";
+import { useResizeDetector } from "react-resize-detector";
import _ from "lodash";
import { RecordConstructorToView } from "lowcoder-core";
import { Container, customTheme, EmbeddedButton, saveEvent } from "./imageEditorConstants";
@@ -70,6 +70,12 @@ const ContainerImageEditor = (props: RecordConstructorToView
props.dataURI.onChange(dataURL);
props.data.onChange(dataURL.split(",")[1]);
};
+
+ useResizeDetector({
+ targetRef: conRef,
+ onResize,
+ });
+
return (
>
{props.buttonText.value}
-
-
-
-
+
+
);
};
diff --git a/client/packages/lowcoder-comps/src/comps/line3dChartComp/images/default_ambient_cubemap_texture.hdr b/client/packages/lowcoder-comps/src/comps/line3dChartComp/images/default_ambient_cubemap_texture.hdr
new file mode 100644
index 0000000000..4d53b3609b
Binary files /dev/null and b/client/packages/lowcoder-comps/src/comps/line3dChartComp/images/default_ambient_cubemap_texture.hdr differ
diff --git a/client/packages/lowcoder-comps/src/comps/line3dChartComp/images/default_base_texture.jpg b/client/packages/lowcoder-comps/src/comps/line3dChartComp/images/default_base_texture.jpg
new file mode 100644
index 0000000000..c4a5d335cf
Binary files /dev/null and b/client/packages/lowcoder-comps/src/comps/line3dChartComp/images/default_base_texture.jpg differ
diff --git a/client/packages/lowcoder-comps/src/comps/line3dChartComp/images/default_environment.jpg b/client/packages/lowcoder-comps/src/comps/line3dChartComp/images/default_environment.jpg
new file mode 100644
index 0000000000..314999840a
Binary files /dev/null and b/client/packages/lowcoder-comps/src/comps/line3dChartComp/images/default_environment.jpg differ
diff --git a/client/packages/lowcoder-comps/src/comps/line3dChartComp/images/default_height_texture.jpg b/client/packages/lowcoder-comps/src/comps/line3dChartComp/images/default_height_texture.jpg
new file mode 100644
index 0000000000..9f8dcdf315
Binary files /dev/null and b/client/packages/lowcoder-comps/src/comps/line3dChartComp/images/default_height_texture.jpg differ
diff --git a/client/packages/lowcoder-comps/src/comps/line3dChartComp/line3dChartComp.tsx b/client/packages/lowcoder-comps/src/comps/line3dChartComp/line3dChartComp.tsx
new file mode 100644
index 0000000000..14ce13539b
--- /dev/null
+++ b/client/packages/lowcoder-comps/src/comps/line3dChartComp/line3dChartComp.tsx
@@ -0,0 +1,286 @@
+import {
+ changeChildAction,
+ changeValueAction,
+ CompAction,
+ CompActionTypes,
+ wrapChildAction,
+} from "lowcoder-core";
+import { AxisFormatterComp, EchartsAxisType } from "../basicChartComp/chartConfigs/cartesianAxisConfig";
+import { line3dChartChildrenMap, ChartSize, getDataKeys } from "./line3dChartConstants";
+import { line3dChartPropertyView } from "./line3dChartPropertyView";
+import _ from "lodash";
+import { useContext, useEffect, useMemo, useRef, useState } from "react";
+import { useResizeDetector } from "react-resize-detector";
+import ReactECharts from "../basicChartComp/reactEcharts";
+import * as echarts from "echarts";
+import {
+ childrenToProps,
+ depsConfig,
+ genRandomKey,
+ NameConfig,
+ UICompBuilder,
+ withDefault,
+ withExposingConfigs,
+ withViewFn,
+ ThemeContext,
+ chartColorPalette,
+ getPromiseAfterDispatch,
+ dropdownControl,
+} from "lowcoder-sdk";
+import { getEchartsLocale, i18nObjs, trans } from "i18n/comps";
+import {
+ echartsConfigOmitChildren,
+ getEchartsConfig,
+ getSelectedPoints,
+} from "./line3dChartUtils";
+import 'echarts-extension-gmap';
+import log from "loglevel";
+
+let clickEventCallback = () => {};
+
+const chartModeOptions = [
+ {
+ label: "UI",
+ value: "ui",
+ }
+] as const;
+
+let Line3DChartTmpComp = (function () {
+ return new UICompBuilder({mode:dropdownControl(chartModeOptions,'ui'),...line3dChartChildrenMap}, () => null)
+ .setPropertyViewFn(line3dChartPropertyView)
+ .build();
+})();
+
+Line3DChartTmpComp = withViewFn(Line3DChartTmpComp, (comp) => {
+ const mode = comp.children.mode.getView();
+ const onUIEvent = comp.children.onUIEvent.getView();
+ const onEvent = comp.children.onEvent.getView();
+ const echartsCompRef = useRef();
+ const containerRef = useRef(null);
+ const [chartSize, setChartSize] = useState();
+ const firstResize = useRef(true);
+ const theme = useContext(ThemeContext);
+ const defaultChartTheme = {
+ color: chartColorPalette,
+ backgroundColor: "#fff",
+ };
+
+ let themeConfig = defaultChartTheme;
+ try {
+ themeConfig = theme?.theme.chart ? JSON.parse(theme?.theme.chart) : defaultChartTheme;
+ } catch (error) {
+ log.error('theme chart error: ', error);
+ }
+
+ const triggerClickEvent = async (dispatch: any, action: CompAction) => {
+ await getPromiseAfterDispatch(
+ dispatch,
+ action,
+ { autoHandleAfterReduce: true }
+ );
+ onEvent('click');
+ }
+
+ useEffect(() => {
+ const echartsCompInstance = echartsCompRef?.current?.getEchartsInstance();
+ if (!echartsCompInstance) {
+ return _.noop;
+ }
+ echartsCompInstance?.on("click", (param: any) => {
+ document.dispatchEvent(new CustomEvent("clickEvent", {
+ bubbles: true,
+ detail: {
+ action: 'click',
+ data: param.data,
+ }
+ }));
+ triggerClickEvent(
+ comp.dispatch,
+ changeChildAction("lastInteractionData", param.data, false)
+ );
+ });
+ return () => {
+ echartsCompInstance?.off("click");
+ document.removeEventListener('clickEvent', clickEventCallback)
+ };
+ }, []);
+
+ useEffect(() => {
+ // bind events
+ const echartsCompInstance = echartsCompRef?.current?.getEchartsInstance();
+ if (!echartsCompInstance) {
+ return _.noop;
+ }
+ echartsCompInstance?.on("selectchanged", (param: any) => {
+ const option: any = echartsCompInstance?.getOption();
+ document.dispatchEvent(new CustomEvent("clickEvent", {
+ bubbles: true,
+ detail: {
+ action: param.fromAction,
+ data: getSelectedPoints(param, option)
+ }
+ }));
+
+ if (param.fromAction === "select") {
+ comp.dispatch(changeChildAction("selectedPoints", getSelectedPoints(param, option), false));
+ onUIEvent("select");
+ } else if (param.fromAction === "unselect") {
+ comp.dispatch(changeChildAction("selectedPoints", getSelectedPoints(param, option), false));
+ onUIEvent("unselect");
+ }
+
+ triggerClickEvent(
+ comp.dispatch,
+ changeChildAction("lastInteractionData", getSelectedPoints(param, option), false)
+ );
+ });
+ // unbind
+ return () => {
+ echartsCompInstance?.off("selectchanged");
+ document.removeEventListener('clickEvent', clickEventCallback)
+ };
+ }, [onUIEvent]);
+
+ const echartsConfigChildren = _.omit(comp.children, echartsConfigOmitChildren);
+ const childrenProps = childrenToProps(echartsConfigChildren);
+
+ const option = useMemo(() => {
+ return getEchartsConfig(
+ childrenProps as ToViewReturn,
+ chartSize,
+ themeConfig
+ );
+ }, [theme, childrenProps, chartSize, ...Object.values(echartsConfigChildren)]);
+
+ useResizeDetector({
+ targetRef: containerRef,
+ onResize: ({width, height}) => {
+ if (width && height) {
+ setChartSize({ w: width, h: height });
+ }
+ if (!firstResize.current) {
+ // ignore the first resize, which will impact the loading animation
+ echartsCompRef.current?.getEchartsInstance().resize();
+ } else {
+ firstResize.current = false;
+ }
+ }
+ })
+
+ return (
+
+ (echartsCompRef.current = e)}
+ style={{ height: "100%" }}
+ notMerge
+ lazyUpdate
+ opts={{ locale: getEchartsLocale() }}
+ option={option}
+ mode={mode}
+ />
+
+ );
+});
+
+function getYAxisFormatContextValue(
+ data: Array,
+ yAxisType: EchartsAxisType,
+ yAxisName?: string
+) {
+ const dataSample = yAxisName && data.length > 0 && data[0][yAxisName];
+ let contextValue = dataSample;
+ if (yAxisType === "time") {
+ // to timestamp
+ const time =
+ typeof dataSample === "number" || typeof dataSample === "string"
+ ? new Date(dataSample).getTime()
+ : null;
+ if (time) contextValue = time;
+ }
+ return contextValue;
+}
+
+Line3DChartTmpComp = class extends Line3DChartTmpComp {
+ private lastYAxisFormatContextVal?: JSONValue;
+ private lastColorContext?: JSONObject;
+
+ updateContext(comp: this) {
+ // the context value of axis format
+ let resultComp = comp;
+ const data = comp.children.data.getView();
+ const yAxisContextValue = getYAxisFormatContextValue(
+ data,
+ comp.children.yConfig.children.yAxisType.getView(),
+ );
+ if (yAxisContextValue !== comp.lastYAxisFormatContextVal) {
+ comp.lastYAxisFormatContextVal = yAxisContextValue;
+ resultComp = comp.setChild(
+ "yConfig",
+ comp.children.yConfig.reduce(
+ wrapChildAction(
+ "formatter",
+ AxisFormatterComp.changeContextDataAction({ value: yAxisContextValue })
+ )
+ )
+ );
+ }
+ return resultComp;
+ }
+
+ override reduce(action: CompAction): this {
+ const comp = super.reduce(action);
+ if (action.type === CompActionTypes.UPDATE_NODES_V2) {
+ const newData = comp.children.data.getView();
+ // data changes
+ if (comp.children.data !== this.children.data) {
+ setTimeout(() => {
+ // update x-axis value
+ const keys = getDataKeys(newData);
+ if (keys.length > 0 && !keys.includes(comp.children.xAxisKey.getView())) {
+ comp.children.xAxisKey.dispatch(changeValueAction(keys[0] || ""));
+ }
+ if (keys.length > 0 && !keys.includes(comp.children.yAxisKey.getView())) {
+ comp.children.yAxisKey.dispatch(changeValueAction(keys[1] || ""));
+ }
+ }, 0);
+ }
+ return this.updateContext(comp);
+ }
+ return comp;
+ }
+
+ override autoHeight(): boolean {
+ return false;
+ }
+};
+
+let Line3DChartComp = withExposingConfigs(Line3DChartTmpComp, [
+ depsConfig({
+ name: "selectedPoints",
+ desc: trans("chart.selectedPointsDesc"),
+ depKeys: ["selectedPoints"],
+ func: (input) => {
+ return input.selectedPoints;
+ },
+ }),
+ depsConfig({
+ name: "lastInteractionData",
+ desc: trans("chart.lastInteractionDataDesc"),
+ depKeys: ["lastInteractionData"],
+ func: (input) => {
+ return input.lastInteractionData;
+ },
+ }),
+ depsConfig({
+ name: "data",
+ desc: trans("chart.dataDesc"),
+ depKeys: ["data", "mode"],
+ func: (input) =>[] ,
+ }),
+ new NameConfig("title", trans("chart.titleDesc")),
+]);
+
+
+export const Line3DChartCompWithDefault = withDefault(Line3DChartComp, {
+ xAxisKey: "date",
+});
diff --git a/client/packages/lowcoder-comps/src/comps/line3dChartComp/line3dChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/line3dChartComp/line3dChartConstants.tsx
new file mode 100644
index 0000000000..41a405c557
--- /dev/null
+++ b/client/packages/lowcoder-comps/src/comps/line3dChartComp/line3dChartConstants.tsx
@@ -0,0 +1,176 @@
+import {
+ jsonControl,
+ stateComp,
+ toJSONObjectArray,
+ toObject,
+ BoolControl,
+ ColorControl,
+ withDefault,
+ StringControl,
+ NumberControl,
+ dropdownControl,
+ list,
+ eventHandlerControl,
+ valueComp,
+ withType,
+ uiChildren,
+ clickEvent,
+ toArray,
+ styleControl,
+ EchartDefaultTextStyle,
+ EchartDefaultChartStyle,
+ MultiCompBuilder,
+} from "lowcoder-sdk";
+import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core";
+import { XAxisConfig, YAxisConfig } from "../basicChartComp/chartConfigs/cartesianAxisConfig";
+import { LegendConfig } from "../basicChartComp/chartConfigs/legendConfig";
+import { EchartsLegendConfig } from "../basicChartComp/chartConfigs/echartsLegendConfig";
+import { EchartsLabelConfig } from "../basicChartComp/chartConfigs/echartsLabelConfig";
+import { EChartsOption } from "echarts";
+import { i18nObjs, trans } from "i18n/comps";
+import {EchartsTitleVerticalConfig} from "../chartComp/chartConfigs/echartsTitleVerticalConfig";
+import {EchartsTitleConfig} from "../basicChartComp/chartConfigs/echartsTitleConfig";
+
+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 XAxisDirectionOptions = [
+ {
+ label: trans("chart.horizontal"),
+ value: "horizontal",
+ },
+ {
+ label: trans("chart.vertical"),
+ value: "vertical",
+ },
+] as const;
+
+export type XAxisDirectionType = ValueFromOption;
+
+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 noDataLine3DChartConfig = {
+ animation: false,
+ tooltip: {
+ show: false,
+ },
+ legend: {
+ formatter: trans("chart.unknown"),
+ top: "bottom",
+ selectedMode: false,
+ },
+ color: ["#B8BBCC", "#CED0D9", "#DCDEE6", "#E6E6EB"],
+ series: [],
+} as EChartsOption;
+
+export type ChartSize = { w: number; h: number };
+
+export const getDataKeys = (data: Array) => {
+ if (!data) {
+ return [];
+ }
+ const dataKeys: Array = [];
+ data[0].forEach((key) => {
+ if (!dataKeys.includes(key)) {
+ dataKeys.push(key);
+ }
+ });
+ return dataKeys;
+};
+
+export const chartUiModeChildren = {
+ title: withDefault(StringControl, trans("echarts.defaultTitle")),
+ data: jsonControl(toArray, i18nObjs.defaultDatasource3DGlobe),
+ xAxisKey: valueComp(""), // x-axis, key from data
+ xAxisDirection: dropdownControl(XAxisDirectionOptions, "horizontal"),
+ xAxisData: jsonControl(toArray, []),
+ yAxisKey: valueComp(""), // x-axis, key from data
+ xConfig: XAxisConfig,
+ yConfig: YAxisConfig,
+ legendConfig: LegendConfig,
+ environment: withDefault(StringControl, trans("line3dchart.defaultEnvironment")),
+ baseTexture: withDefault(StringControl, trans("line3dchart.defaultBaseTexture")),
+ heightTexture: withDefault(StringControl, trans("line3dchart.defaultHeightTexture")),
+ background: withDefault(ColorControl, "black"),
+ lineStyleWidth: withDefault(NumberControl, 1),
+ lineStyleColor: withDefault(ColorControl, "rgb(50, 50, 150)"),
+ lineStyleOpacity: withDefault(NumberControl, 0.1),
+ effectShow: withDefault(BoolControl, true),
+ effectWidth: withDefault(NumberControl, 2),
+ effectLength: withDefault(NumberControl, 0.15),
+ effectOpacity: withDefault(NumberControl, 1),
+ effectColor: withDefault(ColorControl, 'rgb(30, 30, 60)'),
+ onUIEvent: eventHandlerControl(UIEventOptions),
+};
+
+export type UIChartDataType = {
+ seriesName: string;
+ // coordinate chart
+ x?: any;
+ y?: any;
+ // line3d or funnel
+ itemName?: any;
+ value?: any;
+};
+
+export type NonUIChartDataType = {
+ name: string;
+ value: any;
+}
+
+export const line3dChartChildrenMap = {
+ selectedPoints: stateComp>([]),
+ lastInteractionData: stateComp | NonUIChartDataType>({}),
+ onEvent: eventHandlerControl([clickEvent] as const),
+ ...chartUiModeChildren,
+};
+
+const chartUiChildrenMap = uiChildren(line3dChartChildrenMap);
+export type ChartCompPropsType = RecordConstructorToView;
+export type ChartCompChildrenType = RecordConstructorToComp;
diff --git a/client/packages/lowcoder-comps/src/comps/line3dChartComp/line3dChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/line3dChartComp/line3dChartPropertyView.tsx
new file mode 100644
index 0000000000..bbcebf3586
--- /dev/null
+++ b/client/packages/lowcoder-comps/src/comps/line3dChartComp/line3dChartPropertyView.tsx
@@ -0,0 +1,62 @@
+import { changeChildAction, CompAction } from "lowcoder-core";
+import { ChartCompChildrenType, getDataKeys } from "./line3dChartConstants";
+import {
+ CustomModal,
+ Dropdown,
+ hiddenPropertyView,
+ Option,
+ RedButton,
+ Section,
+ sectionNames,
+ controlItem,
+} from "lowcoder-sdk";
+import { trans } from "i18n/comps";
+
+export function line3dChartPropertyView(
+ children: ChartCompChildrenType,
+ dispatch: (action: CompAction) => void
+) {
+ const uiModePropertyView = (
+ <>
+
+ {children.environment.propertyView({label: trans("line3dchart.environment")})}
+ {children.baseTexture.propertyView({label: trans("line3dchart.baseTexture")})}
+ {children.heightTexture.propertyView({label: trans("line3dchart.heightTexture")})}
+ {children.background.propertyView({label: trans("line3dchart.background")})}
+ {children.lineStyleWidth.propertyView({label: trans("line3dchart.lineStyleWidth")})}
+ {children.lineStyleColor.propertyView({label: trans("line3dchart.lineStyleColor")})}
+ {children.lineStyleOpacity.propertyView({label: trans("line3dchart.lineStyleOpacity")})}
+ {children.effectShow.propertyView({label: trans("line3dchart.effectShow")})}
+ {children.effectShow.getView() && children.effectWidth.propertyView({label: trans("line3dchart.effectTrailWidth")})}
+ {children.effectShow.getView() && children.effectLength.propertyView({label: trans("line3dchart.effectTrailLength")})}
+ {children.effectShow.getView() && children.effectOpacity.propertyView({label: trans("line3dchart.effectTrailOpacity")})}
+ {children.effectShow.getView() && children.effectColor.propertyView({label: trans("line3dchart.effectTrailColor")})}
+
+
+
+ {children.onUIEvent.propertyView({title: trans("chart.chartEventHandlers")})}
+
+
+ {children.onEvent.propertyView()}
+
+
+
+ {children.data.propertyView({
+ label: trans("chart.data"),
+ })}
+
+
+ );
+
+ const getChatConfigByMode = (mode: string) => {
+ switch(mode) {
+ case "ui":
+ return uiModePropertyView;
+ }
+ }
+ return (
+ <>
+ {getChatConfigByMode(children.mode.getView())}
+
+ );
+}
diff --git a/client/packages/lowcoder-comps/src/comps/line3dChartComp/line3dChartUtils.ts b/client/packages/lowcoder-comps/src/comps/line3dChartComp/line3dChartUtils.ts
new file mode 100644
index 0000000000..3ba5858a18
--- /dev/null
+++ b/client/packages/lowcoder-comps/src/comps/line3dChartComp/line3dChartUtils.ts
@@ -0,0 +1,238 @@
+import {
+ ChartCompPropsType,
+ ChartSize,
+ noDataLine3DChartConfig,
+} from "comps/line3dChartComp/line3dChartConstants";
+import { EChartsOptionWithMap } from "../basicChartComp/reactEcharts/types";
+import _ from "lodash";
+import { googleMapsApiUrl } from "../basicChartComp/chartConfigs/chartUrls";
+import parseBackground from "../../util/gradientBackgroundColor";
+import {chartStyleWrapper, styleWrapper} from "../../util/styleWrapper";
+// Define the configuration interface to match the original transform
+
+interface AggregateConfig {
+ resultDimensions: Array<{
+ name: string;
+ from: string;
+ method?: string; // e.g., 'min', 'Q1', 'median', 'Q3', 'max'
+ }>;
+ groupBy: string;
+}
+
+// Custom transform function
+function customAggregateTransform(params: {
+ upstream: { source: any[] };
+ config: AggregateConfig;
+}): any[] {
+ const { upstream, config } = params;
+ const data = upstream.source;
+
+ // Assume data is an array of arrays, with the first row as headers
+ const headers = data[0];
+ const rows = data.slice(1);
+
+ // Find the index of the groupBy column
+ const groupByIndex = headers.indexOf(config.groupBy);
+ if (groupByIndex === -1) {
+ return [];
+ }
+
+ // Group rows by the groupBy column
+ const groups: { [key: string]: any[][] } = {};
+ rows.forEach(row => {
+ const key = row[groupByIndex];
+ if (!groups[key]) {
+ groups[key] = [];
+ }
+ groups[key].push(row);
+ });
+
+ // Define aggregation functions
+ const aggregators: {
+ [method: string]: (values: number[]) => number;
+ } = {
+ min: values => Math.min(...values),
+ max: values => Math.max(...values),
+ Q1: values => percentile(values, 25),
+ median: values => percentile(values, 50),
+ Q3: values => percentile(values, 75),
+ };
+
+ // Helper function to calculate percentiles (Q1, median, Q3)
+ function percentile(arr: number[], p: number): number {
+ const sorted = arr.slice().sort((a, b) => a - b);
+ const index = (p / 100) * (sorted.length - 1);
+ const i = Math.floor(index);
+ const f = index - i;
+ if (i === sorted.length - 1) {
+ return sorted[i];
+ }
+ return sorted[i] + f * (sorted[i + 1] - sorted[i]);
+ }
+
+ // Prepare output headers from resultDimensions
+ const outputHeaders = config.resultDimensions.map(dim => dim.name);
+
+ // Compute aggregated data for each group
+ const aggregatedData: any[][] = [];
+ for (const key in groups) {
+ const groupRows = groups[key];
+ const row: any[] = [];
+
+ config.resultDimensions.forEach(dim => {
+ if (dim.from === config.groupBy) {
+ // Include the group key directly
+ row.push(key);
+ } else {
+ // Find the index of the 'from' column
+ const fromIndex = headers.indexOf(dim.from);
+ if (fromIndex === -1) {
+ return;
+ }
+ // Extract values for the 'from' column in this group
+ const values = groupRows
+ .map(r => parseFloat(r[fromIndex]))
+ .filter(v => !isNaN(v));
+ if (dim.method && aggregators[dim.method]) {
+ // Apply the aggregation method
+ row.push(aggregators[dim.method](values));
+ } else {
+ return;
+ }
+ }
+ });
+
+ aggregatedData.push(row);
+ }
+
+ // Return the transformed data with headers
+ return [outputHeaders, ...aggregatedData];
+}
+
+export const echartsConfigOmitChildren = [
+ "hidden",
+ "selectedPoints",
+ "onUIEvent",
+ "mapInstance"
+] as const;
+type EchartsConfigProps = Omit;
+
+// https://echarts.apache.org/en/option.html
+export function getEchartsConfig(
+ props: EchartsConfigProps,
+ chartSize?: ChartSize,
+ theme?: any,
+): EChartsOptionWithMap {
+ let config: any = {
+ backgroundColor: props.background,
+ globe: {
+ environment: props.environment,
+ baseTexture: props.baseTexture,
+ heightTexture: props.heightTexture,
+ shading: 'realistic',
+ realisticMaterial: {
+ roughness: 0.2,
+ metalness: 0
+ },
+ postEffect: {
+ enable: true,
+ depthOfField: {
+ enable: false,
+ focalDistance: 150
+ }
+ },
+ displacementScale: 0.1,
+ displacementQuality: 'high',
+ temporalSuperSampling: {
+ enable: true
+ },
+ light: {
+ ambient: {
+ intensity: 0.4
+ },
+ main: {
+ intensity: 0.4
+ },
+ },
+ viewControl: {
+ autoRotate: false
+ },
+ silent: true
+ },
+ series: {
+ type: 'lines3D',
+ coordinateSystem: 'globe',
+ blendMode: 'lighter',
+ lineStyle: {
+ width: props.lineStyleWidth,
+ color: props.lineStyleColor,
+ opacity: props.lineStyleOpacity
+ },
+ data: props.data,
+ effect: {
+ show: props.effectShow,
+ trailWidth: props.effectWidth,
+ trailLength: props.effectLength,
+ trailOpacity: props.effectOpacity,
+ trailColor: props.effectColor
+ },
+ }
+ };
+ return config;
+}
+
+export function getSelectedPoints(param: any, option: any) {
+ const series = option.series;
+ const dataSource = _.isArray(option.dataset) && option.dataset[0]?.source;
+ if (series && dataSource) {
+ return param.selected.flatMap((selectInfo: any) => {
+ const seriesInfo = series[selectInfo.seriesIndex];
+ if (!seriesInfo || !seriesInfo.encode) {
+ return [];
+ }
+ return selectInfo.dataIndex.map((index: any) => {
+ const commonResult = {
+ seriesName: seriesInfo.name,
+ };
+ if (seriesInfo.encode.itemName && seriesInfo.encode.value) {
+ return {
+ ...commonResult,
+ itemName: dataSource[index][seriesInfo.encode.itemName],
+ value: dataSource[index][seriesInfo.encode.value],
+ };
+ } else {
+ return {
+ ...commonResult,
+ x: dataSource[index][seriesInfo.encode.x],
+ y: dataSource[index][seriesInfo.encode.y],
+ };
+ }
+ });
+ });
+ }
+ return [];
+}
+
+export function loadGoogleMapsScript(apiKey: string) {
+ const mapsUrl = `${googleMapsApiUrl}?key=${apiKey}`;
+ const scripts = document.getElementsByTagName('script');
+ // is script already loaded
+ let scriptIndex = _.findIndex(scripts, (script) => script.src.endsWith(mapsUrl));
+ if(scriptIndex > -1) {
+ return scripts[scriptIndex];
+ }
+ // is script loaded with diff api_key, remove the script and load again
+ scriptIndex = _.findIndex(scripts, (script) => script.src.startsWith(googleMapsApiUrl));
+ if(scriptIndex > -1) {
+ scripts[scriptIndex].remove();
+ }
+
+ const script = document.createElement("script");
+ script.type = "text/javascript";
+ script.src = mapsUrl;
+ script.async = true;
+ script.defer = true;
+ window.document.body.appendChild(script);
+
+ return script;
+}
diff --git a/client/packages/lowcoder-comps/src/comps/lineChartComp/lineChartComp.tsx b/client/packages/lowcoder-comps/src/comps/lineChartComp/lineChartComp.tsx
new file mode 100644
index 0000000000..032607625b
--- /dev/null
+++ b/client/packages/lowcoder-comps/src/comps/lineChartComp/lineChartComp.tsx
@@ -0,0 +1,318 @@
+import {
+ changeChildAction,
+ changeValueAction,
+ CompAction,
+ CompActionTypes,
+ wrapChildAction,
+} from "lowcoder-core";
+import { AxisFormatterComp, EchartsAxisType } from "../basicChartComp/chartConfigs/cartesianAxisConfig";
+import { lineChartChildrenMap, ChartSize, getDataKeys } from "./lineChartConstants";
+import { lineChartPropertyView } from "./lineChartPropertyView";
+import _ from "lodash";
+import { useContext, useEffect, useMemo, useRef, useState } from "react";
+import { useResizeDetector } from "react-resize-detector";
+import ReactECharts from "../basicChartComp/reactEcharts";
+import {
+ childrenToProps,
+ depsConfig,
+ genRandomKey,
+ NameConfig,
+ UICompBuilder,
+ withDefault,
+ withExposingConfigs,
+ withViewFn,
+ ThemeContext,
+ chartColorPalette,
+ getPromiseAfterDispatch,
+ dropdownControl,
+} from "lowcoder-sdk";
+import { getEchartsLocale, trans } from "i18n/comps";
+import { ItemColorComp } from "comps/basicChartComp/chartConfigs/lineChartConfig";
+import {
+ echartsConfigOmitChildren,
+ getEchartsConfig,
+ getSelectedPoints,
+} from "./lineChartUtils";
+import 'echarts-extension-gmap';
+import log from "loglevel";
+
+let clickEventCallback = () => {};
+
+const chartModeOptions = [
+ {
+ label: "ECharts JSON",
+ value: "json",
+ }
+] as const;
+
+let LineChartTmpComp = (function () {
+ return new UICompBuilder({mode:dropdownControl(chartModeOptions,'ui'),...lineChartChildrenMap}, () => null)
+ .setPropertyViewFn(lineChartPropertyView)
+ .build();
+})();
+
+LineChartTmpComp = withViewFn(LineChartTmpComp, (comp) => {
+ const mode = comp.children.mode.getView();
+ const onUIEvent = comp.children.onUIEvent.getView();
+ const onEvent = comp.children.onEvent.getView();
+ const echartsCompRef = useRef();
+ const containerRef = useRef(null);
+ const [chartSize, setChartSize] = useState();
+ const firstResize = useRef(true);
+ const theme = useContext(ThemeContext);
+ const defaultChartTheme = {
+ color: chartColorPalette,
+ backgroundColor: "#fff",
+ };
+
+ let themeConfig = defaultChartTheme;
+ try {
+ themeConfig = theme?.theme.chart ? JSON.parse(theme?.theme.chart) : defaultChartTheme;
+ } catch (error) {
+ log.error('theme chart error: ', error);
+ }
+
+ const triggerClickEvent = async (dispatch: any, action: CompAction) => {
+ await getPromiseAfterDispatch(
+ dispatch,
+ action,
+ { autoHandleAfterReduce: true }
+ );
+ onEvent('click');
+ }
+
+ useEffect(() => {
+ const echartsCompInstance = echartsCompRef?.current?.getEchartsInstance();
+ if (!echartsCompInstance) {
+ return _.noop;
+ }
+ echartsCompInstance?.on("click", (param: any) => {
+ document.dispatchEvent(new CustomEvent("clickEvent", {
+ bubbles: true,
+ detail: {
+ action: 'click',
+ data: param.data,
+ }
+ }));
+ triggerClickEvent(
+ comp.dispatch,
+ changeChildAction("lastInteractionData", param.data, false)
+ );
+ });
+ return () => {
+ echartsCompInstance?.off("click");
+ document.removeEventListener('clickEvent', clickEventCallback)
+ };
+ }, []);
+
+ useEffect(() => {
+ // bind events
+ const echartsCompInstance = echartsCompRef?.current?.getEchartsInstance();
+ if (!echartsCompInstance) {
+ return _.noop;
+ }
+ echartsCompInstance?.on("selectchanged", (param: any) => {
+ const option: any = echartsCompInstance?.getOption();
+ document.dispatchEvent(new CustomEvent("clickEvent", {
+ bubbles: true,
+ detail: {
+ action: param.fromAction,
+ data: getSelectedPoints(param, option)
+ }
+ }));
+
+ if (param.fromAction === "select") {
+ comp.dispatch(changeChildAction("selectedPoints", getSelectedPoints(param, option), false));
+ onUIEvent("select");
+ } else if (param.fromAction === "unselect") {
+ comp.dispatch(changeChildAction("selectedPoints", getSelectedPoints(param, option), false));
+ onUIEvent("unselect");
+ }
+
+ triggerClickEvent(
+ comp.dispatch,
+ changeChildAction("lastInteractionData", getSelectedPoints(param, option), false)
+ );
+ });
+ // unbind
+ return () => {
+ echartsCompInstance?.off("selectchanged");
+ document.removeEventListener('clickEvent', clickEventCallback)
+ };
+ }, [onUIEvent]);
+
+ const echartsConfigChildren = _.omit(comp.children, echartsConfigOmitChildren);
+ const childrenProps = childrenToProps(echartsConfigChildren);
+ const option = useMemo(() => {
+ return getEchartsConfig(
+ childrenProps as ToViewReturn,
+ chartSize,
+ themeConfig
+ );
+ }, [theme, childrenProps, chartSize, ...Object.values(echartsConfigChildren)]);
+
+ useResizeDetector({
+ targetRef: containerRef,
+ onResize: ({width, height}) => {
+ if (width && height) {
+ setChartSize({ w: width, h: height });
+ }
+ if (!firstResize.current) {
+ // ignore the first resize, which will impact the loading animation
+ echartsCompRef.current?.getEchartsInstance().resize();
+ } else {
+ firstResize.current = false;
+ }
+ }
+ })
+
+ return (
+
+ (echartsCompRef.current = e)}
+ style={{ height: "100%" }}
+ notMerge
+ lazyUpdate
+ opts={{ locale: getEchartsLocale() }}
+ option={option}
+ mode={mode}
+ />
+
+ );
+});
+
+function getYAxisFormatContextValue(
+ data: Array,
+ yAxisType: EchartsAxisType,
+ yAxisName?: string
+) {
+ const dataSample = yAxisName && data.length > 0 && data[0][yAxisName];
+ let contextValue = dataSample;
+ if (yAxisType === "time") {
+ // to timestamp
+ const time =
+ typeof dataSample === "number" || typeof dataSample === "string"
+ ? new Date(dataSample).getTime()
+ : null;
+ if (time) contextValue = time;
+ }
+ return contextValue;
+}
+
+LineChartTmpComp = class extends LineChartTmpComp {
+ private lastYAxisFormatContextVal?: JSONValue;
+ private lastColorContext?: JSONObject;
+
+ updateContext(comp: this) {
+ // the context value of axis format
+ let resultComp = comp;
+ const data = comp.children.data.getView();
+ const sampleSeries = comp.children.series.getView().find((s) => !s.getView().hide);
+ const yAxisContextValue = getYAxisFormatContextValue(
+ data,
+ comp.children.yConfig.children.yAxisType.getView(),
+ sampleSeries?.children.columnName.getView()
+ );
+ if (yAxisContextValue !== comp.lastYAxisFormatContextVal) {
+ comp.lastYAxisFormatContextVal = yAxisContextValue;
+ resultComp = comp.setChild(
+ "yConfig",
+ comp.children.yConfig.reduce(
+ wrapChildAction(
+ "formatter",
+ AxisFormatterComp.changeContextDataAction({ value: yAxisContextValue })
+ )
+ )
+ );
+ }
+ // item color context
+ const colorContextVal = {
+ seriesName: sampleSeries?.children.seriesName.getView(),
+ value: yAxisContextValue,
+ };
+ if (
+ comp.children.chartConfig.children.comp.children.hasOwnProperty("itemColor") &&
+ !_.isEqual(colorContextVal, comp.lastColorContext)
+ ) {
+ comp.lastColorContext = colorContextVal;
+ resultComp = resultComp.setChild(
+ "chartConfig",
+ comp.children.chartConfig.reduce(
+ wrapChildAction(
+ "comp",
+ wrapChildAction("itemColor", ItemColorComp.changeContextDataAction(colorContextVal))
+ )
+ )
+ );
+ }
+ return resultComp;
+ }
+
+ override reduce(action: CompAction): this {
+ const comp = super.reduce(action);
+ if (action.type === CompActionTypes.UPDATE_NODES_V2) {
+ const newData = comp.children.data.getView();
+ // data changes
+ if (comp.children.data !== this.children.data) {
+ setTimeout(() => {
+ // update x-axis value
+ const keys = getDataKeys(newData);
+ if (keys.length > 0 && !keys.includes(comp.children.xAxisKey.getView())) {
+ comp.children.xAxisKey.dispatch(changeValueAction(keys[0] || ""));
+ }
+ // pass to child series comp
+ comp.children.series.dispatchDataChanged(newData);
+ }, 0);
+ }
+ return this.updateContext(comp);
+ }
+ return comp;
+ }
+
+ override autoHeight(): boolean {
+ return false;
+ }
+};
+
+let LineChartComp = withExposingConfigs(LineChartTmpComp, [
+ depsConfig({
+ name: "selectedPoints",
+ desc: trans("chart.selectedPointsDesc"),
+ depKeys: ["selectedPoints"],
+ func: (input) => {
+ return input.selectedPoints;
+ },
+ }),
+ depsConfig({
+ name: "lastInteractionData",
+ desc: trans("chart.lastInteractionDataDesc"),
+ depKeys: ["lastInteractionData"],
+ func: (input) => {
+ return input.lastInteractionData;
+ },
+ }),
+ depsConfig({
+ name: "data",
+ desc: trans("chart.dataDesc"),
+ depKeys: ["data", "mode"],
+ func: (input) =>[] ,
+ }),
+ new NameConfig("title", trans("chart.titleDesc")),
+]);
+
+
+export const LineChartCompWithDefault = withDefault(LineChartComp, {
+ xAxisKey: "date",
+ series: [
+ {
+ dataIndex: genRandomKey(),
+ seriesName: "Sales",
+ columnName: "sales",
+ },
+ {
+ dataIndex: genRandomKey(),
+ seriesName: "Growth",
+ columnName: "growth",
+ },
+ ],
+});
diff --git a/client/packages/lowcoder-comps/src/comps/lineChartComp/lineChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/lineChartComp/lineChartConstants.tsx
new file mode 100644
index 0000000000..5b0554ddad
--- /dev/null
+++ b/client/packages/lowcoder-comps/src/comps/lineChartComp/lineChartConstants.tsx
@@ -0,0 +1,323 @@
+import {
+ jsonControl,
+ stateComp,
+ toJSONObjectArray,
+ toObject,
+ BoolControl,
+ ColorControl,
+ withDefault,
+ StringControl,
+ NumberControl,
+ dropdownControl,
+ list,
+ eventHandlerControl,
+ valueComp,
+ withType,
+ uiChildren,
+ clickEvent,
+ toArray,
+ styleControl,
+ EchartDefaultTextStyle,
+ EchartDefaultChartStyle,
+ MultiCompBuilder,
+} from "lowcoder-sdk";
+import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core";
+import { BarChartConfig } from "../basicChartComp/chartConfigs/barChartConfig";
+import { XAxisConfig, YAxisConfig } from "../basicChartComp/chartConfigs/cartesianAxisConfig";
+import { LegendConfig } from "../basicChartComp/chartConfigs/legendConfig";
+import { EchartsLegendConfig } from "../basicChartComp/chartConfigs/echartsLegendConfig";
+import { EchartsLabelConfig } from "../basicChartComp/chartConfigs/echartsLabelConfig";
+import { LineChartConfig } from "../basicChartComp/chartConfigs/lineChartConfig";
+import { PieChartConfig } from "../basicChartComp/chartConfigs/pieChartConfig";
+import { ScatterChartConfig } from "../basicChartComp/chartConfigs/scatterChartConfig";
+import { SeriesListComp } from "./seriesComp";
+import { EChartsOption } from "echarts";
+import { i18nObjs, trans } from "i18n/comps";
+import { GaugeChartConfig } from "../basicChartComp/chartConfigs/gaugeChartConfig";
+import { FunnelChartConfig } from "../basicChartComp/chartConfigs/funnelChartConfig";
+import {EchartsTitleVerticalConfig} from "../chartComp/chartConfigs/echartsTitleVerticalConfig";
+import {EchartsTitleConfig} from "../basicChartComp/chartConfigs/echartsTitleConfig";
+
+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;
+
+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 XAxisDirectionOptions = [
+ {
+ label: trans("chart.horizontal"),
+ value: "horizontal",
+ },
+ {
+ label: trans("chart.vertical"),
+ value: "vertical",
+ },
+] as const;
+
+export type XAxisDirectionType = ValueFromOption;
+
+export const defaultChartData = [
+ { date: "Jan", sales: 320, growth: 250 },
+ { date: "Feb", sales: 450, growth: 300 },
+ { date: "Mar", sales: 380, growth: 340 },
+ { date: "Apr", sales: 520, growth: 400 },
+ { date: "May", sales: 480, growth: 450 },
+ { date: "Jun", sales: 600, growth: 500 }
+];
+export const noDataAxisConfig = {
+ animation: false,
+ xAxis: {
+ type: "category",
+ name: "No Data Available",
+ 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;
+
+const areaPiecesChildrenMap = {
+ color: ColorControl,
+ from: StringControl,
+ to: StringControl,
+ // unique key, for sort
+ dataIndex: valueComp(""),
+};
+const AreaPiecesTmpComp = new MultiCompBuilder(areaPiecesChildrenMap, (props) => {
+ return props;
+})
+ .setPropertyViewFn((children: any) =>
+ (<>
+ {children.color.propertyView({label: trans("lineChart.color")})}
+ {children.from.propertyView({label: trans("lineChart.from")})}
+ {children.to.propertyView({label: trans("lineChart.to")})}
+ )
+ )
+ .build();
+
+export type ChartSize = { w: number; h: number };
+
+export const getDataKeys = (data: Array) => {
+ if (!data) {
+ return [];
+ }
+ const dataKeys: Array = [];
+ 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 EchartsOptionMap = {
+ funnel: FunnelChartConfig,
+ gauge: GaugeChartConfig,
+};
+
+const ChartOptionComp = withType(ChartOptionMap, "line");
+const EchartsOptionComp = withType(EchartsOptionMap, "funnel");
+export type CharOptionCompType = keyof typeof ChartOptionMap;
+
+export const chartUiModeChildren = {
+ title: withDefault(StringControl, trans("lineChart.defaultTitle")),
+ data: jsonControl(toJSONObjectArray, defaultChartData),
+ xAxisKey: valueComp(""), // x-axis, key from data
+ xAxisDirection: dropdownControl(XAxisDirectionOptions, "horizontal"),
+ xAxisData: jsonControl(toArray, []),
+ series: SeriesListComp,
+ xConfig: XAxisConfig,
+ yConfig: YAxisConfig,
+ legendConfig: LegendConfig,
+ chartConfig: ChartOptionComp,
+ areaPieces: list(AreaPiecesTmpComp),
+ animationDuration: withDefault(NumberControl, 1000),
+ onUIEvent: eventHandlerControl(UIEventOptions),
+};
+
+let chartJsonModeChildren: any = {
+ echartsOption: jsonControl(toObject, i18nObjs.defaultEchartsJsonOption),
+ echartsTitle: withDefault(StringControl, trans("echarts.defaultTitle")),
+ echartsLegendConfig: EchartsLegendConfig,
+ echartsLabelConfig: EchartsLabelConfig,
+ echartsConfig: EchartsOptionComp,
+ echartsTitleVerticalConfig: EchartsTitleVerticalConfig,
+ echartsTitleConfig:EchartsTitleConfig,
+
+ left:withDefault(NumberControl,trans('chart.defaultLeft')),
+ right:withDefault(NumberControl,trans('chart.defaultRight')),
+ top:withDefault(NumberControl,trans('chart.defaultTop')),
+ bottom:withDefault(NumberControl,trans('chart.defaultBottom')),
+
+ tooltip: withDefault(BoolControl, true),
+ legendVisibility: withDefault(BoolControl, true),
+}
+
+if (EchartDefaultChartStyle && EchartDefaultTextStyle) {
+ chartJsonModeChildren = {
+ ...chartJsonModeChildren,
+ chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'),
+ titleStyle: styleControl(EchartDefaultTextStyle, 'titleStyle'),
+ xAxisStyle: styleControl(EchartDefaultTextStyle, 'xAxis'),
+ yAxisStyle: styleControl(EchartDefaultTextStyle, 'yAxisStyle'),
+ legendStyle: styleControl(EchartDefaultTextStyle, 'legendStyle'),
+ }
+}
+
+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 lineChartChildrenMap = {
+ selectedPoints: stateComp>([]),
+ lastInteractionData: stateComp | NonUIChartDataType>({}),
+ onEvent: eventHandlerControl([clickEvent] as const),
+ ...chartUiModeChildren,
+ ...chartJsonModeChildren,
+};
+
+const chartUiChildrenMap = uiChildren(lineChartChildrenMap);
+export type ChartCompPropsType = RecordConstructorToView;
+export type ChartCompChildrenType = RecordConstructorToComp;
diff --git a/client/packages/lowcoder-comps/src/comps/lineChartComp/lineChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/lineChartComp/lineChartPropertyView.tsx
new file mode 100644
index 0000000000..5a67d8ecfd
--- /dev/null
+++ b/client/packages/lowcoder-comps/src/comps/lineChartComp/lineChartPropertyView.tsx
@@ -0,0 +1,187 @@
+import { changeChildAction, CompAction } from "lowcoder-core";
+import { ChartCompChildrenType, ChartTypeOptions,getDataKeys } from "./lineChartConstants";
+import { newSeries } from "./seriesComp";
+import {
+ CustomModal,
+ Dropdown,
+ hiddenPropertyView,
+ Option,
+ RedButton,
+ Section,
+ sectionNames,
+ controlItem,
+} from "lowcoder-sdk";
+import { trans } from "i18n/comps";
+
+export function lineChartPropertyView(
+ 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 = (
+ <>
+
+ {children.chartConfig.getPropertyView()}
+ {children.animationDuration.propertyView({label: trans("lineChart.animationDuration")})}
+ {
+ dispatch(changeChildAction("xAxisKey", value));
+ }}
+ />
+ {children.chartConfig.getView().subtype === "waterfall" && children.xAxisData.propertyView({
+ label: "X-Label-Data"
+ })}
+ s.getView().seriesName}
+ popoverTitle={(s) => s.getView().columnName}
+ content={(s, index) => (
+ <>
+ {s.getPropertyViewWithData(columnOptions)}
+ {
+ {
+ 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")}
+
+ }
+
+ )}
+ 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}
+ />
+ `[${s.getView().from}-${s.getView().to}] ${s.getView().color}`}
+ popoverTitle={(s) => trans("lineChart.areaPiece")}
+ content={(s, index) => (
+ <>
+ {s.getPropertyView({label: "Type"})}
+ {
+ {
+ children.areaPieces.dispatch(children.areaPieces.deleteAction(index));
+ }}
+ >
+ {trans("chart.delete")}
+
+ }
+
+ )}
+ onAdd={() => {
+ children.areaPieces.dispatch(
+ children.areaPieces.pushAction(
+ {}
+ )
+ );
+ }}
+ onMove={(fromIndex, toIndex) => {
+ const action = children.areaPieces.arrayMoveAction(fromIndex, toIndex);
+ children.areaPieces.dispatch(action);
+ }}
+ hide={(s) => true}
+ onHide={(s, hide) => console.log("onHide")}
+ dataIndex={(s) => {
+ return s.getView().dataIndex;
+ }}
+ />
+
+
+
+ {children.onUIEvent.propertyView({title: trans("chart.chartEventHandlers")})}
+
+
+ {children.onEvent.propertyView()}
+
+
+
+ {children.echartsTitleConfig.getPropertyView()}
+ {children.echartsTitleVerticalConfig.getPropertyView()}
+ {children.legendConfig.getPropertyView()}
+ {children.title.propertyView({ label: trans("chart.title") })}
+ {children.left.propertyView({ label: trans("chart.left"), tooltip: trans("echarts.leftTooltip") })}
+ {children.right.propertyView({ label: trans("chart.right"), tooltip: trans("echarts.rightTooltip") })}
+ {children.top.propertyView({ label: trans("chart.top"), tooltip: trans("echarts.topTooltip") })}
+ {children.bottom.propertyView({ label: trans("chart.bottom"), tooltip: trans("echarts.bottomTooltip") })}
+ {children.chartConfig.children.compType.getView() !== "pie" && (
+ <>
+ {children.xAxisDirection.propertyView({
+ label: trans("chart.xAxisDirection"),
+ radioButton: true,
+ })}
+ {children.xConfig.getPropertyView()}
+ {children.yConfig.getPropertyView()}
+
+ )}
+ {hiddenPropertyView(children)}
+ {children.tooltip.propertyView({label: trans("echarts.tooltip"), tooltip: trans("echarts.tooltipTooltip")})}
+
+
+ {children.chartStyle?.getPropertyView()}
+
+
+ {children.titleStyle?.getPropertyView()}
+
+
+ {children.xAxisStyle?.getPropertyView()}
+
+
+ {children.yAxisStyle?.getPropertyView()}
+
+
+ {children.legendStyle?.getPropertyView()}
+
+
+ {children.data.propertyView({
+ label: trans("chart.data"),
+ })}
+
+
+ );
+
+ const getChatConfigByMode = (mode: string) => {
+ switch(mode) {
+ case "ui":
+ return uiModePropertyView;
+ }
+ }
+ return (
+ <>
+ {getChatConfigByMode(children.mode.getView())}
+
+ );
+}
diff --git a/client/packages/lowcoder-comps/src/comps/lineChartComp/lineChartUtils.ts b/client/packages/lowcoder-comps/src/comps/lineChartComp/lineChartUtils.ts
new file mode 100644
index 0000000000..3dfb3769ef
--- /dev/null
+++ b/client/packages/lowcoder-comps/src/comps/lineChartComp/lineChartUtils.ts
@@ -0,0 +1,398 @@
+import {
+ CharOptionCompType,
+ ChartCompPropsType,
+ ChartSize,
+ noDataAxisConfig,
+ noDataPieChartConfig,
+} from "comps/lineChartComp/lineChartConstants";
+import { getPieRadiusAndCenter } from "comps/basicChartComp/chartConfigs/pieChartConfig";
+import { EChartsOptionWithMap } from "../basicChartComp/reactEcharts/types";
+import _ from "lodash";
+import { chartColorPalette, isNumeric, JSONObject, loadScript } from "lowcoder-sdk";
+import { calcXYConfig } from "comps/basicChartComp/chartConfigs/cartesianAxisConfig";
+import Big from "big.js";
+import { googleMapsApiUrl } from "../basicChartComp/chartConfigs/chartUrls";
+import opacityToHex from "../../util/opacityToHex";
+import parseBackground from "../../util/gradientBackgroundColor";
+import {ba, s} from "@fullcalendar/core/internal-common";
+import {chartStyleWrapper, styleWrapper} from "../../util/styleWrapper";
+
+export function transformData(
+ originData: JSONObject[],
+ xAxis: string,
+ seriesColumnNames: string[]
+) {
+ // aggregate data by x-axis
+ const transformedData: JSONObject[] = [];
+ originData.reduce((prev, cur) => {
+ if (cur === null || cur === undefined) {
+ return prev;
+ }
+ const groupValue = cur[xAxis] as string;
+ if (!prev[groupValue]) {
+ // init as 0
+ const initValue: any = {};
+ seriesColumnNames.forEach((name) => {
+ initValue[name] = 0;
+ });
+ prev[groupValue] = initValue;
+ transformedData.push(prev[groupValue]);
+ }
+ // remain the x-axis data
+ prev[groupValue][xAxis] = groupValue;
+ seriesColumnNames.forEach((key) => {
+ if (key === xAxis) {
+ return;
+ } else if (isNumeric(cur[key])) {
+ const bigNum = Big(cur[key]);
+ prev[groupValue][key] = bigNum.add(prev[groupValue][key]).toNumber();
+ } else {
+ prev[groupValue][key] += 1;
+ }
+ });
+ return prev;
+ }, {} as any);
+ return transformedData;
+}
+
+const notAxisChartSet: Set = new Set(["pie"] as const);
+const notAxisChartSubtypeSet: Set = new Set(["polar"] as const);
+export const echartsConfigOmitChildren = [
+ "hidden",
+ "selectedPoints",
+ "onUIEvent",
+ "mapInstance"
+] as const;
+type EchartsConfigProps = Omit;
+
+
+export function isAxisChart(type: CharOptionCompType, polar: boolean) {
+ return !notAxisChartSet.has(type) && !polar;
+}
+
+export function getSeriesConfig(props: EchartsConfigProps) {
+ let visibleSeries = props.series.filter((s) => !s.getView().hide);
+ if(props.chartConfig.subtype === "waterfall") {
+ const seriesOn = visibleSeries[0];
+ const seriesPlaceholder = visibleSeries[0];
+ visibleSeries = [seriesPlaceholder, seriesOn];
+ }
+ const seriesLength = visibleSeries.length;
+ return visibleSeries.map((s, index) => {
+ if (isAxisChart(props.chartConfig.type, props.chartConfig.polarData.polar)) {
+ let encodeX: string, encodeY: string;
+ const horizontalX = props.xAxisDirection === "horizontal";
+ let itemStyle = props.chartConfig.itemStyle;
+
+ if (horizontalX) {
+ encodeX = props.xAxisKey;
+ encodeY = s.getView().columnName;
+ } else {
+ encodeX = s.getView().columnName;
+ encodeY = props.xAxisKey;
+ }
+ const markLineData = s.getView().markLines.map(line => ({type: line.getView().type}));
+ const markAreaData = s.getView().markAreas.map(area => ([{name: area.getView().name, [horizontalX?"xAxis":"yAxis"]: area.getView().from, label: {
+ position: horizontalX?"top":"right",
+ }}, {[horizontalX?"xAxis":"yAxis"]: area.getView().to}]));
+ return {
+ name: s.getView().seriesName,
+ columnName: s.getView().columnName,
+ selectedMode: "single",
+ select: {
+ itemStyle: {
+ borderColor: "#000",
+ },
+ },
+ step: s.getView().step,
+ encode: {
+ x: encodeX,
+ y: encodeY,
+ },
+ markLine: {
+ data: markLineData,
+ },
+ markArea: {
+ itemStyle: {
+ color: 'rgba(255, 173, 177, 0.4)',
+ },
+ data: markAreaData,
+ },
+ // each type of chart's config
+ ...props.chartConfig,
+ itemStyle: itemStyle,
+ label: {
+ ...props.chartConfig.label,
+ ...(!horizontalX && { position: "outside" }),
+ },
+ };
+ } else {
+ const radiusAndCenter = getPieRadiusAndCenter(seriesLength, index, props.chartConfig);
+ return {
+ ...props.chartConfig,
+ columnName: s.getView().columnName,
+ radius: radiusAndCenter.radius,
+ center: radiusAndCenter.center,
+ name: s.getView().seriesName,
+ selectedMode: "single",
+ encode: {
+ itemName: props.xAxisKey,
+ value: s.getView().columnName,
+ },
+ };
+ }
+ });
+}
+
+// https://echarts.apache.org/en/option.html
+export function getEchartsConfig(
+ props: EchartsConfigProps,
+ chartSize?: ChartSize,
+ theme?: any,
+): EChartsOptionWithMap {
+ // axisChart
+ const axisChart = isAxisChart(props.chartConfig.type, props.chartConfig.polarData.polar);
+ const gridPos = {
+ left: `${props?.left}%`,
+ right: `${props?.right}%`,
+ bottom: `${props?.bottom}%`,
+ top: `${props?.top}%`,
+ };
+
+ let config: any = {
+ title: {
+ text: props.title,
+ top: props.echartsTitleVerticalConfig.top,
+ left:props.echartsTitleConfig.top,
+ textStyle: {
+ ...styleWrapper(props?.titleStyle, theme?.titleStyle)
+ }
+ },
+ backgroundColor: parseBackground( props?.chartStyle?.background || theme?.chartStyle?.backgroundColor || "#FFFFFF"),
+ legend: {
+ ...props.legendConfig,
+ textStyle: {
+ ...styleWrapper(props?.legendStyle, theme?.legendStyle, 15)
+ }
+ },
+ tooltip: props.tooltip && {
+ trigger: "axis",
+ axisPointer: {
+ type: "line",
+ lineStyle: {
+ color: "rgba(0,0,0,0.2)",
+ width: 2,
+ type: "solid"
+ }
+ }
+ },
+ grid: {
+ ...gridPos,
+ containLabel: true,
+ },
+ animationDuration: props.animationDuration,
+ };
+ if (props.areaPieces.length > 0) {
+ config.visualMap = {
+ type: 'piecewise',
+ show: false,
+ dimension: 0,
+ seriesIndex: 0,
+ pieces: props.areaPieces?.filter(p => p.getView().from && p.getView().to && p.getView().color)?.map(p => (
+ {
+ ...(p.getView().from?{min: parseInt(p.getView().from)}:{}),
+ ...(p.getView().to?{max: parseInt(p.getView().to)}:{}),
+ ...(p.getView().color?{color: p.getView().color}:{}),
+ }
+ ))
+ }
+ }
+ if(props.chartConfig.race) {
+ config = {
+ ...config,
+ // Disable init animation.
+ animationDuration: 0,
+ animationDurationUpdate: 2000,
+ animationEasing: 'linear',
+ animationEasingUpdate: 'linear',
+ }
+ }
+ if (props.data.length <= 0) {
+ // no data
+ return {
+ ...config,
+ ...(axisChart ? noDataAxisConfig : noDataPieChartConfig),
+ };
+ }
+ const yAxisConfig = props.yConfig();
+ const seriesColumnNames = props.series
+ .filter((s) => !s.getView().hide)
+ .map((s) => s.getView().columnName);
+ // y-axis is category and time, data doesn't need to aggregate
+ let transformedData =
+ yAxisConfig.type === "category" || yAxisConfig.type === "time" ? props.data : transformData(props.data, props.xAxisKey, seriesColumnNames);
+
+ if(props.chartConfig.polarData.polar) {
+ config = {
+ ...config,
+ polar: {
+ radius: [props.chartConfig.polarData.polarRadiusStart, props.chartConfig.polarData.polarRadiusEnd],
+ },
+ radiusAxis: {
+ type: props.chartConfig.polarData.polarIsTangent?'category':undefined,
+ data: props.chartConfig.polarData.polarIsTangent && props.chartConfig.polarData.labelData.length!==0?props.chartConfig.polarData.labelData:undefined,
+ max: props.chartConfig.polarData.polarIsTangent?undefined:props.chartConfig.polarData.radiusAxisMax || undefined,
+ },
+ angleAxis: {
+ type: props.chartConfig.polarData.polarIsTangent?undefined:'category',
+ data: !props.chartConfig.polarData.polarIsTangent && props.chartConfig.polarData.labelData.length!==0?props.chartConfig.polarData.labelData:undefined,
+ max: props.chartConfig.polarData.polarIsTangent?props.chartConfig.polarData.radiusAxisMax || undefined:undefined,
+ startAngle: props.chartConfig.polarData.polarStartAngle,
+ endAngle: props.chartConfig.polarData.polarEndAngle,
+ },
+ }
+ }
+
+ config = {
+ ...config,
+ dataset: [
+ {
+ source: transformedData,
+ sourceHeader: false,
+ },
+ ],
+ series: getSeriesConfig(props).map(series => ({
+ ...series,
+ encode: {
+ ...series.encode,
+ y: series.columnName,
+ },
+ itemStyle: {
+ ...series.itemStyle,
+ // ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle)
+ },
+ lineStyle: {
+ ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle)
+ },
+ data: transformedData.map((i: any) => i[series.columnName])
+ })),
+ };
+ if (axisChart) {
+ // pure chart's size except the margin around
+ let chartRealSize;
+ if (chartSize) {
+ const rightSize =
+ typeof gridPos.right === "number"
+ ? gridPos.right
+ : (chartSize.w * parseFloat(gridPos.right)) / 100.0;
+ chartRealSize = {
+ // actually it's self-adaptive with the x-axis label on the left, not that accurate but work
+ w: chartSize.w - gridPos.left - rightSize,
+ // also self-adaptive on the bottom
+ h: chartSize.h - gridPos.top - gridPos.bottom,
+ right: rightSize,
+ };
+ }
+ const finalXyConfig = calcXYConfig(
+ props.xConfig,
+ yAxisConfig,
+ props.xAxisDirection,
+ transformedData.map((d) => d[props.xAxisKey]),
+ chartRealSize
+ );
+ config = {
+ ...config,
+ // @ts-ignore
+ xAxis: {
+ ...finalXyConfig.xConfig,
+ axisLabel: {
+ ...styleWrapper(props?.xAxisStyle, theme?.xAxisStyle, 11)
+ },
+ data: finalXyConfig.xConfig.type === "category" && (props.xAxisData as []).length!==0?props?.xAxisData:transformedData.map((i: any) => i[props.xAxisKey]),
+ },
+ // @ts-ignore
+ yAxis: {
+ ...finalXyConfig.yConfig,
+ axisLabel: {
+ ...styleWrapper(props?.yAxisStyle, theme?.yAxisStyle, 11)
+ },
+ data: finalXyConfig.yConfig.type === "category" && (props.xAxisData as []).length!==0?props?.xAxisData:transformedData.map((i: any) => i[props.xAxisKey]),
+ },
+ };
+
+ if(props.chartConfig.race) {
+ config = {
+ ...config,
+ xAxis: {
+ ...config.xAxis,
+ animationDuration: 300,
+ animationDurationUpdate: 300
+ },
+ yAxis: {
+ ...config.yAxis,
+ animationDuration: 300,
+ animationDurationUpdate: 300
+ },
+ }
+ }
+ }
+
+ // console.log("Echarts transformedData and config", transformedData, config);
+ return config;
+}
+
+export function getSelectedPoints(param: any, option: any) {
+ const series = option.series;
+ const dataSource = _.isArray(option.dataset) && option.dataset[0]?.source;
+ if (series && dataSource) {
+ return param.selected.flatMap((selectInfo: any) => {
+ const seriesInfo = series[selectInfo.seriesIndex];
+ if (!seriesInfo || !seriesInfo.encode) {
+ return [];
+ }
+ return selectInfo.dataIndex.map((index: any) => {
+ const commonResult = {
+ seriesName: seriesInfo.name,
+ };
+ if (seriesInfo.encode.itemName && seriesInfo.encode.value) {
+ return {
+ ...commonResult,
+ itemName: dataSource[index][seriesInfo.encode.itemName],
+ value: dataSource[index][seriesInfo.encode.value],
+ };
+ } else {
+ return {
+ ...commonResult,
+ x: dataSource[index][seriesInfo.encode.x],
+ y: dataSource[index][seriesInfo.encode.y],
+ };
+ }
+ });
+ });
+ }
+ return [];
+}
+
+export function loadGoogleMapsScript(apiKey: string) {
+ const mapsUrl = `${googleMapsApiUrl}?key=${apiKey}`;
+ const scripts = document.getElementsByTagName('script');
+ // is script already loaded
+ let scriptIndex = _.findIndex(scripts, (script) => script.src.endsWith(mapsUrl));
+ if(scriptIndex > -1) {
+ return scripts[scriptIndex];
+ }
+ // is script loaded with diff api_key, remove the script and load again
+ scriptIndex = _.findIndex(scripts, (script) => script.src.startsWith(googleMapsApiUrl));
+ if(scriptIndex > -1) {
+ scripts[scriptIndex].remove();
+ }
+
+ const script = document.createElement("script");
+ script.type = "text/javascript";
+ script.src = mapsUrl;
+ script.async = true;
+ script.defer = true;
+ window.document.body.appendChild(script);
+
+ return script;
+}
diff --git a/client/packages/lowcoder-comps/src/comps/lineChartComp/seriesComp.tsx b/client/packages/lowcoder-comps/src/comps/lineChartComp/seriesComp.tsx
new file mode 100644
index 0000000000..5a61774f5c
--- /dev/null
+++ b/client/packages/lowcoder-comps/src/comps/lineChartComp/seriesComp.tsx
@@ -0,0 +1,280 @@
+import {
+ BoolControl,
+ StringControl,
+ list,
+ isNumeric,
+ genRandomKey,
+ Dropdown,
+ Option,
+ RedButton,
+ CustomModal,
+ MultiCompBuilder,
+ valueComp,
+ dropdownControl,
+} from "lowcoder-sdk";
+import { trans } from "i18n/comps";
+
+import { ConstructorToComp, ConstructorToDataType, ConstructorToView } from "lowcoder-core";
+import { CompAction, CustomAction, customAction, isMyCustomAction } from "lowcoder-core";
+
+export type SeriesCompType = ConstructorToComp;
+export type RawSeriesCompType = ConstructorToView;
+type SeriesDataType = ConstructorToDataType;
+type MarkLineDataType = ConstructorToDataType;
+
+type ActionDataType = {
+ type: "chartDataChanged";
+ chartData: Array;
+};
+
+export function newSeries(name: string, columnName: string): SeriesDataType {
+ return {
+ seriesName: name,
+ columnName: columnName,
+ dataIndex: genRandomKey(),
+ };
+}
+
+export function newMarkLine(type: string): MarkLineDataType {
+ return {
+ type,
+ dataIndex: genRandomKey(),
+ };
+}
+
+export const MarkLineTypeOptions = [
+ {
+ label: trans("lineChart.max"),
+ value: "max",
+ },
+ {
+ label: trans("lineChart.average"),
+ value: "average",
+ },
+ {
+ label: trans("lineChart.min"),
+ value: "min",
+ },
+] as const;
+
+export const StepOptions = [
+ {
+ label: trans("lineChart.none"),
+ value: "",
+ },
+ {
+ label: trans("lineChart.start"),
+ value: "start",
+ },
+ {
+ label: trans("lineChart.middle"),
+ value: "middle",
+ },
+ {
+ label: trans("lineChart.end"),
+ value: "end",
+ },
+] as const;
+
+const valToLabel = (val) => MarkLineTypeOptions.find(o => o.value === val)?.label || "";
+const markLinesChildrenMap = {
+ type: dropdownControl(MarkLineTypeOptions, "max"),
+ // unique key, for sort
+ dataIndex: valueComp(""),
+};
+const MarkLinesTmpComp = new MultiCompBuilder(markLinesChildrenMap, (props) => {
+ return props;
+})
+ .setPropertyViewFn((children: any) => {
+ return <>{children.type.propertyView({label: trans("lineChart.type")})};
+ })
+ .build();
+const markAreasChildrenMap = {
+ name: StringControl,
+ from: StringControl,
+ to: StringControl,
+ // unique key, for sort
+ dataIndex: valueComp(""),
+};
+const MarkAreasTmpComp = new MultiCompBuilder(markAreasChildrenMap, (props) => {
+ return props;
+})
+ .setPropertyViewFn((children: any) =>
+ (<>
+ {children.name.propertyView({label: trans("lineChart.name")})}
+ {children.from.propertyView({label: trans("lineChart.from")})}
+ {children.to.propertyView({label: trans("lineChart.to")})}
+ )
+ )
+ .build();
+
+
+export function newMarkArea(): MarkLineDataType {
+ return {
+ dataIndex: genRandomKey(),
+ };
+}
+
+const seriesChildrenMap = {
+ columnName: StringControl,
+ seriesName: StringControl,
+ markLines: list(MarkLinesTmpComp),
+ markAreas: list(MarkAreasTmpComp),
+ hide: BoolControl,
+ // unique key, for sort
+ dataIndex: valueComp(""),
+ step: dropdownControl(StepOptions, ""),
+};
+
+const SeriesTmpComp = new MultiCompBuilder(seriesChildrenMap, (props) => {
+ return props;
+})
+ .setPropertyViewFn(() => {
+ return <>;
+ })
+ .build();
+
+class SeriesComp extends SeriesTmpComp {
+ getPropertyViewWithData(columnOptions: OptionsType): React.ReactNode {
+ return (
+ <>
+ {this.children.seriesName.propertyView({
+ label: trans("chart.seriesName"),
+ })}
+ {
+ this.children.columnName.dispatchChangeValueAction(value);
+ }}
+ />
+ {this.children.step.propertyView({
+ label: trans("lineChart.step"),
+ })}
+ valToLabel(s.getView().type)}
+ popoverTitle={(s) => trans("lineChart.markLineType")}
+ content={(s, index) => (
+ <>
+ {s.getPropertyView({label: "Type"})}
+ {
+ {
+ this.children.markLines.dispatch(this.children.markLines.deleteAction(index));
+ }}
+ >
+ {trans("chart.delete")}
+
+ }
+
+ )}
+ onAdd={() => {
+ this.children.markLines.dispatch(
+ this.children.markLines.pushAction(
+ newMarkLine("max")
+ )
+ );
+ }}
+ onMove={(fromIndex, toIndex) => {
+ const action = this.children.markLines.arrayMoveAction(fromIndex, toIndex);
+ this.children.markLines.dispatch(action);
+ }}
+ hide={(s) => true}
+ onHide={(s, hide) => console.log("onHide")}
+ dataIndex={(s) => {
+ return s.getView().dataIndex;
+ }}
+ />
+ s.getView().name}
+ popoverTitle={(s) => trans("lineChart.markLineType")}
+ content={(s, index) => (
+ <>
+ {s.getPropertyView({label: "Type"})}
+ {
+ {
+ this.children.markAreas.dispatch(this.children.markAreas.deleteAction(index));
+ }}
+ >
+ {trans("chart.delete")}
+
+ }
+
+ )}
+ onAdd={() => {
+ this.children.markAreas.dispatch(
+ this.children.markAreas.pushAction(
+ newMarkArea()
+ )
+ );
+ }}
+ onMove={(fromIndex, toIndex) => {
+ const action = this.children.markAreas.arrayMoveAction(fromIndex, toIndex);
+ this.children.markAreas.dispatch(action);
+ }}
+ hide={(s) => true}
+ onHide={(s, hide) => console.log("onHide")}
+ dataIndex={(s) => {
+ return s.getView().dataIndex;
+ }}
+ />
+
+ );
+ }
+}
+
+const SeriesListTmpComp = list(SeriesComp);
+
+export class SeriesListComp extends SeriesListTmpComp {
+ override reduce(action: CompAction): this {
+ if (isMyCustomAction(action, "chartDataChanged")) {
+ // auto generate series
+ const actions = this.genExampleSeriesActions(action.value.chartData);
+ return this.reduce(this.multiAction(actions));
+ }
+ return super.reduce(action);
+ }
+
+ private genExampleSeriesActions(chartData: Array) {
+ const actions: CustomAction[] = [];
+ if (!chartData || chartData.length <= 0 || !chartData[0]) {
+ return actions;
+ }
+ let delCnt = 0;
+ const existColumns = this.getView().map((s) => s.getView().columnName);
+ // delete series not in data
+ existColumns.forEach((columnName) => {
+ if (chartData[0]?.[columnName] === undefined) {
+ actions.push(this.deleteAction(0));
+ delCnt++;
+ }
+ });
+ if (existColumns.length > delCnt) {
+ // don't generate example if exists
+ return actions;
+ }
+ // generate example series
+ const exampleKeys = Object.keys(chartData[0])
+ .filter((key) => {
+ return !existColumns.includes(key) && isNumeric(chartData[0][key]);
+ })
+ .slice(0, 3);
+ exampleKeys.forEach((key) => actions.push(this.pushAction(newSeries(key, key))));
+ return actions;
+ }
+
+ dispatchDataChanged(chartData: Array): void {
+ this.dispatch(
+ customAction({
+ type: "chartDataChanged",
+ chartData: chartData,
+ })
+ );
+ }
+}
diff --git a/client/packages/lowcoder-comps/src/comps/mermaidComp/index.tsx b/client/packages/lowcoder-comps/src/comps/mermaidComp/index.tsx
index 09ea5cba84..ea143725c4 100644
--- a/client/packages/lowcoder-comps/src/comps/mermaidComp/index.tsx
+++ b/client/packages/lowcoder-comps/src/comps/mermaidComp/index.tsx
@@ -10,11 +10,98 @@ import {
import Mermaid from "./mermaid";
+// Collection of example mermaid diagrams that showcase different diagram types
+const mermaidExamples = {
+ flowchart:
+`flowchart TD
+ A[Start] --> B{Is it working?}
+ B -->|Yes| C[Great!]
+ B -->|No| D[Debug]
+ D --> E[Check Documentation]
+ E --> B
+ C --> F[Deploy]`,
+
+ sequence:
+`sequenceDiagram
+ participant User
+ participant App
+ participant API
+ participant DB
+
+ User->>App: Submit Form
+ App->>API: Send Request
+ API->>DB: Query Data
+ DB->>API: Return Result
+ API->>App: Send Response
+ App->>User: Show Result`,
+
+ classDiagram:
+`classDiagram
+ class User {
+ +String name
+ +String email
+ +authenticate()
+ +updateProfile()
+ }
+ class Product {
+ +String name
+ +Number price
+ +getDetails()
+ }
+ class Order {
+ +Date date
+ +Number total
+ +process()
+ }
+ User "1" --> "*" Order
+ Order "*" --> "*" Product`,
+
+ gantt:
+`gantt
+ title Project Timeline
+ dateFormat YYYY-MM-DD
+
+ section Planning
+ Research :done, a1, 2023-01-01, 10d
+ Requirements :active, a2, after a1, 7d
+
+ section Development
+ Design :a3, after a2, 8d
+ Implementation :a4, after a3, 14d
+ Testing :a5, after a4, 7d
+
+ section Deployment
+ Release :milestone, after a5, 0d`,
+
+ entityRelationship:
+`erDiagram
+ CUSTOMER }|--o{ ORDER : places
+ ORDER ||--|{ ORDER_ITEM : contains
+ CUSTOMER ||--o{ PAYMENT : makes
+ PRODUCT ||--|{ ORDER_ITEM : "ordered in"`,
+
+ journey:
+`journey
+ title User Purchase Journey
+ section Visit Website
+ Homepage: 5: User
+ Product listing: 4: User
+ Product detail: 3: User
+ section Purchase
+ Add to cart: 4: User
+ Checkout: 3: User, Admin
+ Payment: 3: User, Admin
+ section Post-Purchase
+ Order confirmation: 5: User, Admin
+ Shipping: 4: Admin
+ Delivery: 5: User, Admin`
+};
+
+// Using the flowchart example as default
const childrenMap = {
code: stringExposingStateControl(
"code",
- `graph LR
- Start --> Stop`
+ mermaidExamples.flowchart
),
onEvent: eventHandlerControl([
{
diff --git a/client/packages/lowcoder-comps/src/comps/parallelChartComp/parallelChartComp.tsx b/client/packages/lowcoder-comps/src/comps/parallelChartComp/parallelChartComp.tsx
new file mode 100644
index 0000000000..51eedee133
--- /dev/null
+++ b/client/packages/lowcoder-comps/src/comps/parallelChartComp/parallelChartComp.tsx
@@ -0,0 +1,286 @@
+import {
+ changeChildAction,
+ changeValueAction,
+ CompAction,
+ CompActionTypes,
+ wrapChildAction,
+} from "lowcoder-core";
+import { AxisFormatterComp, EchartsAxisType } from "../basicChartComp/chartConfigs/cartesianAxisConfig";
+import { parallelChartChildrenMap, ChartSize, getDataKeys } from "./parallelChartConstants";
+import { parallelChartPropertyView } from "./parallelChartPropertyView";
+import _ from "lodash";
+import { useContext, useEffect, useMemo, useRef, useState } from "react";
+import { useResizeDetector } from "react-resize-detector";
+import ReactECharts from "../basicChartComp/reactEcharts";
+import * as echarts from "echarts";
+import {
+ childrenToProps,
+ depsConfig,
+ genRandomKey,
+ NameConfig,
+ UICompBuilder,
+ withDefault,
+ withExposingConfigs,
+ withViewFn,
+ ThemeContext,
+ chartColorPalette,
+ getPromiseAfterDispatch,
+ dropdownControl,
+} from "lowcoder-sdk";
+import { getEchartsLocale, i18nObjs, trans } from "i18n/comps";
+import {
+ echartsConfigOmitChildren,
+ getEchartsConfig,
+ getSelectedPoints,
+} from "./parallelChartUtils";
+import 'echarts-extension-gmap';
+import log from "loglevel";
+
+let clickEventCallback = () => {};
+
+const chartModeOptions = [
+ {
+ label: "UI",
+ value: "ui",
+ }
+] as const;
+
+let ParallelChartTmpComp = (function () {
+ return new UICompBuilder({mode:dropdownControl(chartModeOptions,'ui'),...parallelChartChildrenMap}, () => null)
+ .setPropertyViewFn(parallelChartPropertyView)
+ .build();
+})();
+
+ParallelChartTmpComp = withViewFn(ParallelChartTmpComp, (comp) => {
+ const mode = comp.children.mode.getView();
+ const onUIEvent = comp.children.onUIEvent.getView();
+ const onEvent = comp.children.onEvent.getView();
+ const echartsCompRef = useRef();
+ const containerRef = useRef(null);
+ const [chartSize, setChartSize] = useState();
+ const firstResize = useRef(true);
+ const theme = useContext(ThemeContext);
+ const defaultChartTheme = {
+ color: chartColorPalette,
+ backgroundColor: "#fff",
+ };
+
+ let themeConfig = defaultChartTheme;
+ try {
+ themeConfig = theme?.theme.chart ? JSON.parse(theme?.theme.chart) : defaultChartTheme;
+ } catch (error) {
+ log.error('theme chart error: ', error);
+ }
+
+ const triggerClickEvent = async (dispatch: any, action: CompAction) => {
+ await getPromiseAfterDispatch(
+ dispatch,
+ action,
+ { autoHandleAfterReduce: true }
+ );
+ onEvent('click');
+ }
+
+ useEffect(() => {
+ const echartsCompInstance = echartsCompRef?.current?.getEchartsInstance();
+ if (!echartsCompInstance) {
+ return _.noop;
+ }
+ echartsCompInstance?.on("click", (param: any) => {
+ document.dispatchEvent(new CustomEvent("clickEvent", {
+ bubbles: true,
+ detail: {
+ action: 'click',
+ data: param.data,
+ }
+ }));
+ triggerClickEvent(
+ comp.dispatch,
+ changeChildAction("lastInteractionData", param.data, false)
+ );
+ });
+ return () => {
+ echartsCompInstance?.off("click");
+ document.removeEventListener('clickEvent', clickEventCallback)
+ };
+ }, []);
+
+ useEffect(() => {
+ // bind events
+ const echartsCompInstance = echartsCompRef?.current?.getEchartsInstance();
+ if (!echartsCompInstance) {
+ return _.noop;
+ }
+ echartsCompInstance?.on("selectchanged", (param: any) => {
+ const option: any = echartsCompInstance?.getOption();
+ document.dispatchEvent(new CustomEvent("clickEvent", {
+ bubbles: true,
+ detail: {
+ action: param.fromAction,
+ data: getSelectedPoints(param, option)
+ }
+ }));
+
+ if (param.fromAction === "select") {
+ comp.dispatch(changeChildAction("selectedPoints", getSelectedPoints(param, option), false));
+ onUIEvent("select");
+ } else if (param.fromAction === "unselect") {
+ comp.dispatch(changeChildAction("selectedPoints", getSelectedPoints(param, option), false));
+ onUIEvent("unselect");
+ }
+
+ triggerClickEvent(
+ comp.dispatch,
+ changeChildAction("lastInteractionData", getSelectedPoints(param, option), false)
+ );
+ });
+ // unbind
+ return () => {
+ echartsCompInstance?.off("selectchanged");
+ document.removeEventListener('clickEvent', clickEventCallback)
+ };
+ }, [onUIEvent]);
+
+ const echartsConfigChildren = _.omit(comp.children, echartsConfigOmitChildren);
+ const childrenProps = childrenToProps(echartsConfigChildren);
+
+ const option = useMemo(() => {
+ return getEchartsConfig(
+ childrenProps as ToViewReturn,
+ chartSize,
+ themeConfig
+ );
+ }, [theme, childrenProps, chartSize, ...Object.values(echartsConfigChildren)]);
+
+ useResizeDetector({
+ targetRef: containerRef,
+ onResize: ({width, height}) => {
+ if (width && height) {
+ setChartSize({ w: width, h: height });
+ }
+ if (!firstResize.current) {
+ // ignore the first resize, which will impact the loading animation
+ echartsCompRef.current?.getEchartsInstance().resize();
+ } else {
+ firstResize.current = false;
+ }
+ }
+ })
+
+ return (
+
+ (echartsCompRef.current = e)}
+ style={{ height: "100%" }}
+ notMerge
+ lazyUpdate
+ opts={{ locale: getEchartsLocale() }}
+ option={option}
+ mode={mode}
+ />
+
+ );
+});
+
+function getYAxisFormatContextValue(
+ data: Array,
+ yAxisType: EchartsAxisType,
+ yAxisName?: string
+) {
+ const dataSample = yAxisName && data.length > 0 && data[0][yAxisName];
+ let contextValue = dataSample;
+ if (yAxisType === "time") {
+ // to timestamp
+ const time =
+ typeof dataSample === "number" || typeof dataSample === "string"
+ ? new Date(dataSample).getTime()
+ : null;
+ if (time) contextValue = time;
+ }
+ return contextValue;
+}
+
+ParallelChartTmpComp = class extends ParallelChartTmpComp {
+ private lastYAxisFormatContextVal?: JSONValue;
+ private lastColorContext?: JSONObject;
+
+ updateContext(comp: this) {
+ // the context value of axis format
+ let resultComp = comp;
+ const data = comp.children.data.getView();
+ const yAxisContextValue = getYAxisFormatContextValue(
+ data,
+ comp.children.yConfig.children.yAxisType.getView(),
+ );
+ if (yAxisContextValue !== comp.lastYAxisFormatContextVal) {
+ comp.lastYAxisFormatContextVal = yAxisContextValue;
+ resultComp = comp.setChild(
+ "yConfig",
+ comp.children.yConfig.reduce(
+ wrapChildAction(
+ "formatter",
+ AxisFormatterComp.changeContextDataAction({ value: yAxisContextValue })
+ )
+ )
+ );
+ }
+ return resultComp;
+ }
+
+ override reduce(action: CompAction): this {
+ const comp = super.reduce(action);
+ if (action.type === CompActionTypes.UPDATE_NODES_V2) {
+ const newData = comp.children.data.getView();
+ // data changes
+ if (comp.children.data !== this.children.data) {
+ setTimeout(() => {
+ // update x-axis value
+ const keys = getDataKeys(newData);
+ if (keys.length > 0 && !keys.includes(comp.children.xAxisKey.getView())) {
+ comp.children.xAxisKey.dispatch(changeValueAction(keys[0] || ""));
+ }
+ if (keys.length > 0 && !keys.includes(comp.children.yAxisKey.getView())) {
+ comp.children.yAxisKey.dispatch(changeValueAction(keys[1] || ""));
+ }
+ }, 0);
+ }
+ return this.updateContext(comp);
+ }
+ return comp;
+ }
+
+ override autoHeight(): boolean {
+ return false;
+ }
+};
+
+let ParallelChartComp = withExposingConfigs(ParallelChartTmpComp, [
+ depsConfig({
+ name: "selectedPoints",
+ desc: trans("chart.selectedPointsDesc"),
+ depKeys: ["selectedPoints"],
+ func: (input) => {
+ return input.selectedPoints;
+ },
+ }),
+ depsConfig({
+ name: "lastInteractionData",
+ desc: trans("chart.lastInteractionDataDesc"),
+ depKeys: ["lastInteractionData"],
+ func: (input) => {
+ return input.lastInteractionData;
+ },
+ }),
+ depsConfig({
+ name: "data",
+ desc: trans("chart.dataDesc"),
+ depKeys: ["data", "mode"],
+ func: (input) =>[] ,
+ }),
+ new NameConfig("title", trans("chart.titleDesc")),
+]);
+
+
+export const ParallelChartCompWithDefault = withDefault(ParallelChartComp, {
+ xAxisKey: "date",
+});
diff --git a/client/packages/lowcoder-comps/src/comps/parallelChartComp/parallelChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/parallelChartComp/parallelChartConstants.tsx
new file mode 100644
index 0000000000..4b383d6451
--- /dev/null
+++ b/client/packages/lowcoder-comps/src/comps/parallelChartComp/parallelChartConstants.tsx
@@ -0,0 +1,193 @@
+import {
+ jsonControl,
+ stateComp,
+ toJSONObjectArray,
+ toObject,
+ BoolControl,
+ ColorControl,
+ withDefault,
+ StringControl,
+ NumberControl,
+ dropdownControl,
+ list,
+ eventHandlerControl,
+ valueComp,
+ withType,
+ uiChildren,
+ clickEvent,
+ toArray,
+ styleControl,
+ EchartDefaultTextStyle,
+ EchartDefaultChartStyle,
+ MultiCompBuilder,
+} from "lowcoder-sdk";
+import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core";
+import { XAxisConfig, YAxisConfig } from "../basicChartComp/chartConfigs/cartesianAxisConfig";
+import { LegendConfig } from "../basicChartComp/chartConfigs/legendConfig";
+import { EchartsLegendConfig } from "../basicChartComp/chartConfigs/echartsLegendConfig";
+import { EchartsLabelConfig } from "../basicChartComp/chartConfigs/echartsLabelConfig";
+import { EChartsOption } from "echarts";
+import { i18nObjs, trans } from "i18n/comps";
+import {EchartsTitleVerticalConfig} from "../chartComp/chartConfigs/echartsTitleVerticalConfig";
+import {EchartsTitleConfig} from "../basicChartComp/chartConfigs/echartsTitleConfig";
+
+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 XAxisDirectionOptions = [
+ {
+ label: trans("chart.horizontal"),
+ value: "horizontal",
+ },
+ {
+ label: trans("chart.vertical"),
+ value: "vertical",
+ },
+] as const;
+
+export type XAxisDirectionType = ValueFromOption;
+
+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 noDataParallelChartConfig = {
+ animation: false,
+ tooltip: {
+ show: false,
+ },
+ legend: {
+ formatter: trans("chart.unknown"),
+ top: "bottom",
+ selectedMode: false,
+ },
+ color: ["#B8BBCC", "#CED0D9", "#DCDEE6", "#E6E6EB"],
+ series: [],
+} as EChartsOption;
+
+export type ChartSize = { w: number; h: number };
+
+export const getDataKeys = (data: Array) => {
+ if (!data) {
+ return [];
+ }
+ const dataKeys: Array = [];
+ data[0].forEach((key) => {
+ if (!dataKeys.includes(key)) {
+ dataKeys.push(key);
+ }
+ });
+ return dataKeys;
+};
+
+export const chartUiModeChildren = {
+ title: withDefault(StringControl, trans("echarts.defaultTitle")),
+ data: jsonControl(toArray, i18nObjs.defaultDatasourceParallel),
+ xAxisKey: valueComp(""), // x-axis, key from data
+ xAxisDirection: dropdownControl(XAxisDirectionOptions, "horizontal"),
+ xAxisData: jsonControl(toArray, []),
+ yAxisKey: valueComp(""), // x-axis, key from data
+ xConfig: XAxisConfig,
+ yConfig: YAxisConfig,
+ legendConfig: LegendConfig,
+ onUIEvent: eventHandlerControl(UIEventOptions),
+};
+
+let chartJsonModeChildren: any = {
+ echartsOption: jsonControl(toObject, i18nObjs.defaultEchartsJsonOption),
+ echartsTitle: withDefault(StringControl, trans("echarts.defaultTitle")),
+ echartsLegendConfig: EchartsLegendConfig,
+ echartsLabelConfig: EchartsLabelConfig,
+ echartsTitleVerticalConfig: EchartsTitleVerticalConfig,
+ echartsTitleConfig:EchartsTitleConfig,
+
+ left:withDefault(NumberControl,trans('chart.defaultLeft')),
+ right:withDefault(NumberControl,trans('chart.defaultRight')),
+ top:withDefault(NumberControl,trans('chart.defaultTop')),
+ bottom:withDefault(NumberControl,trans('chart.defaultBottom')),
+
+ tooltip: withDefault(BoolControl, true),
+ legendVisibility: withDefault(BoolControl, true),
+}
+
+if (EchartDefaultChartStyle && EchartDefaultTextStyle) {
+ chartJsonModeChildren = {
+ ...chartJsonModeChildren,
+ chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'),
+ titleStyle: styleControl(EchartDefaultTextStyle, 'titleStyle'),
+ xAxisStyle: styleControl(EchartDefaultTextStyle, 'xAxis'),
+ yAxisStyle: styleControl(EchartDefaultTextStyle, 'yAxisStyle'),
+ legendStyle: styleControl(EchartDefaultTextStyle, 'legendStyle'),
+ }
+}
+
+export type UIChartDataType = {
+ seriesName: string;
+ // coordinate chart
+ x?: any;
+ y?: any;
+ // parallel or funnel
+ itemName?: any;
+ value?: any;
+};
+
+export type NonUIChartDataType = {
+ name: string;
+ value: any;
+}
+
+export const parallelChartChildrenMap = {
+ selectedPoints: stateComp>([]),
+ lastInteractionData: stateComp | NonUIChartDataType>({}),
+ onEvent: eventHandlerControl([clickEvent] as const),
+ ...chartUiModeChildren,
+ ...chartJsonModeChildren,
+};
+
+const chartUiChildrenMap = uiChildren(parallelChartChildrenMap);
+export type ChartCompPropsType = RecordConstructorToView;
+export type ChartCompChildrenType = RecordConstructorToComp;
diff --git a/client/packages/lowcoder-comps/src/comps/parallelChartComp/parallelChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/parallelChartComp/parallelChartPropertyView.tsx
new file mode 100644
index 0000000000..3106c44d78
--- /dev/null
+++ b/client/packages/lowcoder-comps/src/comps/parallelChartComp/parallelChartPropertyView.tsx
@@ -0,0 +1,70 @@
+import { changeChildAction, CompAction } from "lowcoder-core";
+import { ChartCompChildrenType, getDataKeys } from "./parallelChartConstants";
+import {
+ CustomModal,
+ Dropdown,
+ hiddenPropertyView,
+ Option,
+ RedButton,
+ Section,
+ sectionNames,
+ controlItem,
+} from "lowcoder-sdk";
+import { trans } from "i18n/comps";
+
+export function parallelChartPropertyView(
+ children: ChartCompChildrenType,
+ dispatch: (action: CompAction) => void
+) {
+ const columnOptions = getDataKeys(children.data.getView()).map((key) => ({
+ label: key,
+ value: key,
+ }));
+
+ const uiModePropertyView = (
+ <>
+
+
+ {children.onUIEvent.propertyView({title: trans("chart.chartEventHandlers")})}
+
+
+ {children.onEvent.propertyView()}
+
+
+
+ {children.echartsTitleConfig.getPropertyView()}
+ {children.echartsTitleVerticalConfig.getPropertyView()}
+ {children.title.propertyView({ label: trans("chart.title") })}
+ {children.left.propertyView({ label: trans("chart.left"), tooltip: trans("echarts.leftTooltip") })}
+ {children.right.propertyView({ label: trans("chart.right"), tooltip: trans("echarts.rightTooltip") })}
+ {children.top.propertyView({ label: trans("chart.top"), tooltip: trans("echarts.topTooltip") })}
+ {children.bottom.propertyView({ label: trans("chart.bottom"), tooltip: trans("echarts.bottomTooltip") })}
+ {hiddenPropertyView(children)}
+ {children.tooltip.propertyView({label: trans("echarts.tooltip"), tooltip: trans("echarts.tooltipTooltip")})}
+
+
+ {children.chartStyle?.getPropertyView()}
+
+
+ {children.titleStyle?.getPropertyView()}
+
+
+ {children.data.propertyView({
+ label: trans("chart.data"),
+ })}
+
+
+ );
+
+ const getChatConfigByMode = (mode: string) => {
+ switch(mode) {
+ case "ui":
+ return uiModePropertyView;
+ }
+ }
+ return (
+ <>
+ {getChatConfigByMode(children.mode.getView())}
+
+ );
+}
diff --git a/client/packages/lowcoder-comps/src/comps/parallelChartComp/parallelChartUtils.ts b/client/packages/lowcoder-comps/src/comps/parallelChartComp/parallelChartUtils.ts
new file mode 100644
index 0000000000..0f7835bb08
--- /dev/null
+++ b/client/packages/lowcoder-comps/src/comps/parallelChartComp/parallelChartUtils.ts
@@ -0,0 +1,240 @@
+import {
+ ChartCompPropsType,
+ ChartSize,
+ noDataParallelChartConfig,
+} from "comps/parallelChartComp/parallelChartConstants";
+import { EChartsOptionWithMap } from "../basicChartComp/reactEcharts/types";
+import _ from "lodash";
+import { googleMapsApiUrl } from "../basicChartComp/chartConfigs/chartUrls";
+import parseBackground from "../../util/gradientBackgroundColor";
+import {chartStyleWrapper, styleWrapper} from "../../util/styleWrapper";
+// Define the configuration interface to match the original transform
+
+interface AggregateConfig {
+ resultDimensions: Array<{
+ name: string;
+ from: string;
+ method?: string; // e.g., 'min', 'Q1', 'median', 'Q3', 'max'
+ }>;
+ groupBy: string;
+}
+
+// Custom transform function
+function customAggregateTransform(params: {
+ upstream: { source: any[] };
+ config: AggregateConfig;
+}): any[] {
+ const { upstream, config } = params;
+ const data = upstream.source;
+
+ // Assume data is an array of arrays, with the first row as headers
+ const headers = data[0];
+ const rows = data.slice(1);
+
+ // Find the index of the groupBy column
+ const groupByIndex = headers.indexOf(config.groupBy);
+ if (groupByIndex === -1) {
+ return [];
+ }
+
+ // Group rows by the groupBy column
+ const groups: { [key: string]: any[][] } = {};
+ rows.forEach(row => {
+ const key = row[groupByIndex];
+ if (!groups[key]) {
+ groups[key] = [];
+ }
+ groups[key].push(row);
+ });
+
+ // Define aggregation functions
+ const aggregators: {
+ [method: string]: (values: number[]) => number;
+ } = {
+ min: values => Math.min(...values),
+ max: values => Math.max(...values),
+ Q1: values => percentile(values, 25),
+ median: values => percentile(values, 50),
+ Q3: values => percentile(values, 75),
+ };
+
+ // Helper function to calculate percentiles (Q1, median, Q3)
+ function percentile(arr: number[], p: number): number {
+ const sorted = arr.slice().sort((a, b) => a - b);
+ const index = (p / 100) * (sorted.length - 1);
+ const i = Math.floor(index);
+ const f = index - i;
+ if (i === sorted.length - 1) {
+ return sorted[i];
+ }
+ return sorted[i] + f * (sorted[i + 1] - sorted[i]);
+ }
+
+ // Prepare output headers from resultDimensions
+ const outputHeaders = config.resultDimensions.map(dim => dim.name);
+
+ // Compute aggregated data for each group
+ const aggregatedData: any[][] = [];
+ for (const key in groups) {
+ const groupRows = groups[key];
+ const row: any[] = [];
+
+ config.resultDimensions.forEach(dim => {
+ if (dim.from === config.groupBy) {
+ // Include the group key directly
+ row.push(key);
+ } else {
+ // Find the index of the 'from' column
+ const fromIndex = headers.indexOf(dim.from);
+ if (fromIndex === -1) {
+ return;
+ }
+ // Extract values for the 'from' column in this group
+ const values = groupRows
+ .map(r => parseFloat(r[fromIndex]))
+ .filter(v => !isNaN(v));
+ if (dim.method && aggregators[dim.method]) {
+ // Apply the aggregation method
+ row.push(aggregators[dim.method](values));
+ } else {
+ return;
+ }
+ }
+ });
+
+ aggregatedData.push(row);
+ }
+
+ // Return the transformed data with headers
+ return [outputHeaders, ...aggregatedData];
+}
+
+export const echartsConfigOmitChildren = [
+ "hidden",
+ "selectedPoints",
+ "onUIEvent",
+ "mapInstance"
+] as const;
+type EchartsConfigProps = Omit;
+
+// https://echarts.apache.org/en/option.html
+export function getEchartsConfig(
+ props: EchartsConfigProps,
+ chartSize?: ChartSize,
+ theme?: any,
+): EChartsOptionWithMap {
+ const gridPos = {
+ left: `${props?.left}%`,
+ right: `${props?.right}%`,
+ bottom: `${props?.bottom}%`,
+ top: `${props?.top}%`,
+ };
+
+ let config: any = {
+ title: {
+ text: props.title,
+ top: props.echartsTitleVerticalConfig.top,
+ left:props.echartsTitleConfig.top,
+ textStyle: {
+ ...styleWrapper(props?.titleStyle, theme?.titleStyle)
+ }
+ },
+ backgroundColor: parseBackground( props?.chartStyle?.background || theme?.chartStyle?.backgroundColor || "#FFFFFF"),
+ tooltip: props.tooltip && {
+ trigger: "axis",
+ axisPointer: {
+ type: "line",
+ lineStyle: {
+ color: "rgba(0,0,0,0.2)",
+ width: 2,
+ type: "solid"
+ }
+ }
+ },
+ grid: {
+ ...gridPos,
+ containLabel: true,
+ },
+ };
+
+ if (props.data.length <= 0) {
+ // no data
+ return {
+ ...config,
+ ...noDataParallelChartConfig,
+ };
+ }
+ // y-axis is category and time, data doesn't need to aggregate
+ let transformedData = props.data;
+
+ config = {
+ ...config,
+ series: [{
+ name: 'parallel',
+ type: 'parallel',
+ lineStyle: {
+ width: 4
+ },
+ data: props.data.slice(1)
+ }],
+ parallelAxis: props.data[0].map((c, i) => ({ dim: i, name: c, type: typeof props.data[1][i] === 'string'?'category':'value'}))
+ };
+
+ return config;
+}
+
+export function getSelectedPoints(param: any, option: any) {
+ const series = option.series;
+ const dataSource = _.isArray(option.dataset) && option.dataset[0]?.source;
+ if (series && dataSource) {
+ return param.selected.flatMap((selectInfo: any) => {
+ const seriesInfo = series[selectInfo.seriesIndex];
+ if (!seriesInfo || !seriesInfo.encode) {
+ return [];
+ }
+ return selectInfo.dataIndex.map((index: any) => {
+ const commonResult = {
+ seriesName: seriesInfo.name,
+ };
+ if (seriesInfo.encode.itemName && seriesInfo.encode.value) {
+ return {
+ ...commonResult,
+ itemName: dataSource[index][seriesInfo.encode.itemName],
+ value: dataSource[index][seriesInfo.encode.value],
+ };
+ } else {
+ return {
+ ...commonResult,
+ x: dataSource[index][seriesInfo.encode.x],
+ y: dataSource[index][seriesInfo.encode.y],
+ };
+ }
+ });
+ });
+ }
+ return [];
+}
+
+export function loadGoogleMapsScript(apiKey: string) {
+ const mapsUrl = `${googleMapsApiUrl}?key=${apiKey}`;
+ const scripts = document.getElementsByTagName('script');
+ // is script already loaded
+ let scriptIndex = _.findIndex(scripts, (script) => script.src.endsWith(mapsUrl));
+ if(scriptIndex > -1) {
+ return scripts[scriptIndex];
+ }
+ // is script loaded with diff api_key, remove the script and load again
+ scriptIndex = _.findIndex(scripts, (script) => script.src.startsWith(googleMapsApiUrl));
+ if(scriptIndex > -1) {
+ scripts[scriptIndex].remove();
+ }
+
+ const script = document.createElement("script");
+ script.type = "text/javascript";
+ script.src = mapsUrl;
+ script.async = true;
+ script.defer = true;
+ window.document.body.appendChild(script);
+
+ return script;
+}
diff --git a/client/packages/lowcoder-comps/src/comps/pieChartComp/pieChartComp.tsx b/client/packages/lowcoder-comps/src/comps/pieChartComp/pieChartComp.tsx
new file mode 100644
index 0000000000..aaa5f01984
--- /dev/null
+++ b/client/packages/lowcoder-comps/src/comps/pieChartComp/pieChartComp.tsx
@@ -0,0 +1,318 @@
+import {
+ changeChildAction,
+ changeValueAction,
+ CompAction,
+ CompActionTypes,
+ wrapChildAction,
+} from "lowcoder-core";
+import { AxisFormatterComp, EchartsAxisType } from "../basicChartComp/chartConfigs/cartesianAxisConfig";
+import { pieChartChildrenMap, ChartSize, getDataKeys } from "./pieChartConstants";
+import { pieChartPropertyView } from "./pieChartPropertyView";
+import _ from "lodash";
+import { useContext, useEffect, useMemo, useRef, useState } from "react";
+import { useResizeDetector } from "react-resize-detector";
+import ReactECharts from "../basicChartComp/reactEcharts";
+import * as echarts from "echarts";
+import {
+ childrenToProps,
+ depsConfig,
+ genRandomKey,
+ NameConfig,
+ UICompBuilder,
+ withDefault,
+ withExposingConfigs,
+ withViewFn,
+ ThemeContext,
+ chartColorPalette,
+ getPromiseAfterDispatch,
+ dropdownControl,
+} from "lowcoder-sdk";
+import { getEchartsLocale, i18nObjs, trans } from "i18n/comps";
+import {
+ echartsConfigOmitChildren,
+ getEchartsConfig,
+ getSelectedPoints,
+} from "./pieChartUtils";
+import 'echarts-extension-gmap';
+import log from "loglevel";
+
+let clickEventCallback = () => {};
+
+const chartModeOptions = [
+ {
+ label: "UI",
+ value: "ui",
+ }
+] as const;
+
+let PieChartTmpComp = (function () {
+ return new UICompBuilder({mode:dropdownControl(chartModeOptions,'ui'),...pieChartChildrenMap}, () => null)
+ .setPropertyViewFn(pieChartPropertyView)
+ .build();
+})();
+
+PieChartTmpComp = withViewFn(PieChartTmpComp, (comp) => {
+ const mode = comp.children.mode.getView();
+ const onUIEvent = comp.children.onUIEvent.getView();
+ const onEvent = comp.children.onEvent.getView();
+ const echartsCompRef = useRef();
+ const containerRef = useRef(null);
+ const [chartSize, setChartSize] = useState();
+ const firstResize = useRef(true);
+ const theme = useContext(ThemeContext);
+ const defaultChartTheme = {
+ color: chartColorPalette,
+ backgroundColor: "#fff",
+ };
+
+ let themeConfig = defaultChartTheme;
+ try {
+ themeConfig = theme?.theme.chart ? JSON.parse(theme?.theme.chart) : defaultChartTheme;
+ } catch (error) {
+ log.error('theme chart error: ', error);
+ }
+
+ const triggerClickEvent = async (dispatch: any, action: CompAction) => {
+ await getPromiseAfterDispatch(
+ dispatch,
+ action,
+ { autoHandleAfterReduce: true }
+ );
+ onEvent('click');
+ }
+
+ useEffect(() => {
+ const echartsCompInstance = echartsCompRef?.current?.getEchartsInstance();
+ if (!echartsCompInstance) {
+ return _.noop;
+ }
+ echartsCompInstance?.on("click", (param: any) => {
+ document.dispatchEvent(new CustomEvent("clickEvent", {
+ bubbles: true,
+ detail: {
+ action: 'click',
+ data: param.data,
+ }
+ }));
+ triggerClickEvent(
+ comp.dispatch,
+ changeChildAction("lastInteractionData", param.data, false)
+ );
+ });
+ return () => {
+ echartsCompInstance?.off("click");
+ document.removeEventListener('clickEvent', clickEventCallback)
+ };
+ }, []);
+
+ useEffect(() => {
+ // bind events
+ const echartsCompInstance = echartsCompRef?.current?.getEchartsInstance();
+ if (!echartsCompInstance) {
+ return _.noop;
+ }
+ echartsCompInstance?.on("selectchanged", (param: any) => {
+ const option: any = echartsCompInstance?.getOption();
+ document.dispatchEvent(new CustomEvent("clickEvent", {
+ bubbles: true,
+ detail: {
+ action: param.fromAction,
+ data: getSelectedPoints(param, option)
+ }
+ }));
+
+ if (param.fromAction === "select") {
+ comp.dispatch(changeChildAction("selectedPoints", getSelectedPoints(param, option), false));
+ onUIEvent("select");
+ } else if (param.fromAction === "unselect") {
+ comp.dispatch(changeChildAction("selectedPoints", getSelectedPoints(param, option), false));
+ onUIEvent("unselect");
+ }
+
+ triggerClickEvent(
+ comp.dispatch,
+ changeChildAction("lastInteractionData", getSelectedPoints(param, option), false)
+ );
+ });
+ // unbind
+ return () => {
+ echartsCompInstance?.off("selectchanged");
+ document.removeEventListener('clickEvent', clickEventCallback)
+ };
+ }, [onUIEvent]);
+
+ const echartsConfigChildren = _.omit(comp.children, echartsConfigOmitChildren);
+ const childrenProps = childrenToProps(echartsConfigChildren);
+ const [mapJson, setMapJson] = useState(null);
+ useEffect(() => {
+ const fetchMapData = async () => {
+ if (childrenProps.chartConfig.subtype === 'geoPie') {
+ let fetchedMapJson = i18nObjs.usaMap;
+ try {
+ const response = await fetch(childrenProps.chartConfig.mapUrl, childrenProps.chartConfig.mapSpecial);
+ fetchedMapJson = await response.json();
+ } catch {}
+ echarts.registerMap('jsonmap', fetchedMapJson);
+ setMapJson(fetchedMapJson);
+ }
+ };
+
+ fetchMapData();
+ }, [childrenProps.chartConfig.subtype, childrenProps.chartConfig.mapUrl, childrenProps.chartConfig.mapSpecial]);
+
+ const option = useMemo(() => {
+ if (!mapJson && childrenProps.chartConfig.subtype === 'geoPie') {
+ return {}; // Return an empty object or some default value until the map is loaded
+ }
+ return getEchartsConfig(
+ childrenProps as ToViewReturn,
+ chartSize,
+ themeConfig
+ );
+ }, [mapJson, theme, childrenProps, chartSize, ...Object.values(echartsConfigChildren)]);
+
+ useResizeDetector({
+ targetRef: containerRef,
+ onResize: ({width, height}) => {
+ if (width && height) {
+ setChartSize({ w: width, h: height });
+ }
+ if (!firstResize.current) {
+ // ignore the first resize, which will impact the loading animation
+ echartsCompRef.current?.getEchartsInstance().resize();
+ } else {
+ firstResize.current = false;
+ }
+ }
+ })
+
+ return (
+
+ (echartsCompRef.current = e)}
+ style={{ height: "100%" }}
+ notMerge
+ lazyUpdate
+ opts={{ locale: getEchartsLocale() }}
+ option={option}
+ mode={mode}
+ />
+
+ );
+});
+
+function getYAxisFormatContextValue(
+ data: Array,
+ yAxisType: EchartsAxisType,
+ yAxisName?: string
+) {
+ const dataSample = yAxisName && data.length > 0 && data[0][yAxisName];
+ let contextValue = dataSample;
+ if (yAxisType === "time") {
+ // to timestamp
+ const time =
+ typeof dataSample === "number" || typeof dataSample === "string"
+ ? new Date(dataSample).getTime()
+ : null;
+ if (time) contextValue = time;
+ }
+ return contextValue;
+}
+
+PieChartTmpComp = class extends PieChartTmpComp {
+ private lastYAxisFormatContextVal?: JSONValue;
+ private lastColorContext?: JSONObject;
+
+ updateContext(comp: this) {
+ // the context value of axis format
+ let resultComp = comp;
+ const data = comp.children.data.getView();
+ const sampleSeries = comp.children.series.getView().find((s) => !s.getView().hide);
+ const yAxisContextValue = getYAxisFormatContextValue(
+ data,
+ comp.children.yConfig.children.yAxisType.getView(),
+ sampleSeries?.children.columnName.getView()
+ );
+ if (yAxisContextValue !== comp.lastYAxisFormatContextVal) {
+ comp.lastYAxisFormatContextVal = yAxisContextValue;
+ resultComp = comp.setChild(
+ "yConfig",
+ comp.children.yConfig.reduce(
+ wrapChildAction(
+ "formatter",
+ AxisFormatterComp.changeContextDataAction({ value: yAxisContextValue })
+ )
+ )
+ );
+ }
+ return resultComp;
+ }
+
+ override reduce(action: CompAction): this {
+ const comp = super.reduce(action);
+ if (action.type === CompActionTypes.UPDATE_NODES_V2) {
+ const newData = comp.children.data.getView();
+ // data changes
+ if (comp.children.data !== this.children.data) {
+ setTimeout(() => {
+ // update x-axis value
+ const keys = getDataKeys(newData);
+ if (keys.length > 0 && !keys.includes(comp.children.xAxisKey.getView())) {
+ comp.children.xAxisKey.dispatch(changeValueAction(keys[0] || ""));
+ }
+ // pass to child series comp
+ comp.children.series.dispatchDataChanged(newData);
+ }, 0);
+ }
+ return this.updateContext(comp);
+ }
+ return comp;
+ }
+
+ override autoHeight(): boolean {
+ return false;
+ }
+};
+
+let PieChartComp = withExposingConfigs(PieChartTmpComp, [
+ depsConfig({
+ name: "selectedPoints",
+ desc: trans("chart.selectedPointsDesc"),
+ depKeys: ["selectedPoints"],
+ func: (input) => {
+ return input.selectedPoints;
+ },
+ }),
+ depsConfig({
+ name: "lastInteractionData",
+ desc: trans("chart.lastInteractionDataDesc"),
+ depKeys: ["lastInteractionData"],
+ func: (input) => {
+ return input.lastInteractionData;
+ },
+ }),
+ depsConfig({
+ name: "data",
+ desc: trans("chart.dataDesc"),
+ depKeys: ["data", "mode"],
+ func: (input) =>[] ,
+ }),
+ new NameConfig("title", trans("chart.titleDesc")),
+]);
+
+
+export const PieChartCompWithDefault = withDefault(PieChartComp, {
+ xAxisKey: "date",
+ series: [
+ {
+ dataIndex: genRandomKey(),
+ seriesName: trans("chart.spending"),
+ columnName: "spending",
+ },
+ {
+ dataIndex: genRandomKey(),
+ seriesName: trans("chart.budget"),
+ columnName: "budget",
+ },
+ ],
+});
diff --git a/client/packages/lowcoder-comps/src/comps/pieChartComp/pieChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/pieChartComp/pieChartConstants.tsx
new file mode 100644
index 0000000000..f8212e74c6
--- /dev/null
+++ b/client/packages/lowcoder-comps/src/comps/pieChartComp/pieChartConstants.tsx
@@ -0,0 +1,346 @@
+import {
+ jsonControl,
+ stateComp,
+ toJSONObjectArray,
+ toObject,
+ BoolControl,
+ ColorControl,
+ withDefault,
+ StringControl,
+ NumberControl,
+ dropdownControl,
+ list,
+ eventHandlerControl,
+ valueComp,
+ withType,
+ uiChildren,
+ clickEvent,
+ toArray,
+ styleControl,
+ EchartDefaultTextStyle,
+ EchartDefaultChartStyle,
+ MultiCompBuilder,
+} from "lowcoder-sdk";
+import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core";
+import { BarChartConfig } from "../basicChartComp/chartConfigs/barChartConfig";
+import { XAxisConfig, YAxisConfig } from "../basicChartComp/chartConfigs/cartesianAxisConfig";
+import { LegendConfig } from "../basicChartComp/chartConfigs/legendConfig";
+import { EchartsLegendConfig } from "../basicChartComp/chartConfigs/echartsLegendConfig";
+import { EchartsLabelConfig } from "../basicChartComp/chartConfigs/echartsLabelConfig";
+import { PieChartConfig } from "../basicChartComp/chartConfigs/pieChartConfig";
+import { ScatterChartConfig } from "../basicChartComp/chartConfigs/scatterChartConfig";
+import { SeriesListComp } from "./seriesComp";
+import { EChartsOption } from "echarts";
+import { i18nObjs, trans } from "i18n/comps";
+import { GaugeChartConfig } from "../basicChartComp/chartConfigs/gaugeChartConfig";
+import { FunnelChartConfig } from "../basicChartComp/chartConfigs/funnelChartConfig";
+import {EchartsTitleVerticalConfig} from "../chartComp/chartConfigs/echartsTitleVerticalConfig";
+import {EchartsTitleConfig} from "../basicChartComp/chartConfigs/echartsTitleConfig";
+
+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;
+
+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 XAxisDirectionOptions = [
+ {
+ label: trans("chart.horizontal"),
+ value: "horizontal",
+ },
+ {
+ label: trans("chart.vertical"),
+ value: "vertical",
+ },
+] as const;
+
+export type XAxisDirectionType = ValueFromOption;
+
+// Add this new code block:
+// Realistic pie chart demo data with proper categories and values
+export const defaultPieChartData = [
+ {
+ category: "Market Share",
+ name: "Samsung",
+ value: 21.8
+ },
+ {
+ category: "Market Share",
+ name: "Apple",
+ value: 20.5
+ },
+ {
+ category: "Market Share",
+ name: "Xiaomi",
+ value: 13.4
+ },
+ {
+ category: "Market Share",
+ name: "Oppo",
+ value: 8.8
+ },
+ {
+ category: "Market Share",
+ name: "Vivo",
+ value: 8.1
+ },
+ {
+ category: "Market Share",
+ name: "Others",
+ value: 27.4
+ }
+];
+
+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;
+
+const areaPiecesChildrenMap = {
+ color: ColorControl,
+ from: StringControl,
+ to: StringControl,
+ // unique key, for sort
+ dataIndex: valueComp(""),
+};
+const AreaPiecesTmpComp = new MultiCompBuilder(areaPiecesChildrenMap, (props) => {
+ return props;
+})
+ .setPropertyViewFn((children: any) =>
+ (<>
+ {children.color.propertyView({label: trans("pieChart.color")})}
+ {children.from.propertyView({label: trans("pieChart.from")})}
+ {children.to.propertyView({label: trans("pieChart.to")})}
+ )
+ )
+ .build();
+
+export type ChartSize = { w: number; h: number };
+
+export const getDataKeys = (data: Array) => {
+ if (!data) {
+ return [];
+ }
+ const dataKeys: Array = [];
+ data.slice(0, 50).forEach((d) => {
+ Object.keys(d).forEach((key) => {
+ if (!dataKeys.includes(key)) {
+ dataKeys.push(key);
+ }
+ });
+ });
+ return dataKeys;
+};
+
+const ChartOptionMap = {
+ pie: PieChartConfig,
+ scatter: ScatterChartConfig,
+};
+
+const EchartsOptionMap = {
+ funnel: FunnelChartConfig,
+ gauge: GaugeChartConfig,
+};
+
+const ChartOptionComp = withType(ChartOptionMap, "pie");
+const EchartsOptionComp = withType(EchartsOptionMap, "funnel");
+export type CharOptionCompType = keyof typeof ChartOptionMap;
+
+export const chartUiModeChildren = {
+ title: withDefault(StringControl, trans("echarts.defaultTitle")),
+ data: jsonControl(toJSONObjectArray, defaultPieChartData),
+ xAxisKey: valueComp("name"),
+ xAxisDirection: dropdownControl(XAxisDirectionOptions, "horizontal"),
+ xAxisData: jsonControl(toArray, []),
+ series: SeriesListComp,
+ xConfig: XAxisConfig,
+ yConfig: YAxisConfig,
+ legendConfig: LegendConfig,
+ chartConfig: ChartOptionComp,
+ areaPieces: list(AreaPiecesTmpComp),
+ onUIEvent: eventHandlerControl(UIEventOptions),
+};
+
+let chartJsonModeChildren: any = {
+ echartsOption: jsonControl(toObject, i18nObjs.defaultEchartsJsonOption),
+ echartsTitle: withDefault(StringControl, trans("echarts.defaultTitle")),
+ echartsLegendConfig: EchartsLegendConfig,
+ echartsLabelConfig: EchartsLabelConfig,
+ echartsConfig: EchartsOptionComp,
+ echartsTitleVerticalConfig: EchartsTitleVerticalConfig,
+ echartsTitleConfig:EchartsTitleConfig,
+
+ left:withDefault(NumberControl,trans('chart.defaultLeft')),
+ right:withDefault(NumberControl,trans('chart.defaultRight')),
+ top:withDefault(NumberControl,trans('chart.defaultTop')),
+ bottom:withDefault(NumberControl,trans('chart.defaultBottom')),
+
+ tooltip: withDefault(BoolControl, true),
+ legendVisibility: withDefault(BoolControl, true),
+}
+
+if (EchartDefaultChartStyle && EchartDefaultTextStyle) {
+ chartJsonModeChildren = {
+ ...chartJsonModeChildren,
+ chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'),
+ titleStyle: styleControl(EchartDefaultTextStyle, 'titleStyle'),
+ xAxisStyle: styleControl(EchartDefaultTextStyle, 'xAxis'),
+ yAxisStyle: styleControl(EchartDefaultTextStyle, 'yAxisStyle'),
+ legendStyle: styleControl(EchartDefaultTextStyle, 'legendStyle'),
+ }
+}
+
+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 pieChartChildrenMap = {
+ selectedPoints: stateComp>([]),
+ lastInteractionData: stateComp | NonUIChartDataType>({}),
+ onEvent: eventHandlerControl([clickEvent] as const),
+ ...chartUiModeChildren,
+ ...chartJsonModeChildren,
+};
+
+const chartUiChildrenMap = uiChildren(pieChartChildrenMap);
+export type ChartCompPropsType = RecordConstructorToView;
+export type ChartCompChildrenType = RecordConstructorToComp;
diff --git a/client/packages/lowcoder-comps/src/comps/pieChartComp/pieChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/pieChartComp/pieChartPropertyView.tsx
new file mode 100644
index 0000000000..626a491c03
--- /dev/null
+++ b/client/packages/lowcoder-comps/src/comps/pieChartComp/pieChartPropertyView.tsx
@@ -0,0 +1,144 @@
+import { changeChildAction, CompAction } from "lowcoder-core";
+import { ChartCompChildrenType, ChartTypeOptions,getDataKeys } from "./pieChartConstants";
+import { newSeries } from "./seriesComp";
+import {
+ CustomModal,
+ Dropdown,
+ hiddenPropertyView,
+ Option,
+ RedButton,
+ Section,
+ sectionNames,
+ controlItem,
+} from "lowcoder-sdk";
+import { trans } from "i18n/comps";
+
+export function pieChartPropertyView(
+ 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 = (
+ <>
+
+ {children.chartConfig.getPropertyView()}
+ {
+ dispatch(changeChildAction("xAxisKey", value));
+ }}
+ />
+ {children.chartConfig.getView().subtype === "waterfall" && children.xAxisData.propertyView({
+ label: "X-Label-Data"
+ })}
+ s.getView().seriesName}
+ popoverTitle={(s) => s.getView().columnName}
+ content={(s, index) => (
+ <>
+ {s.getPropertyViewWithData(columnOptions)}
+ {
+ {
+ 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")}
+
+ }
+
+ )}
+ 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}
+ />
+
+
+
+ {children.onUIEvent.propertyView({title: trans("chart.chartEventHandlers")})}
+
+
+ {children.onEvent.propertyView()}
+
+
+
+ {children.echartsTitleConfig.getPropertyView()}
+ {children.echartsTitleVerticalConfig.getPropertyView()}
+ {children.legendConfig.getPropertyView()}
+ {children.title.propertyView({ label: trans("chart.title") })}
+ {children.left.propertyView({ label: trans("chart.left"), tooltip: trans("echarts.leftTooltip") })}
+ {children.right.propertyView({ label: trans("chart.right"), tooltip: trans("echarts.rightTooltip") })}
+ {children.top.propertyView({ label: trans("chart.top"), tooltip: trans("echarts.topTooltip") })}
+ {children.bottom.propertyView({ label: trans("chart.bottom"), tooltip: trans("echarts.bottomTooltip") })}
+ {children.chartConfig.children.compType.getView() !== "pie" && (
+ <>
+ {children.xAxisDirection.propertyView({
+ label: trans("chart.xAxisDirection"),
+ radioButton: true,
+ })}
+ {children.xConfig.getPropertyView()}
+ {children.yConfig.getPropertyView()}
+
+ )}
+ {hiddenPropertyView(children)}
+ {children.tooltip.propertyView({label: trans("echarts.tooltip"), tooltip: trans("echarts.tooltipTooltip")})}
+
+
+ {children.chartStyle?.getPropertyView()}
+
+
+ {children.titleStyle?.getPropertyView()}
+
+
+ {children.legendStyle?.getPropertyView()}
+
+
+ {children.data.propertyView({
+ label: trans("chart.data"),
+ })}
+
+
+ );
+
+ const getChatConfigByMode = (mode: string) => {
+ switch(mode) {
+ case "ui":
+ return uiModePropertyView;
+ }
+ }
+ return (
+ <>
+ {getChatConfigByMode(children.mode.getView())}
+
+ );
+}
diff --git a/client/packages/lowcoder-comps/src/comps/pieChartComp/pieChartUtils.ts b/client/packages/lowcoder-comps/src/comps/pieChartComp/pieChartUtils.ts
new file mode 100644
index 0000000000..5453933397
--- /dev/null
+++ b/client/packages/lowcoder-comps/src/comps/pieChartComp/pieChartUtils.ts
@@ -0,0 +1,340 @@
+import {
+ CharOptionCompType,
+ ChartCompPropsType,
+ ChartSize,
+ noDataAxisConfig,
+ noDataPieChartConfig,
+} from "comps/pieChartComp/pieChartConstants";
+import { getPieRadiusAndCenter } from "comps/basicChartComp/chartConfigs/pieChartConfig";
+import { EChartsOptionWithMap } from "../basicChartComp/reactEcharts/types";
+import _ from "lodash";
+import { chartColorPalette, isNumeric, JSONObject, loadScript } from "lowcoder-sdk";
+import { calcXYConfig } from "comps/basicChartComp/chartConfigs/cartesianAxisConfig";
+import Big from "big.js";
+import { googleMapsApiUrl } from "../basicChartComp/chartConfigs/chartUrls";
+import opacityToHex from "../../util/opacityToHex";
+import parseBackground from "../../util/gradientBackgroundColor";
+import {ba, s} from "@fullcalendar/core/internal-common";
+import {chartStyleWrapper, styleWrapper} from "../../util/styleWrapper";
+
+export function transformData(
+ originData: JSONObject[],
+ xAxis: string,
+ seriesColumnNames: string[]
+) {
+ // aggregate data by x-axis
+ const transformedData: JSONObject[] = [];
+ originData.reduce((prev, cur) => {
+ if (cur === null || cur === undefined) {
+ return prev;
+ }
+ const groupValue = cur[xAxis] as string;
+ if (!prev[groupValue]) {
+ // init as 0
+ const initValue: any = {};
+ seriesColumnNames.forEach((name) => {
+ initValue[name] = 0;
+ });
+ prev[groupValue] = initValue;
+ transformedData.push(prev[groupValue]);
+ }
+ // remain the x-axis data
+ prev[groupValue][xAxis] = groupValue;
+ seriesColumnNames.forEach((key) => {
+ if (key === xAxis) {
+ return;
+ } else if (isNumeric(cur[key])) {
+ const bigNum = Big(cur[key]);
+ prev[groupValue][key] = bigNum.add(prev[groupValue][key]).toNumber();
+ } else {
+ prev[groupValue][key] += 1;
+ }
+ });
+ return prev;
+ }, {} as any);
+ return transformedData;
+}
+
+export const echartsConfigOmitChildren = [
+ "hidden",
+ "selectedPoints",
+ "onUIEvent",
+ "mapInstance"
+] as const;
+type EchartsConfigProps = Omit;
+
+export function getSeriesConfig(props: EchartsConfigProps) {
+ let visibleSeries = props.series.filter((s) => !s.getView().hide).map(s => s.toJsonValue());
+ let newVisibleSeries;
+ if(props.chartConfig.subtype === "calendarPie") {
+ const dataInRange = props.data.filter(item => item[props.xAxisKey].substr(0, 7) === props.chartConfig.range);
+ newVisibleSeries = dataInRange.map(data => {
+ return {
+ data: visibleSeries.map(s => ({name: s.seriesName, value: data[s.columnName]})),
+ date: data[props.xAxisKey],
+ }
+ });
+ visibleSeries = newVisibleSeries;
+ }
+ const seriesLength = visibleSeries.length;
+ return visibleSeries.map((s, index) => {
+ // pie
+ const radiusAndCenter = getPieRadiusAndCenter(seriesLength, index, props.chartConfig);
+ let config = {
+ ...props.chartConfig,
+ radius: radiusAndCenter.radius,
+ center: radiusAndCenter.center,
+ selectedMode: "single",
+ };
+ if(props.chartConfig.subtype !== "calendarPie") {
+ config = {
+ ...config,
+ startAngle: s.startAngle,
+ endAngle: s.endAngle,
+ padAngle: s.padAngle,
+ name: s.seriesName,
+ label: {
+ show: s.showLabel,
+ position: s.labelPosition,
+ alignTo: s.labelAlignTo,
+ bleedMargin: s.labelBleedMargin,
+ },
+ labelLine: {
+ length: s.labelLineLength,
+ length2: s.labelLineLength2,
+ },
+ encode: {
+ itemName: props.xAxisKey,
+ value: s.columnName,
+ },
+ itemStyle: {
+ borderRadius: s.borderRadius,
+ color: s.itemColor,
+ shadowColor: s.itemShadowColor,
+ shadowBlur: s.itemShadowBlur,
+ },
+ }
+ if(s.labelAlignTo === 'edge') {
+ config.label.edgeDistance = s.labelEdgeDistance;
+ }
+ if(s.roseType !== "none") {
+ config.roseType = s.roseType;
+ }
+ if(s.itemBg) {
+ config.itemStyle = {
+ color: {
+ image: s.itemBg,
+ repeat: 'repeat',
+ }
+ }
+ }
+ if(props.chartConfig.subtype !== 'doughnutPie') config.radius = s.radius;
+ if(s.left!="" && s.top!="") {
+ config.center = [s.left, s.top];
+ }
+ if(props.chartConfig.subtype === 'geoPie') config.coordinateSystem = 'geo';
+ } else {
+ config.data = s.data;
+ config.center = s.date;
+ config.radius = props.chartConfig.cellSize[0]*0.4;
+ }
+ return config;
+ });
+}
+
+// https://echarts.apache.org/en/option.html
+export function getEchartsConfig(
+ props: EchartsConfigProps,
+ chartSize?: ChartSize,
+ theme?: any,
+): EChartsOptionWithMap {
+ const gridPos = {
+ left: `${props?.left}%`,
+ right: `${props?.right}%`,
+ bottom: `${props?.bottom}%`,
+ top: `${props?.top}%`,
+ };
+
+ let config: any = {
+ title: {
+ text: props.title,
+ top: props.echartsTitleVerticalConfig.top,
+ left:props.echartsTitleConfig.top,
+ textStyle: {
+ ...styleWrapper(props?.titleStyle, theme?.titleStyle)
+ }
+ },
+ backgroundColor: parseBackground( props?.chartStyle?.background || theme?.chartStyle?.backgroundColor || "#FFFFFF"),
+ legend: {
+ ...props.legendConfig,
+ textStyle: {
+ ...styleWrapper(props?.legendStyle, theme?.legendStyle, 15)
+ }
+ },
+ tooltip: props.tooltip && {
+ trigger: "axis",
+ axisPointer: {
+ type: "line",
+ lineStyle: {
+ color: "rgba(0,0,0,0.2)",
+ width: 2,
+ type: "solid"
+ }
+ }
+ },
+ grid: {
+ ...gridPos,
+ containLabel: true,
+ },
+ };
+ if(props.chartConfig.subtype === "geoPie") {
+ config.geo = {
+ map: 'jsonmap',
+ roam: true,
+ itemStyle: {
+ areaColor: '#e7e8ea'
+ }
+ };
+ }
+
+ //calendar pie
+ if(props.chartConfig.subtype === "calendarPie") {
+ config.calendar = {
+ top: 'middle',
+ left: 'center',
+ orient: 'vertical',
+ cellSize: props.chartConfig.cellSize,
+ yearLabel: {
+ show: false,
+ fontSize: 30
+ },
+ dayLabel: {
+ margin: 20,
+ firstDay: 1,
+ nameMap: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ monthLabel: {
+ show: false
+ },
+ range: [props.chartConfig.range]
+ }
+ }
+ //
+
+ if (props.data.length <= 0) {
+ // no data
+ return {
+ ...config,
+ ...noDataPieChartConfig,
+ };
+ }
+ const yAxisConfig = props.yConfig();
+ const seriesColumnNames = props.series
+ .filter((s) => !s.getView().hide)
+ .map((s) => s.getView().columnName);
+ // y-axis is category and time, data doesn't need to aggregate
+ let transformedData =
+ yAxisConfig.type === "category" || yAxisConfig.type === "time" ? props.data : transformData(props.data, props.xAxisKey, seriesColumnNames);
+
+ config = {
+ ...config,
+ dataset: [
+ {
+ source: transformedData,
+ sourceHeader: false,
+ },
+ ],
+ series: getSeriesConfig(props).map(series => ({
+ ...series,
+ encode: {
+ ...series.encode,
+ y: series.name,
+ },
+ itemStyle: {
+ ...series.itemStyle,
+ ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle)
+ },
+ lineStyle: {
+ ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle)
+ },
+ })),
+ };
+ if(props.chartConfig.subtype === "calendarPie") {
+ config.series = [
+ {
+ id: 'label',
+ type: 'scatter',
+ coordinateSystem: 'calendar',
+ symbolSize: 0,
+ label: {
+ show: true,
+ formatter: function (params) {
+ return params.value[1];
+ },
+ offset: [-props.chartConfig.cellSize[0] / 2 + 10, -props.chartConfig.cellSize[1] / 2 + 10],
+ fontSize: 14
+ },
+ data: Array.from({ length: 31 }, (_, index) => index + 1).map(d => ([props.chartConfig.range + "-" + (d<10?`0${d}`:d), d]))
+ },
+ ...config.series,
+ ]
+ }
+
+ return config;
+}
+
+export function getSelectedPoints(param: any, option: any) {
+ const series = option.series;
+ const dataSource = _.isArray(option.dataset) && option.dataset[0]?.source;
+ if (series && dataSource) {
+ return param.selected.flatMap((selectInfo: any) => {
+ const seriesInfo = series[selectInfo.seriesIndex];
+ if (!seriesInfo || !seriesInfo.encode) {
+ return [];
+ }
+ return selectInfo.dataIndex.map((index: any) => {
+ const commonResult = {
+ seriesName: seriesInfo.name,
+ };
+ if (seriesInfo.encode.itemName && seriesInfo.encode.value) {
+ return {
+ ...commonResult,
+ itemName: dataSource[index][seriesInfo.encode.itemName],
+ value: dataSource[index][seriesInfo.encode.value],
+ };
+ } else {
+ return {
+ ...commonResult,
+ x: dataSource[index][seriesInfo.encode.x],
+ y: dataSource[index][seriesInfo.encode.y],
+ };
+ }
+ });
+ });
+ }
+ return [];
+}
+
+export function loadGoogleMapsScript(apiKey: string) {
+ const mapsUrl = `${googleMapsApiUrl}?key=${apiKey}`;
+ const scripts = document.getElementsByTagName('script');
+ // is script already loaded
+ let scriptIndex = _.findIndex(scripts, (script) => script.src.endsWith(mapsUrl));
+ if(scriptIndex > -1) {
+ return scripts[scriptIndex];
+ }
+ // is script loaded with diff api_key, remove the script and load again
+ scriptIndex = _.findIndex(scripts, (script) => script.src.startsWith(googleMapsApiUrl));
+ if(scriptIndex > -1) {
+ scripts[scriptIndex].remove();
+ }
+
+ const script = document.createElement("script");
+ script.type = "text/javascript";
+ script.src = mapsUrl;
+ script.async = true;
+ script.defer = true;
+ window.document.body.appendChild(script);
+
+ return script;
+}
diff --git a/client/packages/lowcoder-comps/src/comps/pieChartComp/seriesComp.tsx b/client/packages/lowcoder-comps/src/comps/pieChartComp/seriesComp.tsx
new file mode 100644
index 0000000000..bf71aa6b1e
--- /dev/null
+++ b/client/packages/lowcoder-comps/src/comps/pieChartComp/seriesComp.tsx
@@ -0,0 +1,244 @@
+import {
+ BoolControl,
+ StringControl,
+ ColorControl,
+ list,
+ dropdownControl,
+ withDefault,
+ NumberControl,
+ isNumeric,
+ genRandomKey,
+ Dropdown,
+ MultiCompBuilder,
+ valueComp,
+} from "lowcoder-sdk";
+import { i18nObjs, trans } from "i18n/comps";
+
+import { ConstructorToComp, ConstructorToDataType, ConstructorToView } from "lowcoder-core";
+import { CompAction, CustomAction, customAction, isMyCustomAction } from "lowcoder-core";
+import { x } from "@fullcalendar/resource/internal-common";
+
+export type SeriesCompType = ConstructorToComp;
+export type RawSeriesCompType = ConstructorToView;
+type SeriesDataType = ConstructorToDataType;
+
+type ActionDataType = {
+ type: "chartDataChanged";
+ chartData: Array;
+};
+
+export function newSeries(name: string, columnName: string): SeriesDataType {
+ return {
+ seriesName: name,
+ columnName: columnName,
+ dataIndex: genRandomKey(),
+ };
+}
+
+export const RoseTypeOptions = [
+ {
+ label: trans("pieChart.radius"),
+ value: "radius",
+ },
+ {
+ label: trans("pieChart.area"),
+ value: "area",
+ },
+ {
+ label: trans("pieChart.none"),
+ value: "none",
+ },
+] as const;
+
+export const LabelAlignToOptions = [
+ {
+ label: trans("pieChart.none"),
+ value: "none",
+ },
+ {
+ label: trans("pieChart.labelLine"),
+ value: "labelLine",
+ },
+ {
+ label: trans("pieChart.edge"),
+ value: "edge",
+ },
+] as const;
+
+export const LabelPositionOptions = [
+ {
+ label: trans("pieChart.outer"),
+ value: "outer",
+ },
+ {
+ label: trans("pieChart.inner"),
+ value: "inner",
+ },
+ {
+ label: trans("pieChart.center"),
+ value: "center",
+ },
+] as const;
+
+const seriesChildrenMap = {
+ columnName: StringControl,
+ seriesName: StringControl,
+ showLabel: withDefault(BoolControl, true),
+ radius: withDefault(StringControl, 30),
+ left: withDefault(StringControl, ""),
+ top: withDefault(StringControl, ""),
+ startAngle: withDefault(NumberControl, 0),
+ endAngle: withDefault(NumberControl, 360),
+ roseType: dropdownControl(RoseTypeOptions, "none"),
+ labelAlignTo: dropdownControl(LabelAlignToOptions, "none"),
+ labelPosition: dropdownControl(LabelPositionOptions, "outer"),
+ labelBleedMargin: withDefault(NumberControl, 5),
+ labelEdgeDistance: withDefault(StringControl, '25%'),
+ labelLineLength: withDefault(NumberControl, 10),
+ labelLineLength2: withDefault(NumberControl, 10),
+ padAngle: withDefault(NumberControl, 0),
+ borderRadius: withDefault(NumberControl, 0),
+ itemColor: ColorControl,
+ itemBg: StringControl,
+ itemShadowBlur: NumberControl,
+ itemShadowColor: ColorControl,
+ hide: BoolControl,
+ // unique key, for sort
+ dataIndex: valueComp(""),
+};
+
+const SeriesTmpComp = new MultiCompBuilder(seriesChildrenMap, (props) => {
+ return props;
+})
+ .setPropertyViewFn(() => {
+ return <>;
+ })
+ .build();
+
+class SeriesComp extends SeriesTmpComp {
+ getPropertyViewWithData(columnOptions: OptionsType): React.ReactNode {
+ return (
+ <>
+ {this.children.seriesName.propertyView({
+ label: trans("chart.seriesName"),
+ })}
+ {
+ this.children.columnName.dispatchChangeValueAction(value);
+ }}
+ />
+ {this.children.radius.propertyView({
+ label: trans("pieChart.radius"),
+ })}
+ {this.children.left.propertyView({
+ label: trans("pieChart.left"),
+ })}
+ {this.children.top.propertyView({
+ label: trans("pieChart.top"),
+ })}
+ {this.children.startAngle.propertyView({
+ label: trans("pieChart.startAngle"),
+ })}
+ {this.children.endAngle.propertyView({
+ label: trans("pieChart.endAngle"),
+ })}
+ {this.children.roseType.propertyView({
+ label: trans("pieChart.roseType"),
+ })}
+ {this.children.showLabel.propertyView({
+ label: trans("pieChart.showLabel"),
+ })}
+ {this.children.showLabel.getView() && this.children.labelPosition.propertyView({
+ label: trans("pieChart.labelPosition"),
+ })}
+ {this.children.showLabel.getView() && this.children.labelAlignTo.propertyView({
+ label: trans("pieChart.labelAlignTo"),
+ })}
+ {this.children.showLabel.getView() && this.children.labelBleedMargin.propertyView({
+ label: trans("pieChart.labelBleedMargin"),
+ })}
+ {this.children.showLabel.getView() && this.children.labelAlignTo.getView() === "edge" && this.children.labelEdgeDistance.propertyView({
+ label: trans("pieChart.labelEdgeDistance"),
+ })}
+ {this.children.showLabel.getView() && this.children.labelLineLength.propertyView({
+ label: trans("pieChart.labelLineLength"),
+ })}
+ {this.children.showLabel.getView() && this.children.labelAlignTo.getView() === "labelLine" && this.children.labelLineLength2.propertyView({
+ label: trans("pieChart.labelLineLength2"),
+ })}
+ {this.children.padAngle.propertyView({
+ label: trans("pieChart.padAngle"),
+ })}
+ {this.children.borderRadius.propertyView({
+ label: trans("pieChart.borderRadius"),
+ })}
+ {this.children.itemColor.propertyView({
+ label: trans("pieChart.itemColor"),
+ })}
+ {this.children.itemShadowBlur.propertyView({
+ label: trans("pieChart.itemShadowBlur"),
+ })}
+ {this.children.itemShadowColor.propertyView({
+ label: trans("pieChart.itemShadowColor"),
+ })}
+ {this.children.itemBg.propertyView({
+ label: trans("pieChart.itemBg"),
+ placeholder: i18nObjs.defaultPieBg,
+ })}
+
+ );
+ }
+}
+
+const SeriesListTmpComp = list(SeriesComp);
+
+export class SeriesListComp extends SeriesListTmpComp {
+ override reduce(action: CompAction): this {
+ if (isMyCustomAction(action, "chartDataChanged")) {
+ // auto generate series
+ const actions = this.genExampleSeriesActions(action.value.chartData);
+ return this.reduce(this.multiAction(actions));
+ }
+ return super.reduce(action);
+ }
+
+ private genExampleSeriesActions(chartData: Array) {
+ const actions: CustomAction[] = [];
+ if (!chartData || chartData.length <= 0 || !chartData[0]) {
+ return actions;
+ }
+ let delCnt = 0;
+ const existColumns = this.getView().map((s) => s.getView().columnName);
+ // delete series not in data
+ existColumns.forEach((columnName) => {
+ if (chartData[0]?.[columnName] === undefined) {
+ actions.push(this.deleteAction(0));
+ delCnt++;
+ }
+ });
+ if (existColumns.length > delCnt) {
+ // don't generate example if exists
+ return actions;
+ }
+ // generate example series
+ const exampleKeys = Object.keys(chartData[0])
+ .filter((key) => {
+ return !existColumns.includes(key) && isNumeric(chartData[0][key]);
+ })
+ .slice(0, 3);
+ exampleKeys.forEach((key) => actions.push(this.pushAction(newSeries(key, key))));
+ return actions;
+ }
+
+ dispatchDataChanged(chartData: Array): void {
+ this.dispatch(
+ customAction({
+ type: "chartDataChanged",
+ chartData: chartData,
+ })
+ );
+ }
+}
diff --git a/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartComp.tsx b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartComp.tsx
index 949828a761..a1cabc8841 100644
--- a/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartComp.tsx
+++ b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartComp.tsx
@@ -10,7 +10,7 @@ import { radarChartChildrenMap, ChartSize, getDataKeys } from "./radarChartConst
import { radarChartPropertyView } from "./radarChartPropertyView";
import _ from "lodash";
import { useContext, useEffect, useMemo, useRef, useState } from "react";
-import ReactResizeDetector from "react-resize-detector";
+import { useResizeDetector } from "react-resize-detector";
import ReactECharts from "../chartComp/reactEcharts";
import {
childrenToProps,
@@ -56,6 +56,7 @@ RadarChartTmpComp = withViewFn(RadarChartTmpComp, (comp) => {
const onUIEvent = comp.children.onUIEvent.getView();
const onEvent = comp.children.onEvent.getView();
const echartsCompRef = useRef();
+ const containerRef = useRef(null);
const [chartSize, setChartSize] = useState();
const firstResize = useRef(true);
const theme = useContext(ThemeContext);
@@ -141,44 +142,48 @@ RadarChartTmpComp = withViewFn(RadarChartTmpComp, (comp) => {
}, [onUIEvent]);
const echartsConfigChildren = _.omit(comp.children, echartsConfigOmitChildren);
+ const childrenProps = childrenToProps(echartsConfigChildren);
const option = useMemo(() => {
return getEchartsConfig(
- childrenToProps(echartsConfigChildren) as ToViewReturn,
+ childrenProps as ToViewReturn,
chartSize,
- theme?.theme?.components?.candleStickChart || {},
+ themeConfig
);
- }, [chartSize, ...Object.values(echartsConfigChildren)]);
+ }, [theme, childrenProps, chartSize, ...Object.values(echartsConfigChildren)]);
useEffect(() => {
comp.children.mapInstance.dispatch(changeValueAction(null, false))
if(comp.children.mapInstance.value) return;
}, [option])
+ useResizeDetector({
+ targetRef: containerRef,
+ onResize: ({width, height}) => {
+ if (width && height) {
+ setChartSize({ w: width, h: height });
+ }
+ if (!firstResize.current) {
+ // ignore the first resize, which will impact the loading animation
+ echartsCompRef.current?.getEchartsInstance().resize();
+ } else {
+ firstResize.current = false;
+ }
+ }
+ })
+
return (
- {
- if (w && h) {
- setChartSize({ w: w, h: h });
- }
- if (!firstResize.current) {
- // ignore the first resize, which will impact the loading animation
- echartsCompRef.current?.getEchartsInstance().resize();
- } else {
- firstResize.current = false;
- }
- }}
- >
+
(echartsCompRef.current = e)}
- style={{ height: "100%" }}
- notMerge
- lazyUpdate
- opts={{ locale: getEchartsLocale() }}
- option={option}
- theme={mode !== 'map' ? themeConfig : undefined}
- mode={mode}
- />
-
+ ref={(e) => (echartsCompRef.current = e)}
+ style={{ height: "100%" }}
+ notMerge
+ lazyUpdate
+ opts={{ locale: getEchartsLocale() }}
+ option={option}
+ theme={mode !== 'map' ? themeConfig : undefined}
+ mode={mode}
+ />
+
);
});
diff --git a/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartConstants.tsx
index 44d2631b83..a2b94a4ee6 100644
--- a/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartConstants.tsx
+++ b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartConstants.tsx
@@ -16,7 +16,10 @@ import {
uiChildren,
clickEvent,
styleControl,
- EchartsStyle
+ EchartDefaultChartStyle,
+ EchartDefaultTextStyle,
+ RadarLabelStyle,
+ toArray
} from "lowcoder-sdk";
import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core";
import { BarChartConfig } from "../chartComp/chartConfigs/barChartConfig";
@@ -31,6 +34,10 @@ import { SeriesListComp } from "../chartComp/seriesComp";
import { EChartsOption } from "echarts";
import { i18nObjs, trans } from "i18n/comps";
import { RadarChartConfig } from "comps/chartComp/chartConfigs/radarChartConfig";
+import {EchartsTitleVerticalConfig} from "../chartComp/chartConfigs/echartsTitleVerticalConfig";
+import {EchartsTitleConfig} from "../chartComp/chartConfigs/echartsTitleConfig";
+import {EchartsLegendOrientConfig} from "../chartComp/chartConfigs/echartsLegendOrientConfig";
+import {EchartsLegendAlignConfig} from "../chartComp/chartConfigs/echartsLegendAlignConfig";
export const ChartTypeOptions = [
{
@@ -248,19 +255,37 @@ export const chartUiModeChildren = {
};
let chartJsonModeChildren: any = {
+ echartsData: jsonControl(toArray, i18nObjs.defaultRadarChartOption.series),
+ echartsIndicators: jsonControl(toArray, i18nObjs.defaultRadarChartOption.indicator),
echartsOption: jsonControl(toObject, i18nObjs.defaultRadarChartOption),
echartsTitle: withDefault(StringControl, trans("radarChart.defaultTitle")),
echartsLegendConfig: EchartsLegendConfig,
echartsLabelConfig: EchartsLabelConfig,
+ echartsTitleVerticalConfig: EchartsTitleVerticalConfig,
+ echartsTitleConfig:EchartsTitleConfig,
echartsConfig: EchartsOptionComp,
+ echartsLegendOrientConfig: EchartsLegendOrientConfig,
+ echartsLegendAlignConfig: EchartsLegendAlignConfig,
+
+ position_x:withDefault(NumberControl,trans('radarChart.defaultPosition_X')),
+ position_y:withDefault(NumberControl,trans('radarChart.defaultPosition_Y')),
+ radius:withDefault(NumberControl,trans('radarChart.defaultRadius')),
+ splitNumber:withDefault(NumberControl,trans('radarChart.defaultSplitNumber')),
+ startAngle:withDefault(NumberControl,trans('radarChart.defaultStartAngle')),
// style: styleControl(EchartsStyle, 'style'),
+ areaFlag:withDefault(BoolControl, true),
tooltip: withDefault(BoolControl, true),
legendVisibility: withDefault(BoolControl, true),
+ indicatorVisibility: withDefault(BoolControl, true),
}
-if (EchartsStyle) {
+
+if (EchartDefaultChartStyle && EchartDefaultTextStyle && RadarLabelStyle) {
chartJsonModeChildren = {
...chartJsonModeChildren,
- style: styleControl(EchartsStyle, 'style'),
+ chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'),
+ titleStyle: styleControl(EchartDefaultTextStyle, 'titleStyle'),
+ legendStyle: styleControl(EchartDefaultTextStyle, 'legendStyle'),
+ detailStyle: styleControl(RadarLabelStyle, 'detailStyle'),
}
}
diff --git a/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartPropertyView.tsx
index 9a095b585a..b59b6f3dfd 100644
--- a/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartPropertyView.tsx
+++ b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartPropertyView.tsx
@@ -16,6 +16,47 @@ export function radarChartPropertyView(
const jsonModePropertyView = (
<>
+ {children.echartsData.propertyView({ label: trans("chart.data") })}
+ {children.echartsIndicators.propertyView({ label: trans("radarChart.indicators") })}
+ {children.echartsTitleConfig.getPropertyView()}
+ {children.echartsTitleVerticalConfig.getPropertyView()}
+ {children.legendVisibility.getView() && children.echartsLegendAlignConfig.getPropertyView()}
+ {children.legendVisibility.getView() && children.echartsLegendConfig.getPropertyView()}
+ {children.legendVisibility.getView() && children.echartsLegendOrientConfig.getPropertyView()}
+ {children.echartsTitle.propertyView({ label: trans("radarChart.title"), tooltip: trans("echarts.titleTooltip") })}
+ {children.radius.propertyView({ label: trans("radarChart.radius"), tooltip: trans("echarts.radiusTooltip") })}
+ {children.startAngle.propertyView({ label: trans("radarChart.startAngle"), tooltip: trans("echarts.startAngleTooltip") })}
+ {children.splitNumber.propertyView({ label: trans("radarChart.splitNumber"), tooltip: trans("echarts.splitNumberTooltip") })}
+ {children.position_x.propertyView({ label: trans("radarChart.position_x"), tooltip: trans("echarts.positionChart_x_Tooltip") })}
+ {children.position_y.propertyView({ label: trans("radarChart.position_y"), tooltip: trans("echarts.positionChart_x_Tooltip") })}
+
+ {children.areaFlag.propertyView({label: trans("radarChart.areaFlag"), tooltip: trans("radarChart.areaFlagTooltip")})}
+ {children.legendVisibility.propertyView({label: trans("echarts.legendVisibility"), tooltip: trans("echarts.legendVisibilityTooltip")})}
+ {children.indicatorVisibility.propertyView({label: trans("radarChart.indicatorVisibility"), tooltip: trans("radarChart.indicatorVisibilityTooltip")})}
+
+
+ {children.onEvent.propertyView()}
+
+
+ {children.chartStyle?.getPropertyView()}
+
+
+ {children.titleStyle?.getPropertyView()}
+
+ {
+ children.indicatorVisibility.getView() ?
+
+ {children.detailStyle?.getPropertyView()}
+ : <>
+ }
+ {
+ children.legendVisibility.getView() ?
+
+ {children.legendStyle?.getPropertyView()}
+ : <>
+ }
+ {hiddenPropertyView(children)}
+
{children.echartsOption.propertyView({
label: trans("chart.echartsOptionLabel"),
styleName: "higher",
@@ -31,16 +72,7 @@ export function radarChartPropertyView(
),
})}
- {children.echartsTitle.propertyView({ label: trans("radarChart.title") })}
- {children.tooltip.propertyView({label: trans("radarChart.tooltip")})}
-
-
- {children.onEvent.propertyView()}
-
-
- {children.style?.getPropertyView()}
- {hiddenPropertyView(children)}
);
diff --git a/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartUtils.ts b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartUtils.ts
index 904910a354..87cecc24c5 100644
--- a/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartUtils.ts
+++ b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartUtils.ts
@@ -12,6 +12,8 @@ import { chartColorPalette, isNumeric, JSONObject, loadScript } from "lowcoder-s
import { calcXYConfig } from "comps/chartComp/chartConfigs/cartesianAxisConfig";
import Big from "big.js";
import { googleMapsApiUrl } from "../chartComp/chartConfigs/chartUrls";
+import {chartStyleWrapper, styleWrapper} from "../../util/styleWrapper";
+import parseBackground from "../../util/gradientBackgroundColor";
export function transformData(
originData: JSONObject[],
@@ -135,33 +137,103 @@ export function getEchartsConfig(
): EChartsOptionWithMap {
if (props.mode === "json") {
let opt={
- "title": {
- "text": props.echartsTitle,
- 'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom',
- "left":"center"
- },
- "backgroundColor": props?.style?.background || theme?.style?.background,
- "color": props.echartsOption.data?.map(data => data.color),
- "tooltip": {
- "trigger": "axis",
- "formatter": function(params) {
- let tooltipText = params[0].name + '();
+ const containerRef = useRef(null);
const [chartSize, setChartSize] = useState();
const firstResize = useRef(true);
const theme = useContext(ThemeContext);
@@ -141,44 +142,48 @@ SankeyChartTmpComp = withViewFn(SankeyChartTmpComp, (comp) => {
}, [onUIEvent]);
const echartsConfigChildren = _.omit(comp.children, echartsConfigOmitChildren);
+ const childrenProps = childrenToProps(echartsConfigChildren);
const option = useMemo(() => {
return getEchartsConfig(
- childrenToProps(echartsConfigChildren) as ToViewReturn,
+ childrenProps as ToViewReturn,
chartSize,
- theme?.theme?.components?.candleStickChart || {},
+ themeConfig
);
- }, [chartSize, ...Object.values(echartsConfigChildren)]);
+ }, [theme, childrenProps, chartSize, ...Object.values(echartsConfigChildren)]);
useEffect(() => {
comp.children.mapInstance.dispatch(changeValueAction(null, false))
if(comp.children.mapInstance.value) return;
}, [option])
+ useResizeDetector({
+ targetRef: containerRef,
+ onResize: ({width, height}) => {
+ if (width && height) {
+ setChartSize({ w: width, h: height });
+ }
+ if (!firstResize.current) {
+ // ignore the first resize, which will impact the loading animation
+ echartsCompRef.current?.getEchartsInstance().resize();
+ } else {
+ firstResize.current = false;
+ }
+ }
+ })
+
return (
- {
- if (w && h) {
- setChartSize({ w: w, h: h });
- }
- if (!firstResize.current) {
- // ignore the first resize, which will impact the loading animation
- echartsCompRef.current?.getEchartsInstance().resize();
- } else {
- firstResize.current = false;
- }
- }}
- >
+
(echartsCompRef.current = e)}
- style={{ height: "100%" }}
- notMerge
- lazyUpdate
- opts={{ locale: getEchartsLocale() }}
- option={option}
- theme={mode !== 'map' ? themeConfig : undefined}
- mode={mode}
- />
-
+ ref={(e) => (echartsCompRef.current = e)}
+ style={{ height: "100%" }}
+ notMerge
+ lazyUpdate
+ opts={{ locale: getEchartsLocale() }}
+ option={option}
+ theme={mode !== 'map' ? themeConfig : undefined}
+ mode={mode}
+ />
+
);
});
diff --git a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartConstants.tsx
index 681d119e6a..e38b5a1319 100644
--- a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartConstants.tsx
+++ b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartConstants.tsx
@@ -16,7 +16,11 @@ import {
uiChildren,
clickEvent,
styleControl,
- EchartsStyle
+ SankeyLineStyle,
+ EchartDefaultChartStyle,
+ EchartDefaultTextStyle,
+ RadarLabelStyle,
+ toArray
} from "lowcoder-sdk";
import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core";
import { BarChartConfig } from "../chartComp/chartConfigs/barChartConfig";
@@ -31,6 +35,8 @@ import { SeriesListComp } from "../chartComp/seriesComp";
import { EChartsOption } from "echarts";
import { i18nObjs, trans } from "i18n/comps";
import { SankeyChartConfig } from "../chartComp/chartConfigs/sankeyChartConfig";
+import {EchartsTitleVerticalConfig} from "../chartComp/chartConfigs/echartsTitleVerticalConfig";
+import {EchartsTitleConfig} from "../chartComp/chartConfigs/echartsTitleConfig";
export const ChartTypeOptions = [
{
@@ -248,19 +254,39 @@ export const chartUiModeChildren = {
};
let chartJsonModeChildren: any = {
+ echartsData: jsonControl(toArray, i18nObjs.defaultSankeyChartOption.data),
+ echartsLinks: jsonControl(toArray, i18nObjs.defaultSankeyChartOption.links),
echartsOption: jsonControl(toObject, i18nObjs.defaultSankeyChartOption),
echartsTitle: withDefault(StringControl, trans("sankeyChart.defaultTitle")),
echartsLegendConfig: EchartsLegendConfig,
echartsLabelConfig: EchartsLabelConfig,
+ echartsTitleVerticalConfig: EchartsTitleVerticalConfig,
+ echartsTitleConfig:EchartsTitleConfig,
echartsConfig: EchartsOptionComp,
- // style: styleControl(EchartsStyle, 'style'),
+
+ left:withDefault(NumberControl,trans('sankeyChart.defaultLeft')),
+ right:withDefault(NumberControl,trans('sankeyChart.defaultRight')),
+ top:withDefault(NumberControl,trans('sankeyChart.defaultTop')),
+ bottom:withDefault(NumberControl,trans('sankeyChart.defaultBottom')),
+ curveness:withDefault(NumberControl,trans('sankeyChart.defaultCurveness')),
+ opacity:withDefault(NumberControl,trans('sankeyChart.defaultOpacity')),
+ nodeWidth:withDefault(NumberControl,trans('sankeyChart.defaultNodeWidth')),
+ nodeGap:withDefault(NumberControl,trans('sankeyChart.defaultNodeGap')),
+
+ draggable: withDefault(BoolControl, true),
+ focus: withDefault(BoolControl, true),
tooltip: withDefault(BoolControl, true),
legendVisibility: withDefault(BoolControl, true),
+ labelVisibility: withDefault(BoolControl, true),
}
-if (EchartsStyle) {
+
+if (EchartDefaultChartStyle && EchartDefaultTextStyle && RadarLabelStyle && SankeyLineStyle) {
chartJsonModeChildren = {
...chartJsonModeChildren,
- style: styleControl(EchartsStyle, 'style'),
+ chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'),
+ titleStyle: styleControl(EchartDefaultTextStyle, 'titleStyle'),
+ lineStyle: styleControl(SankeyLineStyle, 'lineStyle'),
+ detailStyle: styleControl(RadarLabelStyle, 'detailStyle'),
}
}
diff --git a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartPropertyView.tsx
index 4acfb77f89..3962175314 100644
--- a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartPropertyView.tsx
+++ b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartPropertyView.tsx
@@ -16,32 +16,67 @@ export function sankeyChartPropertyView(
const jsonModePropertyView = (
<>
- {children.echartsOption.propertyView({
- label: trans("chart.echartsOptionLabel"),
- styleName: "higher",
- tooltip: (
-
- ),
- })}
+ {children.echartsData.propertyView({ label: trans("chart.data") })}
+ {children.echartsLinks.propertyView({ label: trans("chart.links") })}
+
+ {children.echartsTitleConfig.getPropertyView()}
+ {children.echartsTitleVerticalConfig.getPropertyView()}
{children.echartsLabelConfig.getPropertyView()}
- {children.echartsTitle.propertyView({ label: trans("sankeyChart.title") })}
- {children.tooltip.propertyView({label: trans("sankeyChart.tooltip")})}
+
+ {children.echartsTitle.propertyView({ label: trans("sankeyChart.title"), tooltip: trans("echarts.titleTooltip") })}
+ {children.left.propertyView({ label: trans("sankeyChart.left"), tooltip: trans("echarts.leftTooltip") })}
+ {children.right.propertyView({ label: trans("sankeyChart.right"), tooltip: trans("echarts.rightTooltip") })}
+ {children.top.propertyView({ label: trans("sankeyChart.top"), tooltip: trans("echarts.topTooltip") })}
+ {children.bottom.propertyView({ label: trans("sankeyChart.bottom"), tooltip: trans("echarts.bottomTooltip") })}
+ {children.curveness.propertyView({ label: trans("sankeyChart.curveness"), tooltip: trans("sankeyChart.curvenessTooltip") })}
+ {children.opacity.propertyView({ label: trans("sankeyChart.opacity"), tooltip: trans("sankeyChart.opacityTooltip") })}
+ {children.nodeWidth.propertyView({ label: trans("sankeyChart.nodeWidth"), tooltip: trans("sankeyChart.nodeWidthTooltip") })}
+ {children.nodeGap.propertyView({ label: trans("sankeyChart.nodeGap"), tooltip: trans("sankeyChart.nodeGapTooltip") })}
+
+ {children.draggable.propertyView({label: trans("sankeyChart.draggable"), tooltip: trans("sankeyChart.draggableTooltip")})}
+ {children.focus.propertyView({label: trans("sankeyChart.focus"), tooltip: trans("sankeyChart.focusTooltip")})}
+ {children.tooltip.propertyView({label: trans("sankeyChart.tooltip"), tooltip: trans("echarts.tooltipTooltip")})}
+ {children.labelVisibility.propertyView({
+ label: trans("treeChart.labelVisibility"),
+ tooltip: trans("echarts.labelVisibilityTooltip")
+ })}
+
{children.onEvent.propertyView()}
-
- {children.style?.getPropertyView()}
+
+
+ {children.chartStyle?.getPropertyView()}
+
+
+ {children.lineStyle?.getPropertyView()}
+
+
+ {children.titleStyle?.getPropertyView()}
+
+
+ {children.detailStyle?.getPropertyView()}
+
{hiddenPropertyView(children)}
+
+ {children.echartsOption.propertyView({
+ label: trans("chart.echartsOptionLabel"),
+ styleName: "higher",
+ tooltip: (
+
+ ),
+ })}
+
);
diff --git a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartUtils.ts b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartUtils.ts
index 16b3679a18..69ac87ee3b 100644
--- a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartUtils.ts
+++ b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartUtils.ts
@@ -12,6 +12,9 @@ import { chartColorPalette, isNumeric, JSONObject, loadScript } from "lowcoder-s
import { calcXYConfig } from "comps/chartComp/chartConfigs/cartesianAxisConfig";
import Big from "big.js";
import { googleMapsApiUrl } from "../chartComp/chartConfigs/chartUrls";
+import {chartStyleWrapper, styleWrapper} from "../../util/styleWrapper";
+import parseBackground from "../../util/gradientBackgroundColor";
+import isColorString from "../../util/isColorString";
export function transformData(
originData: JSONObject[],
@@ -135,38 +138,60 @@ export function getEchartsConfig(
): EChartsOptionWithMap {
if (props.mode === "json") {
let opt={
- "title": {
- "text": props.echartsTitle,
- 'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom',
- "left":"center"
- },
- "backgroundColor": props?.style?.background || theme?.style?.background,
- "color": props.echartsOption.data?.map(data => data.color),
- "tooltip": props.tooltip&&{
- "trigger": "item",
- "formatter": "{a} ();
+ const containerRef = useRef(null);
+ const [chartSize, setChartSize] = useState();
+ const firstResize = useRef(true);
+ const theme = useContext(ThemeContext);
+ const defaultChartTheme = {
+ color: chartColorPalette,
+ backgroundColor: "#fff",
+ };
+
+ let themeConfig = defaultChartTheme;
+ try {
+ themeConfig = theme?.theme.chart ? JSON.parse(theme?.theme.chart) : defaultChartTheme;
+ } catch (error) {
+ log.error('theme chart error: ', error);
+ }
+
+ const triggerClickEvent = async (dispatch: any, action: CompAction) => {
+ await getPromiseAfterDispatch(
+ dispatch,
+ action,
+ { autoHandleAfterReduce: true }
+ );
+ onEvent('click');
+ }
+
+ useEffect(() => {
+ const echartsCompInstance = echartsCompRef?.current?.getEchartsInstance();
+ if (!echartsCompInstance) {
+ return _.noop;
+ }
+ echartsCompInstance?.on("click", (param: any) => {
+ document.dispatchEvent(new CustomEvent("clickEvent", {
+ bubbles: true,
+ detail: {
+ action: 'click',
+ data: param.data,
+ }
+ }));
+ triggerClickEvent(
+ comp.dispatch,
+ changeChildAction("lastInteractionData", param.data, false)
+ );
+ });
+ return () => {
+ echartsCompInstance?.off("click");
+ document.removeEventListener('clickEvent', clickEventCallback)
+ };
+ }, []);
+
+ useEffect(() => {
+ // bind events
+ const echartsCompInstance = echartsCompRef?.current?.getEchartsInstance();
+ if (!echartsCompInstance) {
+ return _.noop;
+ }
+ echartsCompInstance?.on("selectchanged", (param: any) => {
+ const option: any = echartsCompInstance?.getOption();
+ document.dispatchEvent(new CustomEvent("clickEvent", {
+ bubbles: true,
+ detail: {
+ action: param.fromAction,
+ data: getSelectedPoints(param, option)
+ }
+ }));
+
+ if (param.fromAction === "select") {
+ comp.dispatch(changeChildAction("selectedPoints", getSelectedPoints(param, option), false));
+ onUIEvent("select");
+ } else if (param.fromAction === "unselect") {
+ comp.dispatch(changeChildAction("selectedPoints", getSelectedPoints(param, option), false));
+ onUIEvent("unselect");
+ }
+
+ triggerClickEvent(
+ comp.dispatch,
+ changeChildAction("lastInteractionData", getSelectedPoints(param, option), false)
+ );
+ });
+ // unbind
+ return () => {
+ echartsCompInstance?.off("selectchanged");
+ document.removeEventListener('clickEvent', clickEventCallback)
+ };
+ }, [onUIEvent]);
+
+ const echartsConfigChildren = _.omit(comp.children, echartsConfigOmitChildren);
+ const childrenProps = childrenToProps(echartsConfigChildren);
+
+ const option = useMemo(() => {
+ return getEchartsConfig(
+ childrenProps as ToViewReturn,
+ chartSize,
+ themeConfig
+ );
+ }, [theme, childrenProps, chartSize, ...Object.values(echartsConfigChildren)]);
+
+ useResizeDetector({
+ targetRef: containerRef,
+ onResize: ({width, height}) => {
+ if (width && height) {
+ setChartSize({ w: width, h: height });
+ }
+ if (!firstResize.current) {
+ // ignore the first resize, which will impact the loading animation
+ echartsCompRef.current?.getEchartsInstance().resize();
+ } else {
+ firstResize.current = false;
+ }
+ }
+ })
+
+ return (
+
+ (echartsCompRef.current = e)}
+ style={{ height: "100%" }}
+ notMerge
+ lazyUpdate
+ opts={{ locale: getEchartsLocale() }}
+ option={option}
+ mode={mode}
+ />
+
+ );
+});
+
+function getYAxisFormatContextValue(
+ data: Array,
+ yAxisType: EchartsAxisType,
+ yAxisName?: string
+) {
+ const dataSample = yAxisName && data.length > 0 && data[0][yAxisName];
+ let contextValue = dataSample;
+ if (yAxisType === "time") {
+ // to timestamp
+ const time =
+ typeof dataSample === "number" || typeof dataSample === "string"
+ ? new Date(dataSample).getTime()
+ : null;
+ if (time) contextValue = time;
+ }
+ return contextValue;
+}
+
+ScatterChartTmpComp = class extends ScatterChartTmpComp {
+ private lastYAxisFormatContextVal?: JSONValue;
+ private lastColorContext?: JSONObject;
+
+ updateContext(comp: this) {
+ // the context value of axis format
+ let resultComp = comp;
+ const data = comp.children.data.getView();
+ const sampleSeries = comp.children.series.getView().find((s) => !s.getView().hide);
+ const yAxisContextValue = getYAxisFormatContextValue(
+ data,
+ comp.children.yConfig.children.yAxisType.getView(),
+ sampleSeries?.children.columnName.getView()
+ );
+ if (yAxisContextValue !== comp.lastYAxisFormatContextVal) {
+ comp.lastYAxisFormatContextVal = yAxisContextValue;
+ resultComp = comp.setChild(
+ "yConfig",
+ comp.children.yConfig.reduce(
+ wrapChildAction(
+ "formatter",
+ AxisFormatterComp.changeContextDataAction({ value: yAxisContextValue })
+ )
+ )
+ );
+ }
+ return resultComp;
+ }
+
+ override reduce(action: CompAction): this {
+ const comp = super.reduce(action);
+ if (action.type === CompActionTypes.UPDATE_NODES_V2) {
+ const newData = comp.children.data.getView();
+ // data changes
+ if (comp.children.data !== this.children.data) {
+ setTimeout(() => {
+ // update x-axis value
+ const keys = getDataKeys(newData);
+ if (keys.length > 0 && !keys.includes(comp.children.xAxisKey.getView())) {
+ comp.children.xAxisKey.dispatch(changeValueAction(keys[0] || ""));
+ }
+ // pass to child series comp
+ comp.children.series.dispatchDataChanged(newData);
+ }, 0);
+ }
+ return this.updateContext(comp);
+ }
+ return comp;
+ }
+
+ override autoHeight(): boolean {
+ return false;
+ }
+};
+
+let ScatterChartComp = withExposingConfigs(ScatterChartTmpComp, [
+ depsConfig({
+ name: "selectedPoints",
+ desc: trans("chart.selectedPointsDesc"),
+ depKeys: ["selectedPoints"],
+ func: (input) => {
+ return input.selectedPoints;
+ },
+ }),
+ depsConfig({
+ name: "lastInteractionData",
+ desc: trans("chart.lastInteractionDataDesc"),
+ depKeys: ["lastInteractionData"],
+ func: (input) => {
+ return input.lastInteractionData;
+ },
+ }),
+ depsConfig({
+ name: "data",
+ desc: trans("chart.dataDesc"),
+ depKeys: ["data", "mode"],
+ func: (input) =>[] ,
+ }),
+ new NameConfig("title", trans("chart.titleDesc")),
+]);
+
+
+export const ScatterChartCompWithDefault = withDefault(ScatterChartComp, {
+ xAxisKey: "date",
+ series: [
+ {
+ dataIndex: genRandomKey(),
+ seriesName: trans("chart.spending"),
+ columnName: "spending",
+ },
+ {
+ dataIndex: genRandomKey(),
+ seriesName: trans("chart.budget"),
+ columnName: "budget",
+ },
+ ],
+});
diff --git a/client/packages/lowcoder-comps/src/comps/scatterChartComp/scatterChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/scatterChartComp/scatterChartConstants.tsx
new file mode 100644
index 0000000000..c846eeaab2
--- /dev/null
+++ b/client/packages/lowcoder-comps/src/comps/scatterChartComp/scatterChartConstants.tsx
@@ -0,0 +1,313 @@
+import {
+ jsonControl,
+ stateComp,
+ toJSONObjectArray,
+ toObject,
+ BoolControl,
+ ColorControl,
+ withDefault,
+ StringControl,
+ NumberControl,
+ dropdownControl,
+ list,
+ eventHandlerControl,
+ valueComp,
+ withType,
+ uiChildren,
+ clickEvent,
+ toArray,
+ styleControl,
+ EchartDefaultTextStyle,
+ EchartDefaultChartStyle,
+ MultiCompBuilder,
+} from "lowcoder-sdk";
+import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core";
+import { XAxisConfig, YAxisConfig } from "../basicChartComp/chartConfigs/cartesianAxisConfig";
+import { LegendConfig } from "../basicChartComp/chartConfigs/legendConfig";
+import { EchartsLegendConfig } from "../basicChartComp/chartConfigs/echartsLegendConfig";
+import { EchartsLabelConfig } from "../basicChartComp/chartConfigs/echartsLabelConfig";
+import { ScatterChartConfig } from "../basicChartComp/chartConfigs/scatterChartConfig";
+import { SeriesListComp } from "./seriesComp";
+import { EChartsOption } from "echarts";
+import { i18nObjs, trans } from "i18n/comps";
+import { GaugeChartConfig } from "../basicChartComp/chartConfigs/gaugeChartConfig";
+import { FunnelChartConfig } from "../basicChartComp/chartConfigs/funnelChartConfig";
+import {EchartsTitleVerticalConfig} from "../chartComp/chartConfigs/echartsTitleVerticalConfig";
+import {EchartsTitleConfig} from "../basicChartComp/chartConfigs/echartsTitleConfig";
+
+export const ChartTypeOptions = [
+ {
+ label: trans("chart.bar"),
+ value: "bar",
+ },
+ {
+ label: trans("chart.line"),
+ value: "line",
+ },
+ {
+ label: trans("chart.scatter"),
+ value: "scatter",
+ },
+ {
+ label: trans("chart.scatter"),
+ value: "scatter",
+ },
+] 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 XAxisDirectionOptions = [
+ {
+ label: trans("chart.horizontal"),
+ value: "horizontal",
+ },
+ {
+ label: trans("chart.vertical"),
+ value: "vertical",
+ },
+] as const;
+
+export type XAxisDirectionType = ValueFromOption;
+
+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 noDataScatterChartConfig = {
+ animation: false,
+ tooltip: {
+ show: false,
+ },
+ legend: {
+ formatter: trans("chart.unknown"),
+ top: "bottom",
+ selectedMode: false,
+ },
+ color: ["#B8BBCC", "#CED0D9", "#DCDEE6", "#E6E6EB"],
+ series: [
+ {
+ type: "scatter",
+ 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: "scatter",
+ 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) => {
+ if (!data) {
+ return [];
+ }
+ const dataKeys: Array = [];
+ data.slice(0, 50).forEach((d) => {
+ Object.keys(d).forEach((key) => {
+ if (!dataKeys.includes(key)) {
+ dataKeys.push(key);
+ }
+ });
+ });
+ return dataKeys;
+};
+
+const ChartOptionMap = {
+ scatter: ScatterChartConfig,
+};
+
+const EchartsOptionMap = {
+ funnel: FunnelChartConfig,
+ gauge: GaugeChartConfig,
+};
+
+const ChartOptionComp = withType(ChartOptionMap, "scatter");
+const EchartsOptionComp = withType(EchartsOptionMap, "funnel");
+export type CharOptionCompType = keyof typeof ChartOptionMap;
+
+export const SCATTER_CHART_DEMO_DATA = [
+
+ { hours: 1.5, score: 62, student: "Alex M." },
+ { hours: 2.0, score: 65, student: "Sarah P." },
+ { hours: 2.5, score: 71, student: "James W." },
+ { hours: 2.8, score: 69, student: "Emma L." },
+ { hours: 3.0, score: 75, student: "Michael R." },
+ { hours: 3.2, score: 73, student: "Lisa K." },
+ { hours: 3.5, score: 78, student: "David H." },
+ { hours: 3.8, score: 77, student: "Sophie T." },
+ { hours: 4.0, score: 82, student: "Ryan B." },
+ { hours: 4.2, score: 84, student: "Nina C." },
+ { hours: 4.5, score: 86, student: "Thomas G." },
+ { hours: 4.8, score: 88, student: "Maria S." },
+ { hours: 5.0, score: 89, student: "Daniel F." },
+ { hours: 5.2, score: 91, student: "Anna D." },
+ { hours: 5.5, score: 90, student: "Kevin P." },
+ { hours: 5.8, score: 93, student: "Rachel M." },
+ { hours: 6.0, score: 95, student: "John L." },
+ { hours: 6.2, score: 94, student: "Emily W." },
+ { hours: 3.0, score: 68, student: "Chris B." }, // outlier - lower performance
+ { hours: 5.0, score: 96, student: "Jessica H." } // outlier - higher performance
+
+]
+
+export const chartUiModeChildren = {
+ title: withDefault(StringControl, trans("echarts.defaultTitle")),
+ data: jsonControl(toJSONObjectArray, SCATTER_CHART_DEMO_DATA),
+ xAxisKey: valueComp(""), // x-axis, key from data
+ xAxisDirection: dropdownControl(XAxisDirectionOptions, "horizontal"),
+ xAxisData: jsonControl(toArray, []),
+ series: SeriesListComp,
+ xConfig: XAxisConfig,
+ yConfig: YAxisConfig,
+ legendConfig: LegendConfig,
+ chartConfig: ChartOptionComp,
+ onUIEvent: eventHandlerControl(UIEventOptions),
+};
+
+let chartJsonModeChildren: any = {
+ echartsOption: jsonControl(toObject, i18nObjs.defaultEchartsJsonOption),
+ echartsTitle: withDefault(StringControl, trans("echarts.defaultTitle")),
+ echartsLegendConfig: EchartsLegendConfig,
+ echartsLabelConfig: EchartsLabelConfig,
+ echartsConfig: EchartsOptionComp,
+ echartsTitleVerticalConfig: EchartsTitleVerticalConfig,
+ echartsTitleConfig:EchartsTitleConfig,
+
+ left:withDefault(NumberControl,trans('chart.defaultLeft')),
+ right:withDefault(NumberControl,trans('chart.defaultRight')),
+ top:withDefault(NumberControl,trans('chart.defaultTop')),
+ bottom:withDefault(NumberControl,trans('chart.defaultBottom')),
+
+ tooltip: withDefault(BoolControl, true),
+ legendVisibility: withDefault(BoolControl, true),
+}
+
+if (EchartDefaultChartStyle && EchartDefaultTextStyle) {
+ chartJsonModeChildren = {
+ ...chartJsonModeChildren,
+ chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'),
+ titleStyle: styleControl(EchartDefaultTextStyle, 'titleStyle'),
+ xAxisStyle: styleControl(EchartDefaultTextStyle, 'xAxis'),
+ yAxisStyle: styleControl(EchartDefaultTextStyle, 'yAxisStyle'),
+ legendStyle: styleControl(EchartDefaultTextStyle, 'legendStyle'),
+ }
+}
+
+export type UIChartDataType = {
+ seriesName: string;
+ // coordinate chart
+ x?: any;
+ y?: any;
+ // scatter or funnel
+ itemName?: any;
+ value?: any;
+};
+
+export type NonUIChartDataType = {
+ name: string;
+ value: any;
+}
+
+export const scatterChartChildrenMap = {
+ selectedPoints: stateComp>([]),
+ lastInteractionData: stateComp | NonUIChartDataType>({}),
+ onEvent: eventHandlerControl([clickEvent] as const),
+ ...chartUiModeChildren,
+ ...chartJsonModeChildren,
+};
+
+const chartUiChildrenMap = uiChildren(scatterChartChildrenMap);
+export type ChartCompPropsType = RecordConstructorToView;
+export type ChartCompChildrenType = RecordConstructorToComp;
diff --git a/client/packages/lowcoder-comps/src/comps/scatterChartComp/scatterChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/scatterChartComp/scatterChartPropertyView.tsx
new file mode 100644
index 0000000000..77ac49eb0c
--- /dev/null
+++ b/client/packages/lowcoder-comps/src/comps/scatterChartComp/scatterChartPropertyView.tsx
@@ -0,0 +1,140 @@
+import { changeChildAction, CompAction } from "lowcoder-core";
+import { ChartCompChildrenType, ChartTypeOptions,getDataKeys } from "./scatterChartConstants";
+import { newSeries } from "./seriesComp";
+import {
+ CustomModal,
+ Dropdown,
+ hiddenPropertyView,
+ Option,
+ RedButton,
+ Section,
+ sectionNames,
+ controlItem,
+} from "lowcoder-sdk";
+import { trans } from "i18n/comps";
+
+export function scatterChartPropertyView(
+ 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 = (
+ <>
+
+ {children.chartConfig.getPropertyView()}
+ {
+ dispatch(changeChildAction("xAxisKey", value));
+ }}
+ />
+ {children.chartConfig.getView().subtype === "waterfall" && children.xAxisData.propertyView({
+ label: "X-Label-Data"
+ })}
+ s.getView().seriesName}
+ popoverTitle={(s) => s.getView().columnName}
+ content={(s, index) => (
+ <>
+ {s.getPropertyViewWithData(columnOptions)}
+ {
+ {
+ 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")}
+
+ }
+
+ )}
+ 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}
+ />
+
+
+
+ {children.onUIEvent.propertyView({title: trans("chart.chartEventHandlers")})}
+
+
+ {children.onEvent.propertyView()}
+
+
+
+ {children.echartsTitleConfig.getPropertyView()}
+ {children.echartsTitleVerticalConfig.getPropertyView()}
+ {children.legendConfig.getPropertyView()}
+ {children.title.propertyView({ label: trans("chart.title") })}
+ {children.left.propertyView({ label: trans("chart.left"), tooltip: trans("echarts.leftTooltip") })}
+ {children.right.propertyView({ label: trans("chart.right"), tooltip: trans("echarts.rightTooltip") })}
+ {children.top.propertyView({ label: trans("chart.top"), tooltip: trans("echarts.topTooltip") })}
+ {children.bottom.propertyView({ label: trans("chart.bottom"), tooltip: trans("echarts.bottomTooltip") })}
+ {hiddenPropertyView(children)}
+ {children.tooltip.propertyView({label: trans("echarts.tooltip"), tooltip: trans("echarts.tooltipTooltip")})}
+
+
+ {children.chartStyle?.getPropertyView()}
+
+
+ {children.titleStyle?.getPropertyView()}
+
+
+ {children.xAxisStyle?.getPropertyView()}
+
+
+ {children.yAxisStyle?.getPropertyView()}
+
+
+ {children.legendStyle?.getPropertyView()}
+
+
+ {children.data.propertyView({
+ label: trans("chart.data"),
+ })}
+
+
+ );
+
+ const getChatConfigByMode = (mode: string) => {
+ switch(mode) {
+ case "ui":
+ return uiModePropertyView;
+ }
+ }
+ return (
+ <>
+ {getChatConfigByMode(children.mode.getView())}
+
+ );
+}
diff --git a/client/packages/lowcoder-comps/src/comps/scatterChartComp/scatterChartUtils.ts b/client/packages/lowcoder-comps/src/comps/scatterChartComp/scatterChartUtils.ts
new file mode 100644
index 0000000000..f5e9bdd4be
--- /dev/null
+++ b/client/packages/lowcoder-comps/src/comps/scatterChartComp/scatterChartUtils.ts
@@ -0,0 +1,353 @@
+import {
+ CharOptionCompType,
+ ChartCompPropsType,
+ ChartSize,
+ noDataAxisConfig,
+ noDataScatterChartConfig,
+} from "comps/scatterChartComp/scatterChartConstants";
+import { EChartsOptionWithMap } from "../basicChartComp/reactEcharts/types";
+import _ from "lodash";
+import { chartColorPalette, isNumeric, JSONObject, loadScript } from "lowcoder-sdk";
+import { calcXYConfig } from "comps/basicChartComp/chartConfigs/cartesianAxisConfig";
+import Big from "big.js";
+import { googleMapsApiUrl } from "../basicChartComp/chartConfigs/chartUrls";
+import opacityToHex from "../../util/opacityToHex";
+import parseBackground from "../../util/gradientBackgroundColor";
+import {ba, s} from "@fullcalendar/core/internal-common";
+import {chartStyleWrapper, styleWrapper} from "../../util/styleWrapper";
+
+export function transformData(
+ originData: JSONObject[],
+ xAxis: string,
+ seriesColumnNames: string[]
+) {
+ // aggregate data by x-axis
+ const transformedData: JSONObject[] = [];
+ originData.reduce((prev, cur) => {
+ if (cur === null || cur === undefined) {
+ return prev;
+ }
+ const groupValue = cur[xAxis] as string;
+ if (!prev[groupValue]) {
+ // init as 0
+ const initValue: any = {};
+ seriesColumnNames.forEach((name) => {
+ initValue[name] = 0;
+ });
+ prev[groupValue] = initValue;
+ transformedData.push(prev[groupValue]);
+ }
+ // remain the x-axis data
+ prev[groupValue][xAxis] = groupValue;
+ seriesColumnNames.forEach((key) => {
+ if (key === xAxis) {
+ return;
+ } else if (isNumeric(cur[key])) {
+ const bigNum = Big(cur[key]);
+ prev[groupValue][key] = bigNum.add(prev[groupValue][key]).toNumber();
+ } else {
+ prev[groupValue][key] += 1;
+ }
+ });
+ return prev;
+ }, {} as any);
+ return transformedData;
+}
+
+export const echartsConfigOmitChildren = [
+ "hidden",
+ "selectedPoints",
+ "onUIEvent",
+ "mapInstance"
+] as const;
+type EchartsConfigProps = Omit;
+
+export function getSeriesConfig(props: EchartsConfigProps) {
+ let visibleSeries = props.series.filter((s) => !s.getView().hide).map(s => s.toJsonValue());
+ return visibleSeries.map((s, index) => {
+ let config = {
+ ...props.chartConfig,
+ name: s.seriesName,
+ encode: {
+ itemName: props.xAxisKey,
+ value: s.columnName,
+ },
+ itemStyle: {
+ borderRadius: s.borderRadius,
+ color: s.itemColor,
+ shadowColor: s.itemShadowColor,
+ shadowBlur: s.itemShadowBlur,
+ },
+ }
+ let fromArr = [0,0];
+ let toArr = [0,0];
+ try {
+ fromArr = JSON.parse(s.markLineFrom);
+ } catch {}
+ try {
+ toArr = JSON.parse(s.markLineTo);
+ } catch {}
+ if(s.showMarkLine) {
+ config.markLine = {
+ animation: false,
+ label: {
+ formatter: s.markLineDesc,
+ align: 'right'
+ },
+ lineStyle: {
+ type: 'solid'
+ },
+ tooltip: {
+ formatter: s.markLineDesc
+ },
+ data: [
+ [
+ {
+ coord: fromArr,
+ symbol: 'none'
+ },
+ {
+ coord: toArr,
+ symbol: 'none'
+ }
+ ]
+ ]
+ };
+ }
+ if(props.chartConfig.singleAxis) {
+ config.coordinateSystem = 'singleAxis';
+ config.singleAxisIndex = index;
+ config.data = [];
+ }
+ if(props.chartConfig.polar) {
+ config.coordinateSystem = 'polar';
+ }
+ if(props.chartConfig.heatmap) {
+ config.coordinateSystem = 'calendar';
+ config.type = 'heatmap';
+ }
+ if(s.effect) config.type = "effectScatter";
+ if(s.symbolSize) config.symbolSize = s.symbolSize;
+ if(s.dynamicSize) config.symbolSize = function(dataItem) {
+ return dataItem[s.dynamicIndex] / s.divider;
+ }
+ return config;
+ });
+}
+
+// https://echarts.apache.org/en/option.html
+export function getEchartsConfig(
+ props: EchartsConfigProps,
+ chartSize?: ChartSize,
+ theme?: any,
+): EChartsOptionWithMap {
+ const gridPos = {
+ left: `${props?.left}%`,
+ right: `${props?.right}%`,
+ bottom: `${props?.bottom}%`,
+ top: `${props?.top}%`,
+ };
+
+ let config: any = {
+ title: {
+ text: props.title,
+ top: props.echartsTitleVerticalConfig.top,
+ left:props.echartsTitleConfig.top,
+ textStyle: {
+ ...styleWrapper(props?.titleStyle, theme?.titleStyle)
+ }
+ },
+ backgroundColor: parseBackground( props?.chartStyle?.background || theme?.chartStyle?.backgroundColor || "#FFFFFF"),
+ legend: {
+ ...props.legendConfig,
+ textStyle: {
+ ...styleWrapper(props?.legendStyle, theme?.legendStyle, 15)
+ }
+ },
+ tooltip: props.tooltip && {
+ trigger: "axis",
+ axisPointer: {
+ type: "line",
+ lineStyle: {
+ color: "rgba(0,0,0,0.2)",
+ width: 2,
+ type: "solid"
+ }
+ }
+ },
+ grid: {
+ ...gridPos,
+ containLabel: true,
+ },
+ xAxis: {
+ type: "category",
+ boundaryGap: props.chartConfig.boundaryGap,
+ splitLine: {
+ show: !props.chartConfig.boundaryGap,
+ },
+ axisLine: {
+ show: props.chartConfig.boundaryGap,
+ },
+ axisLabel: {
+ ...styleWrapper(props?.xAxisStyle, theme?.xAxisStyle, 11)
+ }
+ },
+ yAxis: {
+ type: "category",
+ axisLabel: {
+ ...styleWrapper(props?.yAxisStyle, theme?.yAxisStyle, 11)
+ }
+ },
+ };
+
+ if (props.data.length <= 0) {
+ // no data
+ return {
+ ...config,
+ ...noDataScatterChartConfig,
+ };
+ }
+ const yAxisConfig = props.yConfig();
+ const seriesColumnNames = props.series
+ .filter((s) => !s.getView().hide)
+ .map((s) => s.getView().columnName);
+ // y-axis is category and time, data doesn't need to aggregate
+ let transformedData = props.data;
+ const seriesConfig = getSeriesConfig(props);
+ const singleAxis = seriesConfig.map((series, idx) => ({
+ left: 100,
+ type: 'category',
+ boundaryGap: false,
+ top: (idx * 100) / seriesConfig.length + (100/seriesConfig.length/2) + '%',
+ height: - 100 / seriesConfig.length / 4 + '%',
+ }));
+
+ config = {
+ ...config,
+ series: seriesConfig.map(series => ({
+ ...series,
+ itemStyle: {
+ ...series.itemStyle,
+ ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle)
+ },
+ lineStyle: {
+ ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle)
+ },
+ data: transformedData.map(d => [d[props.xAxisKey], d[series.encode.value], ...Object.values(d)]),
+ })),
+ };
+
+ if(props.chartConfig.singleAxis) {
+ config.singleAxis = singleAxis;
+ delete config.xAxis;
+ delete config.yAxis;
+
+ config.title = seriesConfig.map((series, idx) => ({
+ textBaseline: 'middle',
+ top: ((idx + 0.5) * 100) / seriesConfig.length + '%',
+ text: series.name,
+ }));
+ }
+
+ if(props.chartConfig.visualMapData.visualMap) {
+ config.visualMap = {
+ min: props.chartConfig.visualMapData.visualMapMin,
+ max: props.chartConfig.visualMapData.visualMapMax,
+ dimension: props.chartConfig.visualMapData.visualMapDimension,
+ orient: 'vertical',
+ right: 10,
+ top: 'center',
+ text: ['HIGH', 'LOW'],
+ calculable: true,
+ inRange: {
+ color: [props.chartConfig.visualMapData.visualMapColorMin, props.chartConfig.visualMapData.visualMapColorMax]
+ }
+ }
+ }
+ if(props.chartConfig.polar) {
+ config.angleAxis = config.xAxis;
+ config.radiusAxis = config.yAxis;
+ config.polar = {};
+ delete config.xAxis;
+ delete config.yAxis;
+ }
+
+ if(props.chartConfig.heatmap) {
+ config.calendar = {
+ orient: 'vertical',
+ yearLabel: {
+ margin: 40
+ },
+ monthLabel: {
+ nameMap: 'cn',
+ margin: 20
+ },
+ dayLabel: {
+ firstDay: 1,
+ nameMap: 'cn'
+ },
+ cellSize: 40,
+ range: props.chartConfig.heatmapMonth,
+ }
+ delete config.xAxis;
+ delete config.yAxis;
+ }
+
+ return config;
+}
+
+export function getSelectedPoints(param: any, option: any) {
+ const series = option.series;
+ const dataSource = _.isArray(option.dataset) && option.dataset[0]?.source;
+ if (series && dataSource) {
+ return param.selected.flatMap((selectInfo: any) => {
+ const seriesInfo = series[selectInfo.seriesIndex];
+ if (!seriesInfo || !seriesInfo.encode) {
+ return [];
+ }
+ return selectInfo.dataIndex.map((index: any) => {
+ const commonResult = {
+ seriesName: seriesInfo.name,
+ };
+ if (seriesInfo.encode.itemName && seriesInfo.encode.value) {
+ return {
+ ...commonResult,
+ itemName: dataSource[index][seriesInfo.encode.itemName],
+ value: dataSource[index][seriesInfo.encode.value],
+ };
+ } else {
+ return {
+ ...commonResult,
+ x: dataSource[index][seriesInfo.encode.x],
+ y: dataSource[index][seriesInfo.encode.y],
+ };
+ }
+ });
+ });
+ }
+ return [];
+}
+
+export function loadGoogleMapsScript(apiKey: string) {
+ const mapsUrl = `${googleMapsApiUrl}?key=${apiKey}`;
+ const scripts = document.getElementsByTagName('script');
+ // is script already loaded
+ let scriptIndex = _.findIndex(scripts, (script) => script.src.endsWith(mapsUrl));
+ if(scriptIndex > -1) {
+ return scripts[scriptIndex];
+ }
+ // is script loaded with diff api_key, remove the script and load again
+ scriptIndex = _.findIndex(scripts, (script) => script.src.startsWith(googleMapsApiUrl));
+ if(scriptIndex > -1) {
+ scripts[scriptIndex].remove();
+ }
+
+ const script = document.createElement("script");
+ script.type = "text/javascript";
+ script.src = mapsUrl;
+ script.async = true;
+ script.defer = true;
+ window.document.body.appendChild(script);
+
+ return script;
+}
diff --git a/client/packages/lowcoder-comps/src/comps/scatterChartComp/seriesComp.tsx b/client/packages/lowcoder-comps/src/comps/scatterChartComp/seriesComp.tsx
new file mode 100644
index 0000000000..0f423da206
--- /dev/null
+++ b/client/packages/lowcoder-comps/src/comps/scatterChartComp/seriesComp.tsx
@@ -0,0 +1,159 @@
+import {
+ BoolControl,
+ StringControl,
+ ColorControl,
+ list,
+ dropdownControl,
+ withDefault,
+ jsonControl,
+ toArray,
+ NumberControl,
+ isNumeric,
+ genRandomKey,
+ Dropdown,
+ MultiCompBuilder,
+ valueComp,
+} from "lowcoder-sdk";
+import { i18nObjs, trans } from "i18n/comps";
+
+import { ConstructorToComp, ConstructorToDataType, ConstructorToView } from "lowcoder-core";
+import { CompAction, CustomAction, customAction, isMyCustomAction } from "lowcoder-core";
+
+export type SeriesCompType = ConstructorToComp;
+export type RawSeriesCompType = ConstructorToView;
+type SeriesDataType = ConstructorToDataType;
+
+type ActionDataType = {
+ type: "chartDataChanged";
+ chartData: Array;
+};
+
+export function newSeries(name: string, columnName: string): SeriesDataType {
+ return {
+ seriesName: name,
+ columnName: columnName,
+ dataIndex: genRandomKey(),
+ };
+}
+
+const seriesChildrenMap = {
+ columnName: StringControl,
+ seriesName: StringControl,
+ dynamicSize: BoolControl,
+ symbolSize: NumberControl,
+ dynamicIndex: withDefault(NumberControl, "1"),
+ divider: withDefault(NumberControl, 1000),
+ effect: BoolControl,
+ showMarkLine: BoolControl,
+ markLineFrom: withDefault(StringControl, "[0,0]"),
+ markLineTo: withDefault(StringControl, "[1000,1000]"),
+ markLineDesc: StringControl,
+ hide: BoolControl,
+ // unique key, for sort
+ dataIndex: valueComp(""),
+};
+
+const SeriesTmpComp = new MultiCompBuilder(seriesChildrenMap, (props) => {
+ return props;
+})
+ .setPropertyViewFn(() => {
+ return <>;
+ })
+ .build();
+
+class SeriesComp extends SeriesTmpComp {
+ getPropertyViewWithData(columnOptions: OptionsType): React.ReactNode {
+ return (
+ <>
+ {this.children.seriesName.propertyView({
+ label: trans("chart.seriesName"),
+ })}
+ {
+ this.children.columnName.dispatchChangeValueAction(value);
+ }}
+ />
+ {this.children.effect.propertyView({
+ label: trans("scatterChart.effect"),
+ })}
+ {this.children.dynamicSize.propertyView({
+ label: trans("scatterChart.dynamicSize"),
+ })}
+ {this.children.dynamicSize.getView() && this.children.dynamicIndex.propertyView({
+ label: trans("scatterChart.dynamicIndex"),
+ })}
+ {this.children.dynamicSize.getView() && this.children.divider.propertyView({
+ label: trans("scatterChart.divider"),
+ })}
+ {!this.children.dynamicSize.getView() && this.children.symbolSize.propertyView({
+ label: trans("scatterChart.symbolSize"),
+ })}
+ {this.children.showMarkLine.propertyView({
+ label: trans("scatterChart.showMarkLine"),
+ })}
+ {this.children.showMarkLine.getView() && this.children.markLineFrom.propertyView({
+ label: trans("scatterChart.from"),
+ })}
+ {this.children.showMarkLine.getView() && this.children.markLineTo.propertyView({
+ label: trans("scatterChart.to"),
+ })}
+ {this.children.showMarkLine.getView() && this.children.markLineDesc.propertyView({
+ label: trans("scatterChart.desc"),
+ })}
+
+ );
+ }
+}
+
+const SeriesListTmpComp = list(SeriesComp);
+
+export class SeriesListComp extends SeriesListTmpComp {
+ override reduce(action: CompAction): this {
+ if (isMyCustomAction(action, "chartDataChanged")) {
+ // auto generate series
+ const actions = this.genExampleSeriesActions(action.value.chartData);
+ return this.reduce(this.multiAction(actions));
+ }
+ return super.reduce(action);
+ }
+
+ private genExampleSeriesActions(chartData: Array) {
+ const actions: CustomAction[] = [];
+ if (!chartData || chartData.length <= 0 || !chartData[0]) {
+ return actions;
+ }
+ let delCnt = 0;
+ const existColumns = this.getView().map((s) => s.getView().columnName);
+ // delete series not in data
+ existColumns.forEach((columnName) => {
+ if (chartData[0]?.[columnName] === undefined) {
+ actions.push(this.deleteAction(0));
+ delCnt++;
+ }
+ });
+ if (existColumns.length > delCnt) {
+ // don't generate example if exists
+ return actions;
+ }
+ // generate example series
+ const exampleKeys = Object.keys(chartData[0])
+ .filter((key) => {
+ return !existColumns.includes(key) && isNumeric(chartData[0][key]);
+ })
+ .slice(0, 3);
+ exampleKeys.forEach((key) => actions.push(this.pushAction(newSeries(key, key))));
+ return actions;
+ }
+
+ dispatchDataChanged(chartData: Array): void {
+ this.dispatch(
+ customAction({
+ type: "chartDataChanged",
+ chartData: chartData,
+ })
+ );
+ }
+}
diff --git a/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartComp.tsx b/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartComp.tsx
index a5714c8ac3..f77c18293d 100644
--- a/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartComp.tsx
+++ b/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartComp.tsx
@@ -10,7 +10,7 @@ import { sunburstChartChildrenMap, ChartSize, getDataKeys } from "./sunburstChar
import { sunburstChartPropertyView } from "./sunburstChartPropertyView";
import _ from "lodash";
import { useContext, useEffect, useMemo, useRef, useState } from "react";
-import ReactResizeDetector from "react-resize-detector";
+import { useResizeDetector } from "react-resize-detector";
import ReactECharts from "../chartComp/reactEcharts";
import {
childrenToProps,
@@ -56,6 +56,7 @@ SunburstChartTmpComp = withViewFn(SunburstChartTmpComp, (comp) => {
const onUIEvent = comp.children.onUIEvent.getView();
const onEvent = comp.children.onEvent.getView();
const echartsCompRef = useRef();
+ const containerRef = useRef(null);
const [chartSize, setChartSize] = useState();
const firstResize = useRef(true);
const theme = useContext(ThemeContext);
@@ -141,44 +142,48 @@ SunburstChartTmpComp = withViewFn(SunburstChartTmpComp, (comp) => {
}, [onUIEvent]);
const echartsConfigChildren = _.omit(comp.children, echartsConfigOmitChildren);
+ const childrenProps = childrenToProps(echartsConfigChildren);
const option = useMemo(() => {
return getEchartsConfig(
- childrenToProps(echartsConfigChildren) as ToViewReturn,
+ childrenProps as ToViewReturn,
chartSize,
- theme?.theme?.components?.candleStickChart || {},
+ themeConfig
);
- }, [chartSize, ...Object.values(echartsConfigChildren)]);
+ }, [theme, childrenProps, chartSize, ...Object.values(echartsConfigChildren)]);
useEffect(() => {
comp.children.mapInstance.dispatch(changeValueAction(null, false))
if(comp.children.mapInstance.value) return;
}, [option])
+ useResizeDetector({
+ targetRef: containerRef,
+ onResize: ({width, height}) => {
+ if (width && height) {
+ setChartSize({ w: width, h: height });
+ }
+ if (!firstResize.current) {
+ // ignore the first resize, which will impact the loading animation
+ echartsCompRef.current?.getEchartsInstance().resize();
+ } else {
+ firstResize.current = false;
+ }
+ }
+ })
+
return (
- 
+
+ 
-
+## 🎥 Lowcoder Intro Video
+