diff --git a/client/VERSION b/client/VERSION index a4db534a2..914ec9671 100644 --- a/client/VERSION +++ b/client/VERSION @@ -1 +1 @@ -2.5.3 \ No newline at end of file +2.6.0 \ No newline at end of file diff --git a/client/package.json b/client/package.json index 5abacbd78..2a978c1b5 100644 --- a/client/package.json +++ b/client/package.json @@ -1,6 +1,6 @@ { "name": "lowcoder-frontend", - "version": "2.5.0", + "version": "2.6.0", "type": "module", "private": true, "workspaces": [ diff --git a/client/packages/lowcoder-comps/package.json b/client/packages/lowcoder-comps/package.json index bd71bc993..bbb483436 100644 --- a/client/packages/lowcoder-comps/package.json +++ b/client/packages/lowcoder-comps/package.json @@ -1,6 +1,6 @@ { "name": "lowcoder-comps", - "version": "2.5.4", + "version": "2.6.1", "type": "module", "license": "MIT", "dependencies": { diff --git a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartComp.tsx b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartComp.tsx index bcb1c7aa4..500d9d376 100644 --- a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartComp.tsx @@ -33,7 +33,7 @@ import { echartsConfigOmitChildren, getEchartsConfig, getSelectedPoints, -} from "comps/chartComp/chartUtils"; +} from "./chartUtils"; import 'echarts-extension-gmap'; import log from "loglevel"; @@ -120,13 +120,16 @@ 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)) diff --git a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConstants.tsx b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConstants.tsx index 8d8811daf..d557c82fa 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 cfda76b14..44eda032b 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 8bb44e041..e82889616 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,52 +136,15 @@ 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}
{b} : {c}%" - }, - "legend":props.legendVisibility&& { - "data": props.echartsOption.data?.map(data=>data.name), - "top": props.echartsLegendConfig.top, - }, - "series": [ - { - "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 - }, - "data": props.echartsOption.data - } - ] -} - return props.echartsOption ? opt : {}; - + return props.echartsOption ? props.echartsOption : {}; } - if(props.mode === "map") { const { mapZoomLevel, mapCenterLat, mapCenterLng, - mapOptions, - showCharts, + mapOptions, + showCharts, } = props; const echartsOption = mapOptions && showCharts ? mapOptions : {}; @@ -197,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.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" + } + } }, - legend: props.legendConfig, grid: { ...gridPos, containLabel: true, @@ -227,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: [ @@ -238,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 @@ -266,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/calendarComp/calendarComp.tsx b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx index fb379a968..61305500f 100644 --- a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx @@ -84,6 +84,9 @@ import { } from "./calendarConstants"; import { EventOptionControl } from "./eventOptionsControl"; import { EventImpl } from "@fullcalendar/core/internal"; +import DatePicker from "antd/es/date-picker"; + +const DATE_TIME_FORMAT = "YYYY-MM-DD HH:mm:ss"; function fixOldData(oldData: any) { if(!Boolean(oldData)) return; @@ -201,10 +204,12 @@ let childrenMap: any = { currentPremiumView: dropdownControl(DefaultWithPremiumViewOptions, "resourceTimelineDay"), animationStyle: styleControl(AnimationStyle, 'animationStyle'), showVerticalScrollbar: withDefault(BoolControl, false), + showResourceEventsInFreeView: withDefault(BoolControl, false), initialData: stateComp({}), updatedEvents: stateComp({}), insertedEvents: stateComp({}), deletedEvents: stateComp({}), + inputFormat: withDefault(StringControl, DATE_TIME_FORMAT), }; // this should ensure backwards compatibility with older versions of the SDK @@ -244,7 +249,9 @@ let CalendarBasicComp = (function () { animationStyle?:any; modalStyle?:any; showVerticalScrollbar?:boolean; + showResourceEventsInFreeView?: boolean; initialData: Array; + inputFormat: string; }, dispatch: any) => { const comp = useContext(EditorContext)?.getUICompByName( useContext(CompNameContext) @@ -259,6 +266,7 @@ let CalendarBasicComp = (function () { const [licensed, setLicensed] = useState(props.licenseKey !== ""); const [currentSlotLabelFormat, setCurrentSlotLabelFormat] = useState(slotLabelFormat); const [initDataMap, setInitDataMap] = useState>({}); + const [hoverEventId, setHoverEvent] = useState(); useEffect(() => { setLicensed(props.licenseKey !== ""); @@ -285,12 +293,16 @@ let CalendarBasicComp = (function () { ]); const currentEvents = useMemo(() => { + if (props.showResourceEventsInFreeView && Boolean(props.licenseKey)) { + return props.events.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)); }, [ currentView, props.events, + props.showResourceEventsInFreeView, ]) // we use one central stack of events for all views @@ -485,36 +497,45 @@ 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.events.filter( + (item: EventType) => item.id !== eventInfo.event.id + ); + handleEventDataChange(events); + }} + onMouseDown={(e) => { + e.stopPropagation(); + e.preventDefault(); + }} + > + + + + ); }, [ @@ -531,7 +552,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 +617,21 @@ let CalendarBasicComp = (function () { label={trans("calendar.eventStartTime")} name="start" > - + - + item.id === id ); @@ -757,6 +797,9 @@ let CalendarBasicComp = (function () { 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 +822,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, @@ -1007,6 +1050,8 @@ let CalendarBasicComp = (function () { }} eventDrop={handleDrop} eventResize={handleResize} + eventMouseEnter={({event}) => setHoverEvent(event.id)} + eventMouseLeave={({event}) => setHoverEvent(undefined)} /> @@ -1033,6 +1078,8 @@ let CalendarBasicComp = (function () { modalStyle: { getPropertyView: () => any; }; licenseKey: { getView: () => any; propertyView: (arg0: { label: 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 +1119,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()} @@ -1166,7 +1230,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 +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("resourceTimeGridDay"); + const viewKey = comp.children.licenseKey.getView() === "" ? 'currentFreeView' : 'currentPremiumView'; + comp.children[viewKey].dispatchChangeValueAction("resourceTimeGridDay"); } }, { @@ -1190,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("resourceTimelineDay"); + const viewKey = comp.children.licenseKey.getView() === "" ? 'currentFreeView' : 'currentPremiumView'; + comp.children[viewKey].dispatchChangeValueAction("resourceTimelineDay"); } }, { @@ -1201,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("dayGridWeek"); + const viewKey = comp.children.licenseKey.getView() === "" ? 'currentFreeView' : 'currentPremiumView'; + comp.children[viewKey].dispatchChangeValueAction("dayGridWeek"); } }, { @@ -1212,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("timeGridWeek"); + const viewKey = comp.children.licenseKey.getView() === "" ? 'currentFreeView' : 'currentPremiumView'; + comp.children[viewKey].dispatchChangeValueAction("timeGridWeek"); } }, { @@ -1223,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("timeGridDay"); + const viewKey = comp.children.licenseKey.getView() === "" ? 'currentFreeView' : 'currentPremiumView'; + comp.children[viewKey].dispatchChangeValueAction("timeGridDay"); } }, { @@ -1234,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("dayGridDay"); + const viewKey = comp.children.licenseKey.getView() === "" ? 'currentFreeView' : 'currentPremiumView'; + comp.children[viewKey].dispatchChangeValueAction("dayGridDay"); } }, { @@ -1245,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("listWeek"); + const viewKey = comp.children.licenseKey.getView() === "" ? 'currentFreeView' : 'currentPremiumView'; + comp.children[viewKey].dispatchChangeValueAction("listWeek"); } }, { @@ -1256,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("dayGridMonth"); + const viewKey = comp.children.licenseKey.getView() === "" ? 'currentFreeView' : 'currentPremiumView'; + comp.children[viewKey].dispatchChangeValueAction("dayGridMonth"); } }, { @@ -1267,8 +1331,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 e8602a8fe..bb1a42d01 100644 --- a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx @@ -69,8 +69,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 +128,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 +139,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 +151,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 +168,6 @@ export const Wrapper = styled.div<{ } .event-title { margin-left: 16px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; } .event-remove { background-color: inherit; diff --git a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartComp.tsx b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartComp.tsx index ff33cc260..c07bcb62d 100644 --- a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartComp.tsx @@ -140,13 +140,14 @@ 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)) diff --git a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx index 35852214d..4c26568a5 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,30 @@ export const chartUiModeChildren = { }; let chartJsonModeChildren: any = { + echartsData: jsonControl(toArray), echartsOption: jsonControl(toObject, i18nObjs.defaultCandleStickChartOption), echartsTitle: withDefault(StringControl, trans("candleStickChart.defaultTitle")), - echartsLegendConfig: EchartsLegendConfig, + 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 b3c545d4a..163172677 100644 --- a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartPropertyView.tsx @@ -16,6 +16,38 @@ export function candleStickChartPropertyView( const jsonModePropertyView = ( <>
+ {children.echartsData.propertyView({ label: trans("chart.data") })} + {children.echartsTitleConfig.getPropertyView()} + {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 +63,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 b4b5d6f71..129b27648 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?.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 f93ae0f50..581a75e92 100644 --- a/client/packages/lowcoder-comps/src/comps/chartComp/chartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartComp.tsx @@ -156,12 +156,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; 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 21dea46f3..852de74c3 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: , value: "bottom", }, + { + label: , + value: "center", + }, { label: , value: "top", diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsTitleVerticalConfig.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsTitleVerticalConfig.tsx new file mode 100644 index 000000000..e85a8b75f --- /dev/null +++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsTitleVerticalConfig.tsx @@ -0,0 +1,45 @@ +import { + AlignBottom, + AlignTop, + dropdownControl, + MultiCompBuilder, +} from "lowcoder-sdk"; +import { LegendComponentOption } from "echarts"; +import { trans } from "i18n/comps"; + +const LegendPositionOptions = [ + { + label: , + value: "top", + }, + { + label: , + value: "bottom", + } +] as const; + +export const EchartsTitleVerticalConfig = (function () { + return new MultiCompBuilder( + { + position: dropdownControl(LegendPositionOptions, "top"), + }, + (props): LegendComponentOption => { + const config: LegendComponentOption = { + top: "top", + type: "scroll", + }; + config.top = props.position + return config; + } + ) + .setPropertyViewFn((children) => ( + <> + {children.position.propertyView({ + label: trans("echarts.titlePositionVertical"), + radioButton: true, + tooltip: trans("echarts.changingLegend_x_Tooltip") + })} + + )) + .build(); +})(); diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartConstants.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartConstants.tsx index 71962fd53..064b10903 100644 --- a/client/packages/lowcoder-comps/src/comps/chartComp/chartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartConstants.tsx @@ -16,6 +16,10 @@ import { ValueFromOption, uiChildren, clickEvent, + EchartDefaultTextStyle, + styleControl, + EchartDefaultChartStyle, + toArray } from "lowcoder-sdk"; import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core"; import { BarChartConfig } from "./chartConfigs/barChartConfig"; @@ -27,6 +31,11 @@ import { ScatterChartConfig } from "./chartConfigs/scatterChartConfig"; import { SeriesListComp } from "./seriesComp"; import { EChartsOption } from "echarts"; import { i18nObjs, trans } from "i18n/comps"; +import {EchartsTitleVerticalConfig} from "./chartConfigs/echartsTitleVerticalConfig"; +import {EchartsTitleConfig} from "./chartConfigs/echartsTitleConfig"; +import {EchartsLegendConfig} from "./chartConfigs/echartsLegendConfig"; +import {EchartsLegendOrientConfig} from "./chartConfigs/echartsLegendOrientConfig"; +import {EchartsLegendAlignConfig} from "./chartConfigs/echartsLegendAlignConfig"; export const ChartTypeOptions = [ { @@ -251,10 +260,37 @@ export const chartUiModeChildren = { legendConfig: LegendConfig, chartConfig: ChartOptionComp, onUIEvent: eventHandlerControl(UIEventOptions), + }; -const chartJsonModeChildren = { +let chartJsonModeChildren: any = { + echartsData: jsonControl(toArray), + echartsTitle: withDefault(StringControl, trans("echarts.defaultTitle")), echartsOption: jsonControl(toObject, i18nObjs.defaultEchartsJsonOption), + + left:withDefault(NumberControl,trans('chart.defaultLeft')), + right:withDefault(NumberControl,trans('chart.defaultRight')), + top:withDefault(NumberControl,trans('chart.defaultTop')), + bottom:withDefault(NumberControl,trans('chart.defaultBottom')), + + echartsTitleVerticalConfig: EchartsTitleVerticalConfig, + echartsTitleConfig:EchartsTitleConfig, + echartsLegendConfig: EchartsLegendConfig, + echartsLegendOrientConfig: EchartsLegendOrientConfig, + echartsLegendAlignConfig: EchartsLegendAlignConfig, + legendVisibility: withDefault(BoolControl, true), + tooltip: 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 = { diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartPropertyView.tsx index 7bc6cf488..754bab376 100644 --- a/client/packages/lowcoder-comps/src/comps/chartComp/chartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartPropertyView.tsx @@ -27,9 +27,7 @@ export function chartPropertyView( const uiModePropertyView = ( <>
- {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 d71dd7f56..292f5047c 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 96bd52f0b..0f13a6d4e 100644 --- a/client/packages/lowcoder-comps/src/comps/chartsGeoMapComp/chartsGeoMapComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/chartsGeoMapComp/chartsGeoMapComp.tsx @@ -116,13 +116,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; diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartComp.tsx b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartComp.tsx index 339f4e717..091ff9d67 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartComp.tsx @@ -141,13 +141,14 @@ 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)) diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx index f2fd90ed1..fdac1ea20 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx @@ -17,7 +17,8 @@ import { clickEvent, styleControl, EchartDefaultChartStyle, - EchartDefaultTextStyle + EchartDefaultTextStyle, + toArray } from "lowcoder-sdk"; import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core"; import { BarChartConfig } from "../chartComp/chartConfigs/barChartConfig"; @@ -37,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 = [ { @@ -254,12 +256,14 @@ export const chartUiModeChildren = { }; let chartJsonModeChildren: any = { + echartsData: jsonControl(toArray), 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, diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx index 346a48260..b3b0f61aa 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 1442ea995..36fe24edf 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}
{b} : {c}%" }, "legend":props.legendVisibility&& { - "data": props.echartsOption.data?.map(data=>data.name), + "data": props.echartsData.data?.map(data=>data.name) || props.echartsOption.data?.map(data=>data.name), "top": props.echartsLegendConfig.top, "left": props.echartsLegendAlignConfig.left, "orient": props.echartsLegendOrientConfig.orient, "textStyle": { - "fontFamily": props?.legendStyle?.chartFontFamily || theme?.legendStyle?.fontFamily, - "fontSize": props?.legendStyle?.chartTextSize || theme?.legendStyle?.fontSize, - "fontWeight": props?.legendStyle?.chartTextWeight || theme?.legendStyle?.fontWeight, - "color": props?.legendStyle?.chartTextColor || theme?.legendStyle?.fontColor || "#000000", - "fontStyle": props?.legendStyle?.chartFontStyle || theme?.legendStyle?.fontStyle, - "textShadowColor": props?.legendStyle?.chartShadowColor || theme?.legendStyle?.shadowColor, - "textShadowBlur": props?.legendStyle?.chartBoxShadow?.split('px')[0] || theme?.legendStyle?.boxShadow?.split('px')[0], - "textShadowOffsetX": props?.legendStyle?.chartBoxShadow?.split('px')[1] || theme?.legendStyle?.boxShadow?.split('px')[1], - "textShadowOffsetY": props?.legendStyle?.chartBoxShadow?.split('px')[2] || theme?.legendStyle?.boxShadow?.split('px')[2] + ...styleWrapper(props?.legendStyle, theme?.legendStyle, 13) } }, "series": [ @@ -192,33 +177,18 @@ export function getEchartsConfig( "sort": props.echartsSortingConfig.sort, "itemStyle": { "opacity": props.opacity, - "borderColor": props?.chartStyle?.chartBorderColor || theme?.chartStyle?.borderColor, - "borderWidth": props?.chartStyle?.chartBorderWidth || theme?.chartStyle?.borderWidth, - "borderType": props?.chartStyle?.chartBorderStyle || theme?.chartStyle?.borderType, - "borderRadius": 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] + ...chartStyleWrapper(props?.chartStyle,theme?.chartStyle), }, "label": { "show": props.label, "position": props.echartsLabelConfig.top, - "fontFamily": props?.labelStyle?.chartFontFamily || theme?.labelStyle?.fontFamily, - "fontSize": props?.labelStyle?.chartTextSize || theme?.labelStyle?.fontSize, - "fontWeight": props?.labelStyle?.chartTextWeight || theme?.labelStyle?.fontWeight, - "color": props?.labelStyle?.chartTextColor || theme?.labelStyle?.fontColor || "#000000", - "fontStyle": props?.labelStyle?.chartFontStyle || theme?.labelStyle?.fontStyle, - "textShadowColor": props?.labelStyle?.chartShadowColor || theme?.labelStyle?.shadowColor, - "textShadowBlur": props?.labelStyle?.chartBoxShadow?.split('px')[0] || theme?.labelStyle?.boxShadow?.split('px')[0], - "textShadowOffsetX": props?.labelStyle?.chartBoxShadow?.split('px')[1] || theme?.labelStyle?.boxShadow?.split('px')[1], - "textShadowOffsetY": props?.labelStyle?.chartBoxShadow?.split('px')[2] || theme?.labelStyle?.boxShadow?.split('px')[2] + ...styleWrapper(props?.labelStyle,theme?.labelStyle, 13), }, - "data": props.echartsOption.data + "data": props?.echartsData.length !== 0 && props?.echartsData || props.echartsOption.data } ] } - return props.echartsOption ? opt : {}; + return props.echartsData || props.echartsOption ? opt : {}; } diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartComp.tsx b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartComp.tsx index b8237b584..57ed97efb 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartComp.tsx @@ -142,13 +142,14 @@ 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)) diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx index 44e4f748b..f09412345 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx @@ -17,7 +17,10 @@ import { clickEvent, styleControl, EchartDefaultChartStyle, - EchartDefaultTextStyle + EchartDefaultTextStyle, + ColorControl, + EchartDefaultDetailStyle, + toArray } from "lowcoder-sdk"; import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core"; import { BarChartConfig } from "../chartComp/chartConfigs/barChartConfig"; @@ -34,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"), @@ -232,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; @@ -250,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, @@ -267,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')), @@ -276,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 (EchartDefaultChartStyle && EchartDefaultTextStyle) { + +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 cb25183bd..cab358d44 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 e2c5fa310..971775100 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}
{b} : {c}%" }, - "color": props?.echartsOption?.data?.map(data => data.color), + "color": props?.echartsData?.data?.map(data => data.color) || props?.echartsOption?.data?.map(data => data.color), "series": [ { "name": props.echartsConfig.type, @@ -179,17 +173,26 @@ export function getEchartsConfig( "pointer": { "length": `${props?.pointerLength}%`, "width": props?.pointerWidth, + "icon": props?.pointerIcon, + "offsetCenter": [0, `${-Number(props.pointer_Y)}%`] + }, + "axisTick": { + "length": props.axisTickLength, + "lineStyle": { + "color": props.axisTickColor, + "width": props.axisTickWidth + } + }, + "splitLine": { + "length": Number(props.axisTickLength) * 1.5, + "lineStyle": { + "color": props.axisTickColor, + "width": Number(props.axisTickWidth) * 1.5 + } }, "itemStyle": { "opacity": props?.opacity, - "borderColor": props?.chartStyle?.chartBorderColor || theme?.chartStyle?.borderColor, - "borderWidth": props?.chartStyle?.chartBorderWidth || theme?.chartStyle?.borderWidth, - "borderType": props?.chartStyle?.chartBorderStyle || theme?.chartStyle?.borderType, - "borderRadius": 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] + ...chartStyleWrapper(props?.chartStyle,theme?.chartStyle), }, "progress": { "roundCap": props.roundCap, @@ -203,51 +206,697 @@ export function getEchartsConfig( } }, "axisLabel": { - "distance": Number(props?.progressBarWidth) + 10, - "fontFamily": props?.axisLabelStyle?.chartFontFamily || theme?.axisLabelStyle?.fontFamily, - "fontSize": props?.axisLabelStyle?.chartTextSize || theme?.axisLabelStyle?.fontSize || 12, - "fontWeight": props?.axisLabelStyle?.chartTextWeight || theme?.axisLabelStyle?.fontWeight, - "color": props?.axisLabelStyle?.chartTextColor || theme?.axisLabelStyle?.fontColor || "#000000", - "fontStyle": props?.axisLabelStyle?.chartFontStyle || theme?.axisLabelStyle?.fontStyle, - "textShadowColor": props?.axisLabelStyle?.chartShadowColor || theme?.axisLabelStyle?.shadowColor, - "textShadowBlur": props?.axisLabelStyle?.chartBoxShadow?.split('px')[0] || theme?.axisLabelStyle?.boxShadow?.split('px')[0], - "textShadowOffsetX": props?.axisLabelStyle?.chartBoxShadow?.split('px')[1] || theme?.axisLabelStyle?.boxShadow?.split('px')[1], - "textShadowOffsetY": props?.axisLabelStyle?.chartBoxShadow?.split('px')[2] || theme?.axisLabelStyle?.boxShadow?.split('px')[2] + "distance": Number(props?.progressBarWidth) + Number(props.axisLabelDistance), + ...styleWrapper(props?.axisLabelStyle, theme?.axisLabelStyle, 12, "#000000"), }, 'detail': { - "fontFamily": props?.legendStyle?.chartFontFamily || theme?.legendStyle?.fontFamily, - "fontSize": props?.legendStyle?.chartTextSize || theme?.legendStyle?.fontSize || 16, - "fontWeight": props?.legendStyle?.chartTextWeight || theme?.legendStyle?.fontWeight, - "color": props?.legendStyle?.chartTextColor || theme?.legendStyle?.fontColor || "#000000", - "fontStyle": props?.legendStyle?.chartFontStyle || theme?.legendStyle?.fontStyle, - "textShadowColor": props?.legendStyle?.chartShadowColor || theme?.legendStyle?.shadowColor, - "textShadowBlur": props?.legendStyle?.chartBoxShadow?.split('px')[0] || theme?.legendStyle?.boxShadow?.split('px')[0], - "textShadowOffsetX": props?.legendStyle?.chartBoxShadow?.split('px')[1] || theme?.legendStyle?.boxShadow?.split('px')[1], - "textShadowOffsetY": props?.legendStyle?.chartBoxShadow?.split('px')[2] || theme?.legendStyle?.boxShadow?.split('px')[2] + formatter: props?.echartsData?.data?.map(data => data.formatter)[0] || props?.echartsOption?.data?.map(data => data.formatter)[0], + ...styleWrapper(props?.legendStyle, theme?.legendStyle, 16, "#000000"), }, "label": { "show": props.label, "position": props.echartsLabelConfig.top, }, - "data": props.echartsOption.data?.map(item => ({ + "data": + props?.echartsData.length !== 0 && props?.echartsData?.map(item => ({ "value": item.value, "name": item.name, title: { - "fontFamily": props?.labelStyle?.chartFontFamily || theme?.labelStyle?.fontFamily, - "fontSize": props?.labelStyle?.chartTextSize || theme?.labelStyle?.fontSize, - "fontWeight": props?.labelStyle?.chartTextWeight || theme?.labelStyle?.fontWeight, - "color": props?.labelStyle?.chartTextColor || theme?.labelStyle?.fontColor || "#000000", - "fontStyle": props?.labelStyle?.chartFontStyle || theme?.labelStyle?.fontStyle, - "textShadowColor": props?.labelStyle?.chartShadowColor || theme?.labelStyle?.shadowColor, - "textShadowBlur": props?.labelStyle?.chartBoxShadow?.split('px')[0] || theme?.labelStyle?.boxShadow?.split('px')[0], - "textShadowOffsetX": props?.labelStyle?.chartBoxShadow?.split('px')[1] || theme?.labelStyle?.boxShadow?.split('px')[1], - "textShadowOffsetY": props?.labelStyle?.chartBoxShadow?.split('px')[2] || theme?.labelStyle?.boxShadow?.split('px')[2] + ...styleWrapper(props?.labelStyle, theme?.labelStyle, 18, "#000000"), + }})) + || + props.echartsOption.data?.map(item => ({ + "value": item.value, + "name": item.name, + title: { + ...styleWrapper(props?.labelStyle, theme?.labelStyle, 18, "#000000"), + }})) + } + ] + } + + const { progress, ...basicSeries } = basic.series[0]; + const { color, ...basicStyle } = basic; + + let stageGaugeOpt = { + ...basicStyle, + series: [ + { + ...basicSeries, + axisLine: { + lineStyle: { + width: props.stageProgressBarWidth, + color: props?.stageGaugeData?.data?.map(data => data.color)[0] || props?.stageGaugeOption?.data?.map(data => data.color)[0] + } + }, + pointer: { + ...basicSeries.pointer, + itemStyle: { + color: 'auto', + } + }, + axisTick: { + distance: -Number(props.stageProgressBarWidth), + length: props.axisTickLength, + lineStyle: { + color: props.stageAxisTickColor, + width: props.axisTickWidth + } + }, + splitLine: { + distance: -Number(props.stageProgressBarWidth), + length: props.stageProgressBarWidth, + lineStyle: { + color: props.stageAxisTickColor, + width: Number(props.axisTickWidth) * 1.5 + } + }, + axisLabel: { + distance: Number(props?.stageProgressBarWidth) + Number(props.axisLabelDistance), + ...styleWrapper(props?.axisLabelStyle, theme?.axisLabelStyle, 13, "inherit"), + }, + detail: { + valueAnimation: true, + formatter: props?.stageGaugeData?.data?.map(data => data.formatter)[0] || props?.stageGaugeOption?.data?.map(data => data.formatter)[0], + ...styleWrapper(props?.legendStyle, theme?.legendStyle, 20, "inherit"), + }, + data: [ + { + value: props?.stageGaugeData.length !== 0 && props?.stageGaugeData?.map(data => data.value) || props?.stageGaugeOption?.data?.map(data => data.value) + } + ] + } + ] + } + + let gradeGaugeOpt = { + ...basicStyle, + series: [ + { + ...basicSeries, + type: 'gauge', + axisLine: { + lineStyle: { + width: props.progressBarWidth, + color:props?.gradeGaugeData?.data?.map(data => data.color)[0] || props?.gradeGaugeOption?.data?.map(data => data.color)[0] + } + }, + progress: { + width: props?.stageProgressBarWidth, + }, + pointer: { + icon: props.gradePointerIcon || 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z', + length: props.gradeGaugePointerLength, // slightly shorter pointer + width: props.gradeGaugePointerWidth, // slightly narrower pointer + offsetCenter: [0, `-${props.gradeGaugePointer_Y}%`], + itemStyle: { + color: 'auto' + } + }, + axisTick: { + length: props.axisTickLength, + lineStyle: { + color: props.gradeAxisTickColor || 'auto', + width: props.axisTickWidth + } + }, + splitLine: { + length: Number(props.axisTickLength) * 2, + lineStyle: { + color: props.gradeAxisTickColor || 'auto', + width: Number(props.axisTickWidth) * 1.5 + } + }, + axisLabel: { + show: false + }, + title: { + offsetCenter: [0, '0%'], + ...styleWrapper(props?.labelStyle, theme?.labelStyle, 16), + }, + detail: { + offsetCenter: [0, '25%'], + valueAnimation: true, + formatter: props?.gradeGaugeData?.data?.map(data => data.formatter)[0] || props?.gradeGaugeOption?.data?.map(data => data.formatter)[0], + ...styleWrapper(props?.legendStyle, theme?.legendStyle, 20, 'inherit'), + }, + data: [ + { + value: props?.gradeGaugeData.length !== 0 && props?.gradeGaugeData?.map(data => data.value) || props?.gradeGaugeOption?.data?.map(data => data.value), + name: props?.gradeGaugeData.length !== 0 && props?.gradeGaugeData?.map(data => data.name)[0] || props?.gradeGaugeOption?.data?.map(data => data.name)[0], + } + ] + } + ] + } + + let multiGaugeOpt = { + ...basicStyle, + series: [ + { + ...basicSeries, + type: 'gauge', + anchor: { + show: true, + showAbove: true, + size: Number(props?.pointerWidth) * 1.5, + itemStyle: { + color: props?.multiTitleGaugeData?.data && props?.multiTitleGaugeData?.data[0]["value"].slice(-1)[0] || props?.multiTitleGaugeOption?.data && props?.multiTitleGaugeOption?.data[0]["value"].slice(-1)[0] } - })) + }, + progress: { + overlap: true, + ...progress + }, + + data: + props?.multiTitleGaugeOption?.data && props?.multiTitleGaugeOption?.data[0]?.value?.map((item, index) => ({ + value: props?.multiTitleGaugeData.length !== 0 && props?.multiTitleGaugeData[index] || item.value, + name: item.title, + title: { + offsetCenter: item.titlePosition + }, + detail: { + offsetCenter: item.valuePosition, + + }, + itemStyle: { + color: item.color + }, + pointer: { + itemStyle: { + color: item.color + } + } + })), + + title: { + ...styleWrapper(props?.labelStyle, theme?.labelStyle, 16), + }, + pointer: { + ...basicSeries.pointer, + icon: props?.multiTitlePointerIcon, + }, + detail: { + ...styleWrapper(props?.legendStyle, theme?.legendStyle, 16, '#ffffff', 0, 'inherit'), + "width": props?.legendStyle?.detailSize?.split('px')[0] || theme?.legendStyle?.detailSize && theme?.legendStyle?.detailSize.split('px')[0] || 40, + "height": props?.legendStyle?.detailSize?.split('px')[1] || theme?.legendStyle?.detailSize && theme?.legendStyle?.detailSize.split('px')[1] || 20, + formatter: props?.multiTitleGaugeData?.data?.map(data => data.formatter)[0] || props?.multiTitleGaugeOption?.data?.map(data => data.formatter)[0], + } } ] } - return props.echartsOption ? opt : {}; + + let temperatureGaugeOpt = { + ...basicStyle, + series: [ + { + ...basicSeries, + radius: `${props.temperatureRadius}%`, + itemStyle: { + color: props?.temperatureGaugeData?.data?.map(data => data.color)[0] || props?.temperatureGaugeOption?.data?.map(data => data.color)[0] + }, + progress: { + show: true, + width: props.temperatureProgressBarWidth + }, + pointer: { + show: false + }, + axisLine: { + lineStyle: { + width: props.temperatureProgressBarWidth + } + }, + axisTick: { + distance: -Number(props.temperatureProgressBarWidth) - 15, + length: -Number(props.axisTickLength), + lineStyle: { + color: props.gradeAxisTickColor || '#999', + width: props.axisTickWidth + } + }, + splitLine: { + distance: -Number(props.temperatureProgressBarWidth) -15, + length: -Number(props.axisTickLength) * 2, + lineStyle: { + color: props.gradeAxisTickColor || '#999', + width: Number(props.axisTickWidth) * 1.5 + } + }, + axisLabel: { + distance: Number(props?.temperatureProgressBarWidth) - Number(props.temperatureAxisLabelDistance), + ...styleWrapper(props?.axisLabelStyle, theme?.axisLabelStyle, 20, "#999"), + }, + detail: { + valueAnimation: true, + offsetCenter: [0, '-15%'], + formatter: props?.temperatureGaugeData?.data?.map(data => data.formatter)[0] || props?.temperatureGaugeOption?.data?.map(data => data.formatter)[0], + ...styleWrapper(props?.legendStyle, theme?.legendStyle, 30, 'inherit'), + }, + data: [ + { + value: props?.temperatureGaugeData.length !== 0 && props?.temperatureGaugeData?.map(data => data.value) || props?.temperatureGaugeOption?.data?.map(data => data.value) + } + ] + }, + { + type: 'gauge', + center: [`${props?.position_x}%`, `${props?.position_y}%`], + startAngle: props?.startAngle, + endAngle: props?.endAngle, + splitNumber: props?.splitNumber, + min: props?.min, + max: props?.max, + radius: `${props.temperatureRadius}%`, + itemStyle: { + color: props?.temperatureGaugeData?.data?.map(data => data.borderColor)[0] || props?.temperatureGaugeOption?.data?.map(data => data.borderColor)[0] + }, + progress: { + show: true, + width: 6 + }, + pointer: { + show: false + }, + axisLine: { + show: false + }, + axisTick: { + show: false + }, + splitLine: { + show: false + }, + axisLabel: { + show: false + }, + detail: { + show: false + }, + data: [ + { + value: props?.temperatureGaugeData?.data?.map(data => data.value) || props?.temperatureGaugeOption?.data?.map(data => data.value) + } + ] + } + ] + } + + let ringGaugeOpt = { + ...basicStyle, + series: [ + { + ...basicSeries, + startAngle: 90, + endAngle: 450, + type: 'gauge', + pointer: { + show: false + }, + progress: { + roundCap: props?.roundCap, + show: true, + width: props?.ringProgressBarWidth, + overlap: false, + clip: false, + }, + axisLine: { + roundCap: props?.roundCap, + lineStyle: { + width: props?.ringProgressBarWidth + } + }, + splitLine: { + show: false + }, + axisTick: { + show: false + }, + axisLabel: { + show: false + }, + data: + props?.ringGaugeOption?.data && props?.ringGaugeOption?.data[0]?.value.map((item, index) => ({ + value: props?.ringGaugeData.length !== 0 && props?.ringGaugeData[index] || item.value, + name: item.title, + title: { + offsetCenter: item.titlePosition + }, + detail: { + offsetCenter: item.valuePosition + }, + itemStyle: { + color: item.color + }, + pointer: { + itemStyle: { + color: item.color + } + } + })), + title: { + ...styleWrapper(props?.labelStyle, theme?.labelStyle, 16), + }, + detail: { + ...styleWrapper(props?.legendStyle, theme?.legendStyle, 16, 'inherit', 1, ''), + "width": props?.legendStyle?.detailSize?.split('px')[0] || theme?.legendStyle?.detailSize && theme?.legendStyle?.detailSize.split('px')[0] || 50, + "height": props?.legendStyle?.detailSize?.split('px')[1] || theme?.legendStyle?.detailSize && theme?.legendStyle?.detailSize.split('px')[1] || 20, + formatter: props?.ringGaugeData?.data?.map(data => data.formatter)[0] || props?.ringGaugeOption?.data?.map(data => data.formatter)[0], + } + } + ] + } + + let barometerGaugeOpt = { + ...basic, + series: + props?.barometerGaugeOption?.data && [ + { + ...basicSeries, + type: 'gauge', + min: props?.barometerGaugeOption?.data[0]?.outline?.period[0], + max: props?.barometerGaugeOption?.data[0]?.outline?.period[1], + center: [`${props?.position_x}%`, `${props?.position_y}%`], + splitNumber: props?.barometerGaugeOption?.data[0]?.outline?.splitNumber, + radius: props?.barometerGaugeOption?.data[0]?.outline?.radius, + axisLine: { + lineStyle: { + color: [[1, props?.barometerGaugeOption?.data[0]?.outline?.color]], + width: props?.barometerGaugeOption?.data[0]?.outline?.progressBarWidth + } + }, + splitLine: { + distance: -Number(props?.barometerGaugeOption?.data[0]?.outline?.progressBarWidth), + length: -Number(props?.barometerGaugeOption?.data[0]?.outline?.axisTickLength) * 2, + lineStyle: { + color: props?.barometerGaugeOption?.data[0]?.outline?.color, + width: Number(props?.barometerGaugeOption?.data[0]?.outline?.axisTickWidth) * 1.5 + } + }, + axisTick: { + distance: -Number(props?.barometerGaugeOption?.data[0]?.outline?.progressBarWidth), + length: -Number(props?.barometerGaugeOption?.data[0]?.outline?.axisTickLength), + lineStyle: { + color: props?.barometerGaugeOption?.data[0]?.outline?.color, + width: props?.barometerGaugeOption?.data[0]?.outline?.axisTickWidth + } + }, + axisLabel: { + distance: Number(props?.barometerGaugeOption?.data[0]?.outline?.progressBarWidth) - 20, + ...styleWrapper(props?.axisLabelStyle, theme?.axisLabelStyle, 13, '#c80707') + }, + pointer: { + ...basicSeries.pointer, + icon: props?.barometerPointerIcon, + length: `${props?.barometerPointerLength}%`, + width: props?.barometerPointerWidth, + offsetCenter: [0, `${-Number(props.barometerPointer_Y)}%`], + itemStyle: { + color: props?.barometerGaugeOption?.data[0]?.inline?.color + } + }, + anchor: { + show: true, + size: 10, + itemStyle: { + borderColor: '#000', + borderWidth: 1 + } + }, + detail: { + valueAnimation: true, + precision: 2, // Increase precision or keep as is + ...styleWrapper(props?.legendStyle, theme?.legendStyle, 16), + offsetCenter: [0, '40%'], + formatter: props?.barometerGaugeOption?.data?.map(data => data.formatter)[0], + }, + title: { + offsetCenter: [0, '-40%'], // Adjust title placement for smaller chart + ...styleWrapper(props?.labelStyle, theme?.labelStyle, 13) + }, + data: [ + { + value: props?.barometerGaugeData.length !== 0 && props?.barometerGaugeData[0]?.value || props?.barometerGaugeOption?.data[0]?.value, + name: props?.barometerGaugeData.length !== 0 && props?.barometerGaugeData[0]?.name || props?.barometerGaugeOption?.data[0]?.name, + } + ] + }, + { + ...basicSeries, + type: 'gauge', + min: props?.barometerGaugeOption?.data[0]?.inline?.period[0], + max: props?.barometerGaugeOption?.data[0]?.inline?.period[1], + center: [`${props?.position_x}%`, `${props?.position_y}%`], + splitNumber: props?.barometerGaugeOption?.data[0]?.inline?.splitNumber, + radius: props?.barometerGaugeOption?.data[0]?.inline?.radius, + anchor: { + show: true, + size: 6, + itemStyle: { + color: '#000' + } + }, + axisLine: { + lineStyle: { + color: [[1, props?.barometerGaugeOption?.data[0]?.inline?.color]], + width: props?.barometerGaugeOption?.data[0]?.inline?.progressBarWidth + } + }, + splitLine: { + distance: -2, // Adjust spacing + length: Number(props?.barometerGaugeOption?.data[0]?.inline?.axisTickLength) * 2, + lineStyle: { + color: props?.barometerGaugeOption?.data[0]?.inline?.color, + width: Number(props?.barometerGaugeOption?.data[0]?.inline?.axisTickWidth) * 1.5 + } + }, + axisTick: { + distance: 0, + length: props?.barometerGaugeOption?.data[0]?.inline?.axisTickLength, + lineStyle: { + color: props?.barometerGaugeOption?.data[0]?.inline?.color, + width: props?.barometerGaugeOption?.data[0]?.inline?.axisTickWidth + } + }, + axisLabel: { + distance: Number(props?.barometerGaugeOption?.data[0]?.inline?.progressBarWidth) + 6, + ...styleWrapper(props?.axisLabelStyleOutline, theme?.axisLabelStyleOutline, 13, '#000'), + }, + pointer: { + show: false + }, + title: { + show: false + }, + detail: { + show: false + } + } + ] + + } + + let clockGaugeOpt = { + ...basicStyle, + tooltip: false, + series: [ + { + ...basicSeries, + name: 'hour', + type: 'gauge', + startAngle: 90, + endAngle: -270, + min: 0, + max: 12, + center: ['50%', '50%'], + splitNumber: 12, + clockwise: true, + axisLine: { + lineStyle: { + width: props.progressBarWidth, + color: props?.clockGaugeData?.data?.map(data => data.outlineColor)[0] ? [[1, props?.clockGaugeData?.data?.map(data => data.outlineColor)[0]]] : [[1, props?.clockGaugeOption?.data?.map(data => data.outlineColor)[0]]], + shadowColor: props?.chartStyle?.chartShadowColor || theme?.chartStyle?.shadowColor, + shadowBlur: props?.chartStyle?.chartBoxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow && theme?.chartStyle?.boxShadow?.split('px')[0], + shadowOffsetX: props?.chartStyle?.chartBoxShadow?.split('px')[1] || theme?.chartStyle?.boxShadow && theme?.chartStyle?.boxShadow?.split('px')[1], + shadowOffsetY: props?.chartStyle?.chartBoxShadow?.split('px')[2] || theme?.chartStyle?.boxShadow && theme?.chartStyle?.boxShadow?.split('px')[2] + } + }, + axisTick: { + length: props.axisTickLength, + lineStyle: { + width: props.axisTickWidth, + color: props.axisTickColor, + shadowColor: props?.chartStyle?.chartShadowColor + "55" || theme?.chartStyle?.shadowColor + "55", + shadowBlur: props?.chartStyle?.chartBoxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow && theme?.chartStyle?.boxShadow?.split('px')[0], + shadowOffsetX: props?.chartStyle?.chartBoxShadow?.split('px')[1] || theme?.chartStyle?.boxShadow && theme?.chartStyle?.boxShadow?.split('px')[1], + shadowOffsetY: props?.chartStyle?.chartBoxShadow?.split('px')[2] || theme?.chartStyle?.boxShadow && theme?.chartStyle?.boxShadow?.split('px')[2] + } + }, + splitLine: { + length: Number(props.axisTickLength) * 2, + lineStyle: { + width: Number(props.axisTickWidth) * 1.5, + color: props.axisTickColor, + shadowColor: props?.chartStyle?.chartShadowColor + "55" || theme?.chartStyle?.shadowColor + "55", + shadowBlur: props?.chartStyle?.chartBoxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow && theme?.chartStyle?.boxShadow?.split('px')[0], + shadowOffsetX: props?.chartStyle?.chartBoxShadow?.split('px')[1] || theme?.chartStyle?.boxShadow && theme?.chartStyle?.boxShadow?.split('px')[1], + shadowOffsetY: props?.chartStyle?.chartBoxShadow?.split('px')[2] || theme?.chartStyle?.boxShadow && theme?.chartStyle?.boxShadow?.split('px')[2] + } + }, + axisLabel: { + ...styleWrapper(props?.axisLabelStyle, theme?.axisLabelStyle, 16, "#000000"), + distance: Number(props?.progressBarWidth) + Number(props.axisLabelDistance), + formatter: function (value) { + if (value === 0) { + return ''; + } + return value + ''; + } + }, + pointer: { + icon: props?.clockPointerIcon, + width: props?.clockGaugeData?.data?.map(data => data.hour)[0]?.width || props?.clockGaugeOption?.data?.map(data => data.hour)[0]?.width, + length: props?.clockGaugeData?.data?.map(data => data.hour)[0]?.length || props?.clockGaugeOption?.data?.map(data => data.hour)[0]?.length, + offsetCenter: [0, '8%'], + itemStyle: { + color: props?.clockGaugeData?.data?.map(data => data.hour)[0]?.color || props?.clockGaugeOption?.data?.map(data => data.hour)[0]?.color, + shadowColor: props?.chartStyle?.chartShadowColor + "55" || theme?.chartStyle?.shadowColor + "55", + shadowBlur: props?.chartStyle?.chartBoxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow && theme?.chartStyle?.boxShadow?.split('px')[0], + shadowOffsetX: props?.chartStyle?.chartBoxShadow?.split('px')[1] || theme?.chartStyle?.boxShadow && theme?.chartStyle?.boxShadow?.split('px')[1], + shadowOffsetY: props?.chartStyle?.chartBoxShadow?.split('px')[2] || theme?.chartStyle?.boxShadow && theme?.chartStyle?.boxShadow?.split('px')[2] + } + }, + detail: { + show: false + }, + title: { + offsetCenter: [0, '30%'] + }, + data: [ + { + value: props?.clockGaugeData.length !== 0 && props?.clockGaugeData?.map(data => data.hour)[0]?.value || props?.clockGaugeOption?.data?.map(data => data.hour)[0]?.value + } + ] + }, + { + name: 'minute', + type: 'gauge', + startAngle: 90, + endAngle: -270, + min: 0, + max: 60, + clockwise: true, + axisLine: { + show: false + }, + splitLine: { + show: false + }, + axisTick: { + show: false + }, + axisLabel: { + show: false + }, + pointer: { + icon: props?.clockPointerIcon, + width: props?.clockGaugeData?.data?.map(data => data.minute)[0]?.width || props?.clockGaugeOption?.data?.map(data => data.minute)[0]?.width, + length: props?.clockGaugeData?.data?.map(data => data.minute)[0]?.length || props?.clockGaugeOption?.data?.map(data => data.minute)[0]?.length, + offsetCenter: [0, '8%'], + itemStyle: { + color: props?.clockGaugeData?.data?.map(data => data.minute)[0]?.color || props?.clockGaugeOption?.data?.map(data => data.minute)[0]?.color, + shadowColor: props?.chartStyle?.chartShadowColor + "55" || theme?.chartStyle?.shadowColor + "55", + shadowBlur: props?.chartStyle?.chartBoxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow && theme?.chartStyle?.boxShadow?.split('px')[0], + shadowOffsetX: props?.chartStyle?.chartBoxShadow?.split('px')[1] || theme?.chartStyle?.boxShadow && theme?.chartStyle?.boxShadow?.split('px')[1], + shadowOffsetY: props?.chartStyle?.chartBoxShadow?.split('px')[2] || theme?.chartStyle?.boxShadow && theme?.chartStyle?.boxShadow?.split('px')[2] + } + }, + detail: { + show: false + }, + title: { + offsetCenter: ['0%', '-40%'] + }, + data: [ + { + value: props?.clockGaugeData.length !== 0 && props?.clockGaugeData?.map(data => data.minute)[0]?.value || props?.clockGaugeOption?.data?.map(data => data.minute)[0]?.value + } + ] + }, + { + name: 'second', + type: 'gauge', + startAngle: 90, + endAngle: -270, + min: 0, + max: 60, + animationEasingUpdate: 'bounceOut', + clockwise: true, + axisLine: { + show: false + }, + splitLine: { + show: false + }, + axisTick: { + show: false + }, + axisLabel: { + show: false + }, + pointer: { + icon: props?.clockPointerIcon, + width: props?.clockGaugeData?.data?.map(data => data.second)[0]?.width || props?.clockGaugeOption?.data?.map(data => data.second)[0]?.width, + length: props?.clockGaugeData?.data?.map(data => data.second)[0]?.length || props?.clockGaugeOption?.data?.map(data => data.second)[0]?.length, + offsetCenter: [0, '8%'], + itemStyle: { + color: props?.clockGaugeData?.data?.map(data => data.second)[0]?.color || props?.clockGaugeOption?.data?.map(data => data.second)[0]?.color, + shadowColor: props?.chartStyle?.chartShadowColor + "55" || theme?.chartStyle?.shadowColor + "55", + shadowBlur: props?.chartStyle?.chartBoxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow && theme?.chartStyle?.boxShadow?.split('px')[0], + shadowOffsetX: props?.chartStyle?.chartBoxShadow?.split('px')[1] || theme?.chartStyle?.boxShadow && theme?.chartStyle?.boxShadow?.split('px')[1], + shadowOffsetY: props?.chartStyle?.chartBoxShadow?.split('px')[2] || theme?.chartStyle?.boxShadow && theme?.chartStyle?.boxShadow?.split('px')[2] + } + }, + anchor: { + show: true, + size: props?.clockGaugeData?.data?.map(data => data.anchor)[0]?.size || props?.clockGaugeOption?.data?.map(data => data.anchor)[0]?.size, + showAbove: true, + itemStyle: { + color: props?.clockGaugeData?.data?.map(data => data.anchor)[0]?.color || props?.clockGaugeOption?.data?.map(data => data.anchor)[0]?.color, + shadowColor: props?.chartStyle?.chartShadowColor + "55" || theme?.chartStyle?.shadowColor + "55", + shadowBlur: props?.chartStyle?.chartBoxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow && theme?.chartStyle?.boxShadow?.split('px')[0], + shadowOffsetX: props?.chartStyle?.chartBoxShadow?.split('px')[1] || theme?.chartStyle?.boxShadow && theme?.chartStyle?.boxShadow?.split('px')[1], + shadowOffsetY: props?.chartStyle?.chartBoxShadow?.split('px')[2] || theme?.chartStyle?.boxShadow && theme?.chartStyle?.boxShadow?.split('px')[2] + } + }, + detail: { + show: false + }, + title: { + offsetCenter: ['0%', '-40%'] + }, + data: [ + { + value: props?.clockGaugeData.length !== 0 && props?.clockGaugeData?.map(data => data.second)[0]?.value || props?.clockGaugeOption?.data?.map(data => data.second)[0]?.value + } + ] + } + ] + } + + const typeMap = { + default: basic, + stageGauge: stageGaugeOpt, + gradeGauge: gradeGaugeOpt, + temperatureGauge: temperatureGaugeOpt, + multiGauge: multiGaugeOpt, + ringGauge: ringGaugeOpt, + barometerGauge: barometerGaugeOpt, + clockGauge: clockGaugeOpt, + }; + + return typeMap[props.chartType] || basic; } diff --git a/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartComp.tsx b/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartComp.tsx index bbacc0995..a87d9d1ee 100644 --- a/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartComp.tsx @@ -142,13 +142,14 @@ 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)) @@ -176,7 +177,6 @@ GraphChartTmpComp = withViewFn(GraphChartTmpComp, (comp) => { lazyUpdate opts={{ locale: getEchartsLocale() }} option={option} - theme={mode !== 'map' ? themeConfig : undefined} 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 ae000e6f7..77ac2b7d2 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,30 @@ export const chartUiModeChildren = { }; let chartJsonModeChildren: any = { + echartsData: jsonControl(toArray), 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 ba9ebbebc..0a52ccfa2 100644 --- a/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartPropertyView.tsx @@ -16,6 +16,33 @@ export function graphChartPropertyView( const jsonModePropertyView = ( <>
+ {children.echartsData.propertyView({ label: trans("chart.data") })} + {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 +58,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 a75b6a8c2..45a68d841 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,33 +136,49 @@ 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) } - ] -} - return props.echartsOption ? opt : {}; + }, + backgroundColor: parseBackground( props?.chartStyle?.background || theme?.chartStyle?.backgroundColor || "#FFFFFF"), + "tooltip": props.tooltip&& { + "trigger": "item" + }, + 'series': [ + { + + "type": "graph", + "layout": "force", + 'categories': props?.echartsData?.categories || props.echartsOption.categories, + 'links': props?.echartsData.length !== 0 && props?.echartsData || 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.echartsData?.color?.lineColor || props.echartsOption?.color?.lineColor || "#00000033", + ...chartStyleWrapper(props?.chartStyle,theme?.chartStyle), + width: props?.lineWidth || 1, + curveness: props?.curveness + }, + 'nodes': props?.echartsData?.nodes || props.echartsOption.nodes, + itemStyle: { + "color": props.echartsData?.color?.pointColor || props.echartsOption?.color?.pointColor || "#0000ff", + ...chartStyleWrapper(props?.chartStyle,theme?.chartStyle), + }, + } + ], + } + return props.echartsData || 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 43fdfc045..a5bc421cd 100644 --- a/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartComp.tsx @@ -141,13 +141,14 @@ 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)) diff --git a/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartConstants.tsx index 51ccd46da..205a2905a 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,39 @@ export const chartUiModeChildren = { }; let chartJsonModeChildren: any = { + echartsData: jsonControl(toArray), 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 c7d350bfc..a73837038 100644 --- a/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartPropertyView.tsx @@ -16,31 +16,64 @@ 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.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 43bd48e03..80b04f59d 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/radarChartComp/radarChartComp.tsx b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartComp.tsx index 949828a76..edb3e6312 100644 --- a/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartComp.tsx @@ -141,13 +141,14 @@ 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)) diff --git a/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartConstants.tsx index 44d2631b8..97a1556e8 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,36 @@ export const chartUiModeChildren = { }; let chartJsonModeChildren: any = { + echartsData: jsonControl(toArray), 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 9a095b585..43cebc8c5 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.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 904910a35..2c0da13ef 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,104 @@ 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 + '
'; - params.forEach(function(item) { - tooltipText += item.seriesName + ': ' + item.value + '
'; - }); - return tooltipText; - } - }, - "radar": [ - { - "indicator": props.echartsOption.indicator, - "center": ["50%", "50%"], - "radius": "60%" - } + title: { + text: props?.echartsTitle, + top: props?.echartsTitleVerticalConfig.top, + left: props?.echartsTitleConfig.top, + textStyle: { + ...styleWrapper(props?.titleStyle, theme?.titleStyle) + } + }, + legend: props.legendVisibility && { + top: props.echartsLegendConfig.top, + left: props.echartsLegendAlignConfig.left, + orient: props.echartsLegendOrientConfig.orient, + textStyle: { + ...styleWrapper(props?.legendStyle, theme?.legendStyle, 15), + } + }, + 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: { + trigger: "axis", + formatter: function (params) { + let tooltipText = params[0].name + '
'; + params.forEach(function (item) { + tooltipText += item.seriesName + ': ' + item.value + '
'; + }); + return tooltipText; + } + }, + radar: [ + { + indicator: props.echartsData.indicator || props.echartsOption.indicator, + center: [`${props?.position_x}%`, `${props?.position_y}%`], + startAngle: props?.startAngle, + endAngle: props?.endAngle, + splitNumber: props?.splitNumber, + radius: `${props.radius}%`, + shape: props?.areaFlag ? 'circle' : 'line', + axisName: { + ...styleWrapper(props?.detailStyle, theme?.detailStyle, 13), + show: props?.indicatorVisibility, + }, + splitArea: { + areaStyle: { + color: props?.echartsData?.color || props?.echartsOption?.color, + ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle), + } + }, + } + ], + series: + props?.echartsData.length !== 0 ? + { + data: props?.echartsData && [ + ...props?.echartsData.map(item => ({ + ...item, + areaStyle: item.areaColor && { + ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle), + color: item.areaColor + }, + lineStyle: { + ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle), + color: item.lineColor, + width: item.lineWidth, + }, + symbolSize: item.pointSize, + itemStyle: { + color: item.pointColor + } + })) + ], + type: "radar" + } + : + props?.echartsOption && { + data: props?.echartsOption?.series && [ + ...props?.echartsOption?.series.map(item => ({ + ...item, + areaStyle: item.areaColor && { + ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle), + color: item.areaColor + }, + lineStyle: { + ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle), + color: item.lineColor, + width: item.lineWidth, + }, + symbolSize: item.pointSize, + itemStyle: { + color: item.pointColor + } + })) ], - "series": props.echartsOption.series.map(option=>{return {...option,type:'radar'}}) -} - return props.echartsOption ? opt : {}; + type: "radar" + } + } + return props.echartsData || props.echartsOption ? opt : {}; } diff --git a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartComp.tsx b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartComp.tsx index c171e6b95..0fedd251c 100644 --- a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartComp.tsx @@ -141,13 +141,14 @@ 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)) diff --git a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartConstants.tsx index 681d119e6..661dc6c12 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,37 @@ export const chartUiModeChildren = { }; let chartJsonModeChildren: any = { + echartsData: jsonControl(toArray), 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), } -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 4acfb77f8..fccae4fea 100644 --- a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartPropertyView.tsx @@ -16,32 +16,62 @@ export function sankeyChartPropertyView( const jsonModePropertyView = ( <>
- {children.echartsOption.propertyView({ - label: trans("chart.echartsOptionLabel"), - styleName: "higher", - tooltip: ( - - ), - })} + {children.echartsData.propertyView({ label: trans("chart.data") })} + + {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.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 16b3679a1..123b1c94e 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,61 @@ 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}
{b} : {c}%" - }, - "series": [ - { - "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 + 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", + formatter: "{a}
{b} : {c}%" }, - "data": props.echartsOption.data, - "links":props.echartsOption.links + series: [ + { + name: props.echartsConfig.type, + type: props.echartsConfig.type, + left: `${props?.left}%`, + right: `${props?.right}%`, + bottom: `${props?.bottom}%`, + top: `${props?.top}%`, + label: { + show: true, + position: props.echartsLabelConfig.top, + ...styleWrapper(props?.detailStyle, theme?.detailStyle,15) + }, + data: props?.echartsData.length !== 0 && props?.echartsData?.map(item => ({ + name: item.name, + itemStyle: isColorString(item.color) && {color: item.color} + })) || props?.echartsOption?.data && props?.echartsOption?.data?.map(item => ({ + name: item.name, + itemStyle: isColorString(item.color) && {color: item.color} + })), + links: props.echartsData.links || props.echartsOption.links, + emphasis: { + focus: props?.focus ? 'adjacency' : undefined, + }, + lineStyle: { + ...chartStyleWrapper(props?.lineStyle, theme?.lineStyle), + color: 'gradient', + curveness: props?.curveness, + opacity: props?.opacity, + }, + itemStyle: { + ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle), + }, + nodeWidth: props?.nodeWidth, + nodeGap: props?.nodeGap, + draggable: props?.draggable, + } + ] } - ] -} - return props.echartsOption ? opt : {}; + return props.echartsData || props.echartsOption ? opt : {}; } diff --git a/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartComp.tsx b/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartComp.tsx index a5714c8ac..aaa6ff799 100644 --- a/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartComp.tsx @@ -141,13 +141,14 @@ 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)) diff --git a/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartConstants.tsx index a26e08c2c..8a6c426c4 100644 --- a/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartConstants.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,8 @@ import { SeriesListComp } from "../chartComp/seriesComp"; import { EChartsOption } from "echarts"; import { i18nObjs, trans } from "i18n/comps"; import { SunburstChartConfig } from "comps/chartComp/chartConfigs/sunburstChartConfig"; +import {EchartsTitleVerticalConfig} from "../chartComp/chartConfigs/echartsTitleVerticalConfig"; +import {EchartsTitleConfig} from "../chartComp/chartConfigs/echartsTitleConfig"; export const ChartTypeOptions = [ { @@ -248,19 +253,28 @@ export const chartUiModeChildren = { }; let chartJsonModeChildren: any = { + echartsData: jsonControl(toArray), echartsOption: jsonControl(toObject, i18nObjs.defaultSunburstChartOption), echartsTitle: withDefault(StringControl, trans("sunburstChart.defaultTitle")), echartsLegendConfig: EchartsLegendConfig, echartsLabelConfig: EchartsLabelConfig, echartsConfig: EchartsOptionComp, - // style: styleControl(EchartsStyle, 'style'), + echartsTitleVerticalConfig: EchartsTitleVerticalConfig, + echartsTitleConfig:EchartsTitleConfig, + + radiusInline:withDefault(NumberControl,trans('sunburstChart.defaultRadiusInline')), + radiusOutline:withDefault(NumberControl,trans('sunburstChart.defaultRadiusOutline')), + position_x:withDefault(StringControl,trans('sunburstChart.defaultPosition_X')), + position_y:withDefault(StringControl,trans('sunburstChart.defaultPosition_Y')), tooltip: withDefault(BoolControl, true), - legendVisibility: withDefault(BoolControl, true), + labelVisibility: withDefault(BoolControl, true), } -if (EchartsStyle) { +if (RadarLabelStyle && EchartDefaultChartStyle && EchartDefaultTextStyle) { chartJsonModeChildren = { ...chartJsonModeChildren, - style: styleControl(EchartsStyle, 'style'), + chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'), + titleStyle: styleControl(EchartDefaultTextStyle, 'titleStyle'), + detailStyle: styleControl(RadarLabelStyle, 'detailStyle'), } } diff --git a/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartPropertyView.tsx index 9b2ff99b0..5ea3c1ee3 100644 --- a/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartPropertyView.tsx @@ -16,31 +16,55 @@ export function sunburstChartPropertyView( const jsonModePropertyView = ( <>
- {children.echartsOption.propertyView({ - label: trans("chart.echartsOptionLabel"), - styleName: "higher", - tooltip: ( - - ), - })} - {children.echartsTitle.propertyView({ label: trans("sunburstChart.title") })} - {children.tooltip.propertyView({label: trans("sunburstChart.tooltip")})} + {children.echartsData.propertyView({ label: trans("chart.data") })} + + {children.echartsTitleConfig.getPropertyView()} + {children.echartsTitleVerticalConfig.getPropertyView()} + + {children.echartsTitle.propertyView({ label: trans("sunburstChart.title"), tooltip: trans("echarts.titleTooltip") })} + {children.radiusInline.propertyView({ label: trans("sunburstChart.radiusInline"), tooltip: trans("sunburstChart.radiusInlineTooltip") })} + {children.radiusOutline.propertyView({ label: trans("sunburstChart.radiusOutline"), tooltip: trans("sunburstChart.radiusOutlineTooltip") })} + {children.position_x.propertyView({ label: trans("sunburstChart.position_x"), tooltip: trans("echarts.positionChart_x_Tooltip") })} + {children.position_y.propertyView({ label: trans("sunburstChart.position_Y"), tooltip: trans("echarts.positionChart_y_Tooltip") })} + + {children.tooltip.propertyView({label: trans("sunburstChart.tooltip"), tooltip: trans("echarts.tooltipTooltip")})} + {children.labelVisibility.propertyView({label: trans("sunburstChart.labelVisibility"), tooltip: trans("echarts.labelVisibilityTooltip")})}
{children.onEvent.propertyView()}
-
- {children.style?.getPropertyView()} + +
+ {children.chartStyle?.getPropertyView()}
+
+ {children.titleStyle?.getPropertyView()} +
+ { + children.labelVisibility.getView() && +
+ {children.detailStyle?.getPropertyView()} +
+ } +
{hiddenPropertyView(children)}
+
+ {children.echartsOption.propertyView({ + label: trans("chart.echartsOptionLabel"), + styleName: "higher", + tooltip: ( + + ), + })} +
); diff --git a/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartUtils.ts b/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartUtils.ts index dda543eaa..7a406e2cd 100644 --- a/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartUtils.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[], @@ -133,33 +135,45 @@ 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" - }, - "backgroundColor": props?.style?.background || theme?.style?.background, - "color": props.echartsOption.data?.map(data => data.color), - "tooltip": props.tooltip&&{ - "trigger": "item", - "formatter": "{b}: {c}" - }, - "series": [ - { - "name": props.echartsConfig.type, - "type": props.echartsConfig.type, - "top": "10%", - "left": "10%", - "bottom": "10%", - "right": "10%", - "symbolSize": 7, - 'data': props.echartsOption.data, + 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" + ), + color: props.echartsData.data?.map(data => data.color) || props.echartsOption.data?.map(data => data.color), + tooltip: props.tooltip&&{ + trigger: "item", + formatter: "{b}: {c}" + }, + series: [ + { + type: props.echartsConfig.type, + radius: [`${props?.radiusInline}%`, `${props?.radiusOutline}%`], + center: [`${props?.position_x}%`, `${props?.position_y}%`], + symbolSize: 7, + data: props?.echartsData.length !== 0 && props?.echartsData || props.echartsOption.data, + levels: props.echartsData.levels || props.echartsOption.levels, + itemStyle: { + ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle) + }, + label: { + show: props?.labelVisibility, + rotate: 'tangential', + ...styleWrapper(props?.detailStyle, theme?.detailStyle,11) + }, + } + ], } - ] -} - return props.echartsOption ? opt : {}; + return props.echartsData || props.echartsOption ? opt : {}; } diff --git a/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartComp.tsx b/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartComp.tsx index b55346bdd..7724fe72a 100644 --- a/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartComp.tsx @@ -141,13 +141,14 @@ ThemeriverChartTmpComp = withViewFn(ThemeriverChartTmpComp, (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)) diff --git a/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartConstants.tsx index 8819fb2fb..efe1bd375 100644 --- a/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartConstants.tsx @@ -16,7 +16,9 @@ import { uiChildren, clickEvent, styleControl, - EchartsStyle + EchartDefaultChartStyle, + EchartDefaultTextStyle, + toArray } from "lowcoder-sdk"; import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core"; import { BarChartConfig } from "../chartComp/chartConfigs/barChartConfig"; @@ -31,6 +33,10 @@ import { SeriesListComp } from "../chartComp/seriesComp"; import { EChartsOption } from "echarts"; import { i18nObjs, trans } from "i18n/comps"; import { ThemeriverChartConfig } from "comps/chartComp/chartConfigs/themeriverChartConfig"; +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 +254,33 @@ export const chartUiModeChildren = { }; let chartJsonModeChildren: any = { + echartsData: jsonControl(toArray), echartsOption: jsonControl(toObject, i18nObjs.defaultThemeriverChartOption), echartsTitle: withDefault(StringControl, trans("themeriverChart.defaultTitle")), echartsLegendConfig: EchartsLegendConfig, echartsLabelConfig: EchartsLabelConfig, echartsConfig: EchartsOptionComp, - // style: styleControl(EchartsStyle, 'style'), + echartsTitleVerticalConfig: EchartsTitleVerticalConfig, + echartsTitleConfig:EchartsTitleConfig, + echartsLegendOrientConfig: EchartsLegendOrientConfig, + echartsLegendAlignConfig: EchartsLegendAlignConfig, + + splitNumber:withDefault(NumberControl,trans('themeriverChart.defaultSplitNumber')), + left:withDefault(NumberControl,trans('themeriverChart.defaultLeft')), + right:withDefault(NumberControl,trans('themeriverChart.defaultRight')), + top:withDefault(NumberControl,trans('themeriverChart.defaultTop')), + bottom:withDefault(NumberControl,trans('themeriverChart.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'), + axisStyle: styleControl(EchartDefaultTextStyle, 'axisStyle'), + legendStyle: styleControl(EchartDefaultTextStyle, 'legendStyle'), } } const chartMapModeChildren = { diff --git a/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartPropertyView.tsx index 1825bc6ee..efa347a0d 100644 --- a/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartPropertyView.tsx @@ -16,6 +16,46 @@ export function themeriverChartPropertyView( const jsonModePropertyView = ( <>
+ {children.echartsData.propertyView({ label: trans("chart.data") })} + + {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("themeriverChart.title"), tooltip: trans("echarts.titleTooltip") })} + {children.splitNumber.propertyView({ label: trans("themeriverChart.splitNumber"), tooltip: trans("echarts.splitNumberTooltip") })} + {children.left.propertyView({ label: trans("themeriverChart.left"), tooltip: trans("echarts.leftTooltip") })} + {children.right.propertyView({ label: trans("themeriverChart.right"), tooltip: trans("echarts.rightTooltip") })} + {children.top.propertyView({ label: trans("themeriverChart.top"), tooltip: trans("echarts.topTooltip") })} + {children.bottom.propertyView({ label: trans("themeriverChart.bottom"), tooltip: trans("echarts.bottomTooltip") })} + + {children.legendVisibility.propertyView({label: trans("echarts.legendVisibility"), tooltip: trans("echarts.legendVisibilityTooltip")})} + {children.tooltip.propertyView({label: trans("themeriverChart.tooltip"), tooltip: trans("echarts.tooltipTooltip")})} +
+
+ {children.onEvent.propertyView()} +
+ +
+ {children.chartStyle?.getPropertyView()} +
+
+ {children.titleStyle?.getPropertyView()} +
+
+ {children.axisStyle?.getPropertyView()} +
+ { + children.legendVisibility.getView() && +
+ {children.legendStyle?.getPropertyView()} +
+ } + +
{hiddenPropertyView(children)}
+
{children.echartsOption.propertyView({ label: trans("chart.echartsOptionLabel"), styleName: "higher", @@ -31,16 +71,7 @@ export function themeriverChartPropertyView( ), })} - {children.echartsTitle.propertyView({ label: trans("themeriverChart.title") })} - {children.tooltip.propertyView({label: trans("themeriverChart.tooltip")})}
-
- {children.onEvent.propertyView()} -
-
- {children.style?.getPropertyView()} -
-
{hiddenPropertyView(children)}
); diff --git a/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartUtils.ts b/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartUtils.ts index 8eb9f8629..bcaf15884 100644 --- a/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartUtils.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[], @@ -134,59 +136,80 @@ 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, - "tooltip": props.tooltip&&{ - "trigger": "axis", - "axisPointer": { - "type": "line", - "lineStyle": { - "color": "rgba(0,0,0,0.2)", - "width": 2, - "type": "solid" - } - } - }, - "singleAxis": { - "type": "time", - "bottom": 50, - "axisTick": {}, - "axisLabel": {}, - "splitLine": {}, - "axisPointer": { - "animation": true, - "label": { - "show": true, - "color": "#fff" - } - }, - "splitNumber": 30 - }, - "series": [ - { - "type": props.echartsConfig.type, - "data": props.echartsOption.data, - "label": { - "show": true, - "position": "top", - "fontSize": 12 + let opt= props.echartsOption && { + title: { + text: props?.echartsTitle, + top: props?.echartsTitleVerticalConfig.top, + left: props?.echartsTitleConfig.top, + textStyle: { + ...styleWrapper(props?.titleStyle, theme?.titleStyle) + } }, - "emphasis": { - "itemStyle": { - "shadowBlur": 20, - "shadowColor": "rgba(0, 0, 0, 0.8)" + 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" + } } - } + }, + legend: props.legendVisibility && { + top: props.echartsLegendConfig.top, + left: props.echartsLegendAlignConfig.left, + orient: props.echartsLegendOrientConfig.orient, + data: props?.echartsData?.data && Array.from(new Set((props.echartsData.data).map(item => item[2]))) || props?.echartsOption?.data && Array.from(new Set((props.echartsOption.data).map(item => item[2]))), + textStyle: { + ...styleWrapper(props?.legendStyle, theme?.legendStyle, 13) + } + }, + singleAxis: { + left: `${props?.left}%`, + right: `${props?.right}%`, + bottom: `${props?.bottom}%`, + top: `${props?.top}%`, + type: "time", + axisTick: {}, + axisLabel: { + ...styleWrapper(props?.axisStyle, theme?.axisStyle, 13) + }, + splitLine: {}, + axisPointer: { + animation: true, + label: { + show: true, + color: "#fff" + } + }, + splitNumber: props?.splitNumber + }, + series: [ + { + type: props.echartsConfig.type, + data: props?.echartsData.length !== 0 && props?.echartsData || props.echartsOption.data, + label: { + show: true, + position: "top", + fontSize: 12 + }, + itemStyle: { + ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle), + }, + emphasis: { + itemStyle: { + shadowBlur: 20, + shadowColor: "rgba(0, 0, 0, 0.8)" + } + }, + color: props.echartsData?.color && props.echartsData.color || props.echartsOption?.color && props.echartsOption.color + }, + ] } - ] -} - return props.echartsOption ? opt : {}; + return props.echartsData || props.echartsOption ? opt : {}; } diff --git a/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartConstants.tsx index 62804d637..095070428 100644 --- a/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartConstants.tsx @@ -16,7 +16,11 @@ import { uiChildren, clickEvent, styleControl, - EchartsStyle + EchartsStyle, + RadarLabelStyle, + EchartDefaultChartStyle, + EchartDefaultTextStyle, + 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 { TreeChartConfig } from "comps/chartComp/chartConfigs/treeChartConfig"; +import {EchartsTitleVerticalConfig} from "../chartComp/chartConfigs/echartsTitleVerticalConfig"; +import {EchartsTitleConfig} from "../chartComp/chartConfigs/echartsTitleConfig"; export const ChartTypeOptions = [ { @@ -248,19 +254,33 @@ export const chartUiModeChildren = { }; let chartJsonModeChildren: any = { + echartsData: jsonControl(toArray), echartsOption: jsonControl(toObject, i18nObjs.defaultTreeChartOption), echartsTitle: withDefault(StringControl, trans("treeChart.defaultTitle")), echartsLegendConfig: EchartsLegendConfig, echartsLabelConfig: EchartsLabelConfig, echartsConfig: EchartsOptionComp, - // style: styleControl(EchartsStyle, 'style'), + echartsTitleVerticalConfig: EchartsTitleVerticalConfig, + echartsTitleConfig:EchartsTitleConfig, + + left:withDefault(NumberControl,trans('treeChart.defaultLeft')), + right:withDefault(NumberControl,trans('treeChart.defaultRight')), + top:withDefault(NumberControl,trans('treeChart.defaultTop')), + bottom:withDefault(NumberControl,trans('treeChart.defaultBottom')), + pointSize:withDefault(NumberControl,trans('treeChart.defaultPointSize')), + lineWidth:withDefault(NumberControl,trans('treeChart.defaultlineWidth')), + + edgeShape: withDefault(BoolControl, true), tooltip: withDefault(BoolControl, true), legendVisibility: withDefault(BoolControl, true), } -if (EchartsStyle) { + +if (RadarLabelStyle && EchartDefaultChartStyle && EchartDefaultTextStyle) { chartJsonModeChildren = { ...chartJsonModeChildren, - style: styleControl(EchartsStyle, 'style'), + chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'), + titleStyle: styleControl(EchartDefaultTextStyle, 'titleStyle'), + detailStyle: styleControl(RadarLabelStyle, 'detailStyle'), } } diff --git a/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartPropertyView.tsx index 342906516..56d851028 100644 --- a/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartPropertyView.tsx @@ -16,31 +16,53 @@ export function treeChartPropertyView( const jsonModePropertyView = ( <>
- {children.echartsOption.propertyView({ - label: trans("chart.echartsOptionLabel"), - styleName: "higher", - tooltip: ( - - ), - })} + {children.echartsData.propertyView({ label: trans("chart.data") })} + {children.echartsTitleConfig.getPropertyView()} + {children.echartsTitleVerticalConfig.getPropertyView()} {children.echartsTitle.propertyView({ label: trans("treeChart.title") })} + + {children.left.propertyView({ label: trans("treeChart.left"), tooltip: trans("echarts.leftTooltip") })} + {children.right.propertyView({ label: trans("treeChart.right"), tooltip: trans("echarts.rightTooltip") })} + {children.top.propertyView({ label: trans("treeChart.top"), tooltip: trans("echarts.topTooltip") })} + {children.bottom.propertyView({ label: trans("treeChart.bottom"), tooltip: trans("echarts.bottomTooltip") })} + {children.pointSize.propertyView({ label: trans("treeChart.pointSize"), tooltip: trans("treeChart.pointSizeTooltip") })} + {children.lineWidth.propertyView({ label: trans("treeChart.lineWidth"), tooltip: trans("treeChart.lineWidthTooltip") })} + {children.tooltip.propertyView({label: trans("treeChart.tooltip")})} +
{children.onEvent.propertyView()}
-
- {children.style?.getPropertyView()} + +
+ {children.chartStyle?.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/treeChartComp/treeChartUtils.ts b/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartUtils.ts index 35490fcb1..083b18103 100644 --- a/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartUtils.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,43 +137,57 @@ 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", - "triggerOn": "mousemove" - }, - "series": [ - { - "name": props.echartsConfig.type, - "type": props.echartsConfig.type, - "top": "10%", - "left": "10%", - "bottom": "10%", - "right": "10%", - "symbolSize": 7, - 'data': props.echartsOption.data, - "label": { - "position": "top", - "verticalAlign": "middle", - "align": "right" + 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"), + color: props.echartsData.data?.map(data => data.color) || props.echartsOption.data?.map(data => data.color), + tooltip: props.tooltip && { + trigger: "item", + triggerOn: "mousemove" + }, + series: [ + { + name: props.echartsConfig.type, + type: props.echartsConfig.type, + left: `${props?.left}%`, + right: `${props?.right}%`, + bottom: `${props?.bottom}%`, + top: `${props?.top}%`, + symbol: "circle", // Define the shape of the nodes (e.g., 'circle', 'rect', etc.) + symbolSize: props?.pointSize || 20, // Control the size of the nodes + data: props?.echartsData.length !== 0 && props?.echartsData || props.echartsOption.data, + label: { + position: "top", + verticalAlign: "middle", + align: "right", + ...styleWrapper(props?.detailStyle, theme?.detailStyle, 11), + }, + leaves: { + label: { + position: "bottom", + verticalAlign: "middle", + align: "left" + } }, - "leaves": { - "label": { - "position": "bottom", - "verticalAlign": "middle", - "align": "left" + itemStyle: { + ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle), + color: props.echartsData.pointColor || props.echartsOption.pointColor, + }, + lineStyle: { + width: props?.lineWidth || 2, // Control the line thickness + color: props.echartsData.lineColor || props.echartsOption.lineColor, + ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle) + } } - } + ] } - ] -} - return props.echartsOption ? opt : {}; + return props.echartsData || props.echartsOption ? opt : {}; } diff --git a/client/packages/lowcoder-comps/src/comps/treeChartComp/treechartComp.tsx b/client/packages/lowcoder-comps/src/comps/treeChartComp/treechartComp.tsx index e0b375bec..53fd9c8bb 100644 --- a/client/packages/lowcoder-comps/src/comps/treeChartComp/treechartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/treeChartComp/treechartComp.tsx @@ -141,13 +141,14 @@ TreeChartTmpComp = withViewFn(TreeChartTmpComp, (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)) diff --git a/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartComp.tsx b/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartComp.tsx index 648ba9f58..c67ea8875 100644 --- a/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartComp.tsx @@ -141,13 +141,14 @@ TreemapChartTmpComp = withViewFn(TreemapChartTmpComp, (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)) diff --git a/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartConstants.tsx index 92697cb79..e65ee490a 100644 --- a/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartConstants.tsx @@ -16,7 +16,10 @@ import { uiChildren, clickEvent, styleControl, - EchartsStyle + RadarLabelStyle, + EchartDefaultChartStyle, + EchartDefaultTextStyle, + toArray } from "lowcoder-sdk"; import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core"; import { BarChartConfig } from "../chartComp/chartConfigs/barChartConfig"; @@ -31,6 +34,8 @@ import { SeriesListComp } from "../chartComp/seriesComp"; import { EChartsOption } from "echarts"; import { i18nObjs, trans } from "i18n/comps"; import { TreemapChartConfig } from "comps/chartComp/chartConfigs/treemapChartConfig"; +import {EchartsTitleVerticalConfig} from "../chartComp/chartConfigs/echartsTitleVerticalConfig"; +import {EchartsTitleConfig} from "../chartComp/chartConfigs/echartsTitleConfig"; export const ChartTypeOptions = [ { @@ -248,19 +253,31 @@ export const chartUiModeChildren = { }; let chartJsonModeChildren: any = { + echartsData: jsonControl(toArray), echartsOption: jsonControl(toObject, i18nObjs.defaultTreemapChartOption), echartsTitle: withDefault(StringControl, trans("treemapChart.defaultTitle")), echartsLegendConfig: EchartsLegendConfig, echartsLabelConfig: EchartsLabelConfig, echartsConfig: EchartsOptionComp, - // style: styleControl(EchartsStyle, 'style'), + + echartsTitleVerticalConfig: EchartsTitleVerticalConfig, + echartsTitleConfig:EchartsTitleConfig, + + left:withDefault(NumberControl,trans('treemapChart.defaultLeft')), + right:withDefault(NumberControl,trans('treemapChart.defaultRight')), + top:withDefault(NumberControl,trans('treemapChart.defaultTop')), + bottom:withDefault(NumberControl,trans('treemapChart.defaultBottom')), + tooltip: withDefault(BoolControl, true), - legendVisibility: withDefault(BoolControl, true), + labelVisibility: withDefault(BoolControl, true), } -if (EchartsStyle) { + +if (RadarLabelStyle && EchartDefaultChartStyle && EchartDefaultTextStyle) { chartJsonModeChildren = { ...chartJsonModeChildren, - style: styleControl(EchartsStyle, 'style'), + chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'), + titleStyle: styleControl(EchartDefaultTextStyle, 'titleStyle'), + detailStyle: styleControl(RadarLabelStyle, 'detailStyle'), } } diff --git a/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartPropertyView.tsx index a4fc43e02..2632f4349 100644 --- a/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartPropertyView.tsx @@ -16,31 +16,51 @@ export function treeChartPropertyView( const jsonModePropertyView = ( <>
- {children.echartsOption.propertyView({ - label: trans("chart.echartsOptionLabel"), - styleName: "higher", - tooltip: ( - - ), - })} - {children.echartsTitle.propertyView({ label: trans("treemapChart.title") })} - {children.tooltip.propertyView({label: trans("treemapChart.tooltip")})} + {children.echartsData.propertyView({ label: trans("chart.data") })} + + {children.echartsTitleConfig.getPropertyView()} + {children.echartsTitleVerticalConfig.getPropertyView()} + {children.echartsTitle.propertyView({ label: trans("treeChart.title"), tooltip: trans("echarts.titleTooltip") })} + + {children.left.propertyView({ label: trans("treemapChart.left"), tooltip: trans("echarts.leftTooltip") })} + {children.right.propertyView({ label: trans("treemapChart.right"), tooltip: trans("echarts.rightTooltip") })} + {children.top.propertyView({ label: trans("treemapChart.top"), tooltip: trans("echarts.topTooltip") })} + {children.bottom.propertyView({ label: trans("treemapChart.bottom"), tooltip: trans("echarts.bottomTooltip") })} + + {children.tooltip.propertyView({label: trans("treemapChart.tooltip"), tooltip: trans("echarts.tooltipTooltip") })} + {children.labelVisibility.propertyView({label: trans("echarts.labelVisibility"), tooltip: trans("echarts.labelVisibilityTooltip") })}
{children.onEvent.propertyView()}
-
- {children.style?.getPropertyView()} + +
+ {children.chartStyle?.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/treemapChartComp/treemapChartUtils.ts b/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartUtils.ts index a323e2803..f07d91852 100644 --- a/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartUtils.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,32 +137,46 @@ 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": [], - "tooltip": props.tooltip&&{ - "trigger": "item", - "formatter": "{b}: {c}", - "axisPointer": { - "type": "shadow" - }, - }, - "series": [ - { - "name": props.echartsConfig.type, - "type": props.echartsConfig.type, - 'data': props.echartsOption.data, - "breadcrumb": { - "show": true - } - } - ] + 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"), + color: [], + tooltip: props.tooltip&&{ + trigger: "item", + formatter: "{b}: {c}", + axisPointer: { + type: "shadow" + }, + }, + series: [ + { + name: props.echartsConfig.type, + type: props.echartsConfig.type, + left: `${props?.left}%`, + right: `${props?.right}%`, + bottom: `${props?.bottom}%`, + top: `${props?.top}%`, + data: props?.echartsData.length !== 0 && props?.echartsData || props.echartsOption.data, + breadcrumb: { + show: true + }, + color: props.echartsData.color || props.echartsOption.color, + itemStyle: { + ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle) + }, + label: { + ...styleWrapper(props?.detailStyle, theme?.detailStyle, 12), + } + } + ] } - return props.echartsOption ? opt : {}; + return props.echartsData || props.echartsOption ? opt : {}; } diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts index d3520c738..bd9d406e1 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts @@ -10,50 +10,150 @@ export const en = { title: 'Title', defaultTitle: 'Themeriver Chart', tooltip: 'Tooltip', + left: 'Left', + defaultLeft:'15', + right: 'Right', + defaultRight:'10', + top: 'Top', + defaultTop:'15', + bottom: 'Bottom', + defaultBottom:'20', + splitNumber: 'Split Number', + defaultSplitNumber: '4' }, sunburstChart: { sunburstType: 'Sunburst Chart Type', title: 'Title', defaultTitle: 'Sunburst Chart', tooltip: 'Tooltip', + defaultRadiusInline: "20", + defaultRadiusOutline: "80", + defaultPosition_X: "50", + defaultPosition_Y: "50", + radiusInline: "Inline Radius", + radiusOutline: "Outline Radius", + position_x: "Position-X", + position_Y: "Position-Y", + radiusInlineTooltip: "Set the Inline radius value of the Chart.", + radiusOutlineTooltip: "Set the Outline radius value of the Chart.", + labelVisibility: "Label" }, treemapChart: { treemapType: 'Treemap Chart Type', title: 'Title', defaultTitle: 'Treemap Chart', tooltip: 'Tooltip', + defaultLeft: "10", + left: "Left", + defaultRight: "10", + right: "Right", + defaultTop: "20", + top: "Top", + defaultBottom: "20", + bottom: "Bottom", }, treeChart: { treeType: 'Tree Chart Type', title: 'Title', defaultTitle: 'Tree Chart', tooltip: 'Tooltip', + defaultLeft: "10", + left: "Left", + defaultRight: "10", + right: "Right", + defaultTop: "20", + top: "Top", + defaultBottom: "20", + bottom: "Bottom", + defaultPointSize: "10", + pointSize: "Point Size", + pointSizeTooltip: "Set the Point Size of the Chart.", + defaultlineWidth: '2', + lineWidth: "Line Width", + lineWidthTooltip: "Set the Line Width of the Chart." }, graphChart: { graphType: 'Graph Chart Type', title: 'Title', defaultTitle: 'Graph Chart', tooltip: 'Tooltip', + arrowSize: "Arrow Size", + pointSize: "Point Size", + repulsion: "Repulsion", + gravity: "Gravity", + lineLength: "Line Length", + curveness: "Curveness", + lineWidth: "Line Width", + arrowFlag: "Arrow", + arrowSizeTooltip: "Set the Arrow Size of the Chart.", + pointSizeTooltip: "Set the Point Size of the Chart.", + repulsionTooltip: "Set the Repulsion of the Chart.", + gravityTooltip: "Set the Gravity of the Chart.", + lineLengthTooltip: "Set the Line length of the Chart.", + lineWidthTooltip: "Set the Line width of the Chart.", + arrowFlagTooltip: "Show or hide the Arrow of the Chart.", + tooltipTooltip: "Show or hide the Tooltip of the Chart.", + curvenessTooltip: "Set the Curveness of the Chart.", + defaultArrowSize: "10", + defaultPointSize: "15", + defaultRepulsion: "100", + defaultGravity: "0.1", + defaultLineLength: "100", + defaultLineWidth: "2", + defaultCurveness: "0", + }, heatmapChart: { heatmapType: 'Heatmap Chart Type', title: 'Title', + left: 'Left', + defaultLeft:'15', + right: 'Right', + defaultRight:'10', + top: 'Top', + defaultTop:'15', + bottom: 'Bottom', + defaultBottom:'30', defaultTitle: 'Heatmap Chart', tooltip: 'Tooltip', + min: 'Min', + defaultMin:'0', + max: 'Max', + defaultMax:'100', + xAxisVisibility: 'X-Axis', + yAxisVisibility: 'Y-Axis', + labelVisibility: "Label", + xAxisVisibilityTooltip: 'Divide the area Horizontally.', + yAxisVisibilityTooltip: 'Divide the area Vertically.' }, radarChart: { radarType: 'Radar Chart Type', title: 'Title', defaultTitle: 'Radar Chart', + radius: 'Radius', + defaultRadius: '60', + defaultStartAngle: '90', + startAngle: 'Start Angle', + defaultSplitNumber: '5', + position_x: 'Position-X', + defaultPosition_X: '50', + position_y: 'Position-Y', + defaultPosition_Y: '50', + splitNumber: 'Split Number', tooltip: 'Tooltip', + areaFlag: 'Area Flag', + areaFlagTooltip: "Divide the area into a Line or a Circle.", + indicatorVisibility: "Indicator", + indicatorVisibilityTooltip: "Show or hide the Indicator of the Chart.", }, candleStickChart: { candleStickType: 'CandleStick Chart Type', title: 'Title', defaultTitle: 'CandleStick Chart', tooltip: 'Tooltip', - legendVisibility: 'Legend Visibility', - dataZoomVisibility: 'Data Zoom Visibility', + legendVisibility: 'Legend', + dataZoomVisibility: 'Data Zoom', + axisFlagVisibility: 'Axis', left: 'Left', defaultLeft:'10', right: 'Right', @@ -65,13 +165,42 @@ export const en = { defaultDataZoomBottom: '20', dataZoomBottom: 'Data Zoom Bottom', defaultDataZoomHeight: '15', - dataZoomHeight: 'Data Zoom Height' + dataZoomHeight: 'Data Zoom Height', + axisFlagVisibilityTooltip: "Divide the area Vertically/horizontally.", + dataZoomVisibilityTooltip: "Show or hide the DataZoom of the Chart.", + dataZoomHeightTooltip: "Select the Height length of DataZoom.", + dataZoomBottomTooltip: "Select the Bottom length of DataZoom." + }, sankeyChart: { sankeyType: 'Sankey Chart Type', title: 'Title', defaultTitle: 'Sankey Chart', tooltip: 'Tooltip', + curveness: "Curveness", + defaultCurveness: "0.5", + curvenessTooltip: "Select the Curveness of the Chart.", + opacity: "Opacity", + defaultOpacity: "0.5", + opacityTooltip: "Set the opacity of the Chart.", + nodeWidth: "Node Width", + defaultNodeWidth: "20", + nodeWidthTooltip: "Change the width of the Node", + nodeGap: "Node Gap", + defaultNodeGap: "10", + nodeGapTooltip: "Set the gap value between the Lines.", + draggable: "Draggable", + draggableTooltip: "Set whether the node is draggable or not.", + focus: "Focus", + focusTooltip: "Set whether to enable or disable adjacency when an item is focused.", + left: 'Left', + defaultLeft:'15', + right: 'Right', + defaultRight:'10', + top: 'Top', + defaultTop:'15', + bottom: 'Bottom', + defaultBottom:'10', }, funnelChart: { title: 'Title', @@ -125,6 +254,7 @@ export const en = { splitNumber: 'Split Number', radius: 'Radius', defaultRadius: '80', + defaultTemperatureRadius: '60', defaultPointerLength: '50', pointerLength: 'Pointer Length', pointerWidth: 'Pointer Width', @@ -136,11 +266,46 @@ export const en = { defaultPosition_Y: '60', progressBarWidth: 'Progress Bar Width', defaultProgressBarWidth: '10', + defaultStageProgressBarWidth: '15', + defaultTemperatureProgressBarWidth: '35', + defaultRingProgressBarWidth: '20', progressBar: 'Progress Bar', - roundCap: "Round Cap" + roundCap: "Round Cap", + chartType: "Chart Type", + chartTypeTooltip: "Select the types of Charts.", + defaultPointer_Y: "0", + gradeDefaultPointerIcon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z", + clockDefaultPointerIcon: "path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z", + defaultBarometerPointerIcon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z', + defaultMultiTitlePointerIcon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z', + pointer_Y: "Pointer-Y", + pointer_Y_Tooltip: "Select the Y-value of the pointer.", + pointerIcon: "Pointer Icon", + pointerIconTooltip: "Select the Pointer Icon", + defaultGradeGaugePointerLength: "25", + defaultGradeGaugePointerWidth: "10", + defaultGradeGaugePointer_Y: "45", + defaultAxisLabelDistance: "10", + defaultTemperatureAxisLabelDistance: "30", + axisLabelDistance: "Axis Label Distance", + progressBarColor: "Progress Bar Color", + gradeProgressBarString: "Progress Bar String", + defaultAxisTickLength: "7", + defaultAxisTickWidth: "2", + defaultAxisTickColor: "#444444", + defaultStageAxisTickColor: "#ffffff", + axisTickLength: "axisTick Length", + axisTickWidth: "axisTick Width", + axisTickWidthStage: "axisTick Width", + axisTickColor: "AxisTick Color", + defaultBarometerPointerWidth: "3", + defaultBarometerPointerLength: "125", + defaultBarometerPointer_Y: "-10" + }, echarts: { - defaultTitle: "Data Display", + legendVisibility: 'Legend', + defaultTitle: "Chart", legendPosition: "Legend-Y", legendOrient: "Legend Orient", legendAlign: "Legend-X", @@ -149,7 +314,9 @@ export const en = { titlePositionVertical: "Title-Y", funnelAlign: "Funnel Align", sort: "Sort", + tooltip: "Tooltip", changingTitle_x_Tooltip: "Change the Horizontal position of the Title.", + changingTitle_y_Tooltip: "Change the Vertical position of the Title.", changingLegend_x_Tooltip: "Change the Vertical position of the Legend.", changingLegend_y_Tooltip: "Change the Horizontal position of the Legend.", changingLegend_orient_Tooltip: "Change the Orientation of the Legend.", @@ -159,6 +326,8 @@ export const en = { positionChart_x_Tooltip: "Change the Horizontal position of the Chart.", positionChart_y_Tooltip: "Change the Vertical position of the Chart.", topTooltip: "Change the top length of the Chart.", + rightTooltip: "Change the right length of the Chart.", + leftTooltip: "Change the left length of the Chart.", bottomTooltip: "Change the bottom length of the Chart.", widthTooltip: "Change the width of the Chart.", radiusTooltip: "Set the Radius value of the Chart.", @@ -182,6 +351,12 @@ export const en = { legendVisibilityTooltip: "Show or hide the Legend of the Chart.", progressBarVisibilityTooltip: "Show or hide the Progress Bar of the Chart.", roundCapVisibilityTooltip: "Show or hide the Round Cap of the Chart.", + axisTickLengthTooltip: "Select the Length of Axis Tick", + axisTickWidthTooltip: "Select the Width of Axis Tick", + axisTickColorTooltip: "Select the Color of Axis Tick", + axisLabelDistanceTooltip: "Select the Distance between the Axis labels and the Split line", + tooltipTooltip: "Show or hide the Tooltip of the Chart.", + labelVisibility: "Label", }, chart: { delete: "Delete", @@ -269,6 +444,23 @@ export const en = { centerPositionChange: "Center Position Change", centerPositionChangeDesc: "Triggers when the map center position changes", chartEventHandlers: "Chart Event Handlers", + stageGauge: "Stage Speed Gauge", + gradeGauge: "Grade Gauge", + temperatureGauge: "Temperature Gauge chart", + multiGauge: "Multi Title Gauge", + ringGauge: "Ring Gauge", + barometerGauge: "Gauge Barometer chart", + clockGauge: "Clock", + default: "Default", + left: 'Left', + defaultLeft:'10', + right: 'Right', + defaultRight:'10', + top: 'Top', + defaultTop:'20', + bottom: 'Bottom', + defaultBottom:'20', + defaultDataZoomBottom: '20', }, imageEditor: { defaultSrc: "", @@ -424,7 +616,10 @@ export const en = { animationDelay:"Delay", animationDuration:"Duration", animationIterationCount:"IterationCount", - showVerticalScrollbar:"Show Vertical ScrollBar" + showVerticalScrollbar:"Show Vertical ScrollBar", + showResourceEventsInFreeView:"Show Resource Events In Free View", + inputFormat: "Input Format", + reference: "Please Refer to", }, }; diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx b/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx index 2e1b9b874..408e50bf5 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx @@ -173,97 +173,217 @@ export const enObj: I18nObjects = { }, defaultGaugeChartOption: { data: [ - { value: 60, name: "Completed",color:'#fc8452' } + { value: 60, name: "Completed",color:'#fc8452', formatter: "{value} %" } + ] + }, + defaultStageGaugeChartOption: { + data: [ + { + value: 80, + formatter: "{value} Km/h", + color: [ + [0.3, '#67e0e3'], + [0.7, '#37a2da'], + [1, '#fd666d'] + ] + } + ] + }, + defaultGradeGaugeChartOption: { + data: [ + { + value: 80, + name: "Grade Rating", + formatter: "{value} %", + color: [ + [0.25, '#FF6E76'], + [0.5, '#FDDD60'], + [0.75, '#58D9F9'], + [1, '#7CFFB2'] + ] + } + ] + }, + defaultTemperatureGaugeChartOption: { + data: [ + {value: 20, color: "#fc8452", borderColor: "#cd7c1d", formatter: "{value} °C" } + ] + }, + defaultMultiTitleGaugeChartOption: { + data: [ + { + formatter: "{value}%", + value: [ + {color: "#19b1e6", title: "Perfect", value: 20, titlePosition: ['-60%', '60%'], valuePosition: ['-60%', '80%']}, + {color: "#fac858", title: "Good", value: 40, titlePosition: ['0%', '60%'], valuePosition: ['0%', '80%']}, + {color: "#09f64d", title: "Commonly", value: 60, titlePosition: ['60%', '60%'], valuePosition: ['60%', '80%']}, + ] + } + ] + }, + defaultRingGaugeChartOption: { + data: [ + { + formatter: "{value}%", + value: [ + {color: "#19b1e6", title: "Perfect", value: 20, titlePosition: ['0%', '-40%'], valuePosition: ['0%', '-20%']}, + {color: "#fac858", title: "Good", value: 40, titlePosition: ['0%', '0%'], valuePosition: ['0%', '20%']}, + {color: "#09f64d", title: "Commonly", value: 60, titlePosition: ['0%', '40%'], valuePosition: ['0%', '60%']}, + ] + } + ] + }, + defaultBarometerGaugeChartOption: { + data: [ + { + formatter: "{value}%", + value: 58.46, + name: "PLP", + outline: { + color: "#c80707", + period: [0,100], + splitNumber: 10, + progressBarWidth: 2, + axisTickLength: 6, + axisTickWidth: 2, + radius: "70%", + }, + inline: { + color: "#000000", + period: [0,60], + progressBarWidth: 2, + splitNumber: 6, + axisTickLength: 6, + axisTickWidth: 2, + radius: "60%" + }, + } + ] + }, + defaultClockGaugeChartOption: { + data: [ + { + outlineColor: "#aa2a2a", + anchor:{ + color: "#cfae09", + size: 10, + }, + hour: { + color: "#cfae09", + width: 4, + length: 50, + value: 4 + }, + minute: { + color: "#cfae09", + width: 2.5, + length: 65, + value: 30 + }, + second: { + color: "#cfae09", + width: 1, + length: 90, + value: 45, + + } + }, ] }, defaultSankeyChartOption: { data: [ - {name: "Show"}, - {name: "Click"}, - {name: "Visit"}, - {name: "Query"}, - {name: "Buy"} + {name: "Category A", color: '#67F9D8'}, + {name: "Category B", color: '#FFE434'}, + {name: "Category C", color: '#56A3F1'}, + {name: "Category D", color: '#FF917C'}, + {name: "Category E", color: '#FF6347'} ], links: [ - {source: "Show", target: "Click", value: 80}, - {source: "Click", target: "Visit", value: 60}, - {source: "Visit", target: "Query", value: 40}, - {source: "Query", target: "Buy", value: 20} + { source: 'Category A', target: 'Category B', value: 10 }, + { source: 'Category A', target: 'Category C', value: 15 }, + { source: 'Category B', target: 'Category D', value: 25 }, + { source: 'Category C', target: 'Category D', value: 20 }, + { source: 'Category D', target: 'Category E', value: 30 } ] }, defaultCandleStickChartOption: { xAxis: { - data: ["Day 1", "Day 2", "Day 3", "Day 4", "Day 5"] - }, + data: ["Day 1", "Day 2", "Day 3", "Day 4", "Day 5"], + }, + axisColor: ['#f0f0f0', '#ffffff'], data:[ - [100, 200, 50, 150], - [120, 220, 80, 180], - [80, 150, 60, 130], - [130, 230, 110, 190], - [90, 180, 70, 160] - ] + [22, 25, 18, 26], + [25, 23, 22, 27], + [23, 24, 21, 25], + [24, 26, 23, 27], + [23, 21, 20, 25] + ], + itemStyle: { + color: '#ec0000', // Body color (rising) + color0: '#00da3c', // Body color (falling) + borderColor: '#ec0000', // Border color (rising) + borderColor0: '#00da3c', // Border color (falling) + } }, defaultRadarChartOption: { + color: ['#6ee1d5', '#a7dd85'], indicator: [ - { name: "Indicator 1", max: 100 }, - { name: "Indicator 2", max: 100 }, - { name: "Indicator 3", max: 100 }, - { name: "Indicator 4", max: 100 }, - { name: "Indicator 5", max: 100 } + { name: "Indicator 1", max: 100 }, + { name: "Indicator 2", max: 100 }, + { name: "Indicator 3", max: 100 }, + { name: "Indicator 4", max: 100 }, + { name: "Indicator 5", max: 100 }, + { name: "Indicator 6", max: 100 } ], series: [ - { - "name": "Data 1", - "data": [ - { - "value": [90, 80, 70, 60, 50], - "name": "Data 1" - } - ] + { + "name": "Data A", + "value": [90, 80, 70, 70, 80, 70], }, { - "name": "Data 2", - "data": [ - { - "value": [70, 60, 50, 40, 30], - "name": "Data 2" - } - ] - } + name: "Data B", + value: [60, 60, 40, 50, 50, 40], + areaColor: '#ff00ff77', + lineColor: '#ff00ff77', + lineWidth: 2, + pointSize: 8, + pointColor: "#ff00ff77", + } ] }, defaultHeatmapChartOption: { - xAxis: { - "data": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"] - }, - yAxis: { - "data": ["Morning", "Afternoon", "Evening"] - }, - data: [ - [0, 0, 10], - [0, 1, 20], - [0, 2, 30], - [1, 0, 40], - [1, 1, 50], - [1, 2, 60], - [2, 0, 70], - [2, 1, 80], - [2, 2, 90], - [3, 0, 100], - [3, 1, 90], - [3, 2, 80], - [4, 0, 70], - [4, 1, 60], - [4, 2, 50], - [5, 0, 40], - [5, 1, 30], - [5, 2, 20], - [6, 0, 10], - [6, 1, 0], - [6, 2, 10] - ] + xAxis: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"], + yAxis: ["Morning", "Afternoon", "Evening"], + color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8'], + data: [ + [0, 0, 10], + [0, 1, 20], + [0, 2, 30], + [1, 0, 40], + [1, 1, 50], + [1, 2, 60], + [2, 0, 70], + [2, 1, 80], + [2, 2, 90], + [3, 0, 100], + [3, 1, 90], + [3, 2, 80], + [4, 0, 70], + [4, 1, 60], + [4, 2, 50], + [5, 0, 40], + [5, 1, 30], + [5, 2, 20], + [6, 0, 10], + [6, 1, 0], + [6, 2, 10] + ] }, defaultGraphChartOption: { + color:{ + pointColor: "#0000ff", + lineColor: "#00000033" + }, categories: [ {name: "Nodes"}, {name: "Edges"} @@ -297,41 +417,45 @@ export const enObj: I18nObjects = { ] } ] - }] + }], + pointColor: "#380e81", + lineColor: "#1a93b8", }, defaultTreemapChartOption: { data: [ - { - name: 'nodeA', - value: 10, - children: [ - { - name: 'nodeAa', - value: 4, - }, - { - name: 'nodeAb', - value: 6 - } - ] - }, - { - name: 'nodeB', - value: 20, - children: [ - { - name: 'nodeBa', - value: 20, - children: [ - { - name: 'nodeBa1', - value: 20 - } - ] - } - ] - } - ] + { + name: 'Category A', + value: 100, + children: [ + { + name: 'Subcategory A1', + value: 70, + children: [ + { name: 'Item A1-1', value: 10 }, + { name: 'Item A1-2', value: 20 }, + { name: 'Item A1-3', value: 10 }, + { name: 'Item A1-4', value: 30 } + ] + } + ] + }, + { + name: 'Category B', + value: 80, + children: [ + { + name: 'Subcategory B1', + value: 50, + children: [ + { name: 'Item B1-1', value: 20 }, + { name: 'Item B1-2', value: 15 }, + { name: 'Item B1-3', value: 15 } + ] + }, + ] + } + ], + color: ['#5470C6', '#91CC75', '#FAC858', '#6b51a1'] }, defaultSunburstChartOption: { data: [ @@ -354,6 +478,28 @@ export const enObj: I18nObjects = { } ] } + ], + levels: [ + { + itemStyle: { + color: '#f6e58d' + }, + }, + { + itemStyle: { + color: '#12e192' + }, + }, + { + itemStyle: { + color: '#ffbe76' + }, + }, + { + itemStyle: { + color: '#007979' + }, + } ] }, defaultCalendarChartOption: { @@ -373,27 +519,28 @@ export const enObj: I18nObjects = { }, defaultThemeriverChartOption: { data: [ - ["2024-01-01", 10, "Category A"], - ["2024-01-02", 15, "Category A"], - ["2024-01-03", 20, "Category A"], - ["2024-01-04", 25, "Category A"], - ["2024-01-05", 30, "Category A"], - ["2024-01-06", 35, "Category A"], - ["2024-01-07", 40, "Category A"], - ["2024-01-08", 45, "Category A"], - ["2024-01-09", 50, "Category A"], - ["2024-01-10", 55, "Category A"], - ["2024-01-01", 15, "Category B"], - ["2024-01-02", 20, "Category B"], - ["2024-01-03", 25, "Category B"], - ["2024-01-04", 30, "Category B"], - ["2024-01-05", 35, "Category B"], - ["2024-01-06", 40, "Category B"], - ["2024-01-07", 45, "Category B"], - ["2024-01-08", 50, "Category B"], - ["2024-01-09", 55, "Category B"], - ["2024-01-10", 60, "Category B"] - ] + ['2025-01-01', 12, 'Product A'], + ['2025-01-01', 10, 'Product B'], + ['2025-01-01', 15, 'Product C'], + ['2025-01-01', 8, 'Product D'], + ['2025-01-02', 14, 'Product A'], + ['2025-01-02', 9, 'Product B'], + ['2025-01-02', 16, 'Product C'], + ['2025-01-02', 7, 'Product D'], + ['2025-01-03', 16, 'Product A'], + ['2025-01-03', 12, 'Product B'], + ['2025-01-03', 18, 'Product C'], + ['2025-01-03', 10, 'Product D'], + ['2025-01-04', 20, 'Product A'], + ['2025-01-04', 15, 'Product B'], + ['2025-01-04', 22, 'Product C'], + ['2025-01-04', 12, 'Product D'], + ['2025-01-05', 18, 'Product A'], + ['2025-01-05', 13, 'Product B'], + ['2025-01-05', 20, 'Product C'], + ['2025-01-05', 11, 'Product D'] + ], + color: ['#5470C6', '#91CC75', '#FAC858', '#6b51a1'] }, defaultMapJsonOption: defaultMapData, diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/types.tsx b/client/packages/lowcoder-comps/src/i18n/comps/locales/types.tsx index 4f227e3bc..674e7fc8a 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/types.tsx +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/types.tsx @@ -5,6 +5,13 @@ export type I18nObjects = { defaultDataSource: JSONObject[]; defaultEchartsJsonOption: Record; defaultGaugeChartOption: Record; + defaultStageGaugeChartOption: Record; + defaultGradeGaugeChartOption: Record; + defaultTemperatureGaugeChartOption: Record; + defaultMultiTitleGaugeChartOption: Record; + defaultRingGaugeChartOption: Record; + defaultBarometerGaugeChartOption: Record; + defaultClockGaugeChartOption: Record; defaultFunnelChartOption: Record; defaultSankeyChartOption: Record; defaultCandleStickChartOption: Record; diff --git a/client/packages/lowcoder-comps/src/util/isColorString.ts b/client/packages/lowcoder-comps/src/util/isColorString.ts new file mode 100644 index 000000000..cf1b60c2b --- /dev/null +++ b/client/packages/lowcoder-comps/src/util/isColorString.ts @@ -0,0 +1,5 @@ +export default function isColorString(color: string) { + const element = document.createElement("isColorString"); + element.style.backgroundColor = color; + return element.style.backgroundColor !== ''; +} \ No newline at end of file diff --git a/client/packages/lowcoder-comps/src/util/styleWrapper.tsx b/client/packages/lowcoder-comps/src/util/styleWrapper.tsx new file mode 100644 index 000000000..b8648df29 --- /dev/null +++ b/client/packages/lowcoder-comps/src/util/styleWrapper.tsx @@ -0,0 +1,36 @@ +export const styleWrapper = (styleContainer: any, themeContainer: any, defaultFontSize=18, defaultFontColor='#000000', detailBorderWidth = 0, defaultBackgroundColor = "" ) => { + + return { + "fontFamily": styleContainer?.chartFontFamily || themeContainer?.fontFamily || 'Arial, sans-serif', + "fontSize": styleContainer?.chartTextSize || themeContainer?.fontSize || defaultFontSize, + "fontWeight": styleContainer?.chartTextWeight || themeContainer?.fontWeight, + "color": styleContainer?.chartTextColor || themeContainer?.fontColor || defaultFontColor, + "fontStyle": styleContainer?.chartFontStyle || themeContainer?.fontStyle, + "textShadowColor": styleContainer?.chartShadowColor || themeContainer?.shadowColor, + "textShadowBlur": styleContainer?.chartBoxShadow?.split('px')[0] || themeContainer?.boxShadow && themeContainer?.boxShadow?.split('px')[0], + "textShadowOffsetX": styleContainer?.chartBoxShadow?.split('px')[1] || themeContainer?.boxShadow && themeContainer?.boxShadow?.split('px')[1], + "textShadowOffsetY": styleContainer?.chartBoxShadow?.split('px')[2] || themeContainer?.boxShadow && themeContainer?.boxShadow?.split('px')[2], + "borderColor": styleContainer?.chartBorderColor || themeContainer?.borderColor || 'inherit', + "borderWidth": styleContainer?.chartBorderWidth || themeContainer?.borderWidth || detailBorderWidth, + "borderType": styleContainer?.chartBorderStyle || themeContainer?.borderType, + "borderRadius": Number(styleContainer?.chartBorderRadius || themeContainer?.borderRadius), + "backgroundColor": styleContainer?.chartBackgroundColor || themeContainer?.backgroundColor || defaultBackgroundColor, + "width": styleContainer?.detailSize?.split('px')[0] || themeContainer?.detailSize && themeContainer?.detailSize.split('px')[0], + "height": styleContainer?.detailSize?.split('px')[1] || themeContainer?.detailSize && themeContainer?.detailSize.split('px')[1], + "padding": styleContainer?.padding?.split('px').filter(Boolean).map(Number) || themeContainer?.padding && themeContainer?.padding?.split('px').filter(Boolean).map(Number) || [0,0,0,0] + } +} + +export const chartStyleWrapper = (styleContainer: any, themeContainer: any, detailBorderWidth = 0) => { + + return { + "shadowColor": styleContainer?.chartShadowColor || themeContainer?.shadowColor, + "shadowBlur": styleContainer?.chartBoxShadow?.split('px')[0] || themeContainer?.boxShadow && themeContainer?.boxShadow?.split('px')[0], + "shadowOffsetX": styleContainer?.chartBoxShadow?.split('px')[1] || themeContainer?.boxShadow && themeContainer?.boxShadow?.split('px')[1], + "shadowOffsetY": styleContainer?.chartBoxShadow?.split('px')[2] || themeContainer?.boxShadow && themeContainer?.boxShadow?.split('px')[2], + "borderColor": styleContainer?.chartBorderColor || themeContainer?.borderColor || 'inherit', + "borderWidth": styleContainer?.chartBorderWidth || themeContainer?.borderWidth || detailBorderWidth, + "borderType": styleContainer?.chartBorderStyle || themeContainer?.borderType, + "borderRadius": Number(styleContainer?.chartBorderRadius || themeContainer?.borderRadius), + } +} \ No newline at end of file diff --git a/client/packages/lowcoder-design/src/components/Section.tsx b/client/packages/lowcoder-design/src/components/Section.tsx index a476395d2..1c654f637 100644 --- a/client/packages/lowcoder-design/src/components/Section.tsx +++ b/client/packages/lowcoder-design/src/components/Section.tsx @@ -188,8 +188,13 @@ export const sectionNames = { columnStyle:trans("prop.columnStyle"), modalStyle:trans("prop.modalStyle"), chartStyle:trans("prop.chartStyle"), + lineStyle:trans("prop.lineStyle"), titleStyle:trans("prop.titleStyle"), legendStyle:trans("prop.legendStyle"), detailStyle:trans("prop.detailStyle"), axisLabelStyle:trans("prop.axisLabelStyle"), + axisLabelStyleOutline:trans("prop.axisLabelStyleOutline"), + xAxisStyle:trans("prop.xAxisStyle"), + yAxisStyle:trans("prop.yAxisStyle"), + visualMapStyle:trans("prop.visualMapStyle") }; diff --git a/client/packages/lowcoder-design/src/i18n/design/locales/en.ts b/client/packages/lowcoder-design/src/i18n/design/locales/en.ts index c3f38d07d..530df70cd 100644 --- a/client/packages/lowcoder-design/src/i18n/design/locales/en.ts +++ b/client/packages/lowcoder-design/src/i18n/design/locales/en.ts @@ -41,10 +41,15 @@ export const en = { columnStyle: 'Column Style', modalStyle: 'Modal Style', chartStyle: "Chart Style", + lineStyle: "Line Style", titleStyle: "Title Style", legendStyle: "Legend Style", detailStyle: "Detail Style", - axisLabelStyle: "Axis Label Style" + axisLabelStyle: "Axis Label Style", + axisLabelStyleOutline: "Outline Axis Label Style", + xAxisStyle: "X-Axis Style", + yAxisStyle: "Y-Axis Style", + visualMapStyle: "Visual Map Style" }, passwordInput: { label: "Password:", diff --git a/client/packages/lowcoder-sdk/package.json b/client/packages/lowcoder-sdk/package.json index df47ee10d..e863737f0 100644 --- a/client/packages/lowcoder-sdk/package.json +++ b/client/packages/lowcoder-sdk/package.json @@ -1,6 +1,6 @@ { "name": "lowcoder-sdk", - "version": "2.5.3", + "version": "2.6.0", "type": "module", "files": [ "src", diff --git a/client/packages/lowcoder/package.json b/client/packages/lowcoder/package.json index 0a873a5e2..cfde4991e 100644 --- a/client/packages/lowcoder/package.json +++ b/client/packages/lowcoder/package.json @@ -1,6 +1,6 @@ { "name": "lowcoder", - "version": "2.5.3", + "version": "2.6.0", "private": true, "type": "module", "main": "src/index.sdk.ts", @@ -36,6 +36,7 @@ "@types/react-signature-canvas": "^1.0.2", "@types/react-test-renderer": "^18.0.0", "@types/react-virtualized": "^9.21.21", + "alasql": "^4.6.2", "animate.css": "^4.1.1", "antd": "^5.20.0", "axios": "^1.7.7", diff --git a/client/packages/lowcoder/src/api/commonSettingApi.ts b/client/packages/lowcoder/src/api/commonSettingApi.ts index 22ae54229..b2f746454 100644 --- a/client/packages/lowcoder/src/api/commonSettingApi.ts +++ b/client/packages/lowcoder/src/api/commonSettingApi.ts @@ -24,6 +24,7 @@ export interface CommonSettingResponseData { export type SetCommonSettingPayload = { orgId: string; + isPublicApp?: boolean; data: { key: string; value: T; @@ -78,6 +79,7 @@ export interface ThemeDetail { components?: Record; showComponentLoadingIndicators?: boolean; showDataLoadingIndicators?: boolean; + dataLoadingIndicator?: string; } export function getThemeDetailName(key: keyof ThemeDetail) { diff --git a/client/packages/lowcoder/src/app.tsx b/client/packages/lowcoder/src/app.tsx index 9cd381969..5c7776cba 100644 --- a/client/packages/lowcoder/src/app.tsx +++ b/client/packages/lowcoder/src/app.tsx @@ -29,6 +29,7 @@ import { ORG_AUTH_FORGOT_PASSWORD_URL, ORG_AUTH_RESET_PASSWORD_URL, ADMIN_AUTH_URL, + PUBLIC_APP_EDITOR_URL, } from "constants/routesURL"; import React from "react"; import { createRoot } from "react-dom/client"; @@ -65,6 +66,7 @@ const LazyInviteLanding = React.lazy(() => import("pages/common/inviteLanding")) const LazyComponentDoc = React.lazy(() => import("pages/ComponentDoc")); const LazyComponentPlayground = React.lazy(() => import("pages/ComponentPlayground")); const LazyAppEditor = React.lazy(() => import("pages/editor/AppEditor")); +const LazyPublicAppEditor = React.lazy(() => import("pages/editor/AppEditorPublic")); const LazyAppFromTemplate = React.lazy(() => import("pages/ApplicationV2/AppFromTemplate")); const LazyApplicationHome = React.lazy(() => import("pages/ApplicationV2")); const LazyDebugComp = React.lazy(() => import("./debug")); @@ -301,6 +303,14 @@ class AppIndex extends React.Component { path={IMPORT_APP_FROM_TEMPLATE_URL} component={LazyAppFromTemplate} /> + + + (undefined); const [installError, setInstallError] = useState(undefined); + const isPublicApp = useSelector(isPublicApplication); const dispatch = useDispatch(); const recommends = useSelector(recommendJSLibrarySelector); useEffect(() => { + if (isPublicApp) return; + dispatch(fetchJSLibraryRecommendsAction()); }, [dispatch]); diff --git a/client/packages/lowcoder/src/components/ModuleLoading.tsx b/client/packages/lowcoder/src/components/ModuleLoading.tsx index 5d3901c8d..37312bc5a 100644 --- a/client/packages/lowcoder/src/components/ModuleLoading.tsx +++ b/client/packages/lowcoder/src/components/ModuleLoading.tsx @@ -1,3 +1,4 @@ +import LoadingOutlined from "@ant-design/icons/LoadingOutlined"; import { default as Spin } from "antd/es/spin"; import { GreyTextColor } from "constants/style"; import styled from "styled-components"; @@ -14,7 +15,7 @@ export const LoadingPlaceholder = styled.div` export function ModuleLoading() { return ( - + } /> ); } diff --git a/client/packages/lowcoder/src/components/ResCreatePanel.tsx b/client/packages/lowcoder/src/components/ResCreatePanel.tsx index 388927948..1225b99c7 100644 --- a/client/packages/lowcoder/src/components/ResCreatePanel.tsx +++ b/client/packages/lowcoder/src/components/ResCreatePanel.tsx @@ -15,8 +15,6 @@ import type { PageType } from "../constants/pageConstants"; import type { SizeType } from "antd/es/config-provider/SizeContext"; import { Datasource } from "constants/datasourceConstants"; import { - LOWCODER_API_ID, - LOWCODER_API_INFO, QUICK_GRAPHQL_ID, QUICK_REST_API_ID, } from "../constants/datasourceConstants"; @@ -26,6 +24,7 @@ import { useSelector } from "react-redux"; import { getUser } from "../redux/selectors/usersSelectors"; import DataSourceIcon from "./DataSourceIcon"; import { genRandomKey } from "comps/utils/idGenerator"; +import { isPublicApplication } from "@lowcoder-ee/redux/selectors/applicationSelector"; const Wrapper = styled.div<{ $placement: PageType }>` width: 100%; @@ -170,21 +169,19 @@ const ResButton = (props: { compType: "streamApi", }, }, - graphql: { - label: trans("query.quickGraphql"), + alasql: { + label: trans("query.quickAlasql"), type: BottomResTypeEnum.Query, extra: { - compType: "graphql", - dataSourceId: QUICK_GRAPHQL_ID, + compType: "alasql", }, }, - lowcoderApi: { - icon: LOWCODER_API_INFO.icon, - label: LOWCODER_API_INFO.name, + graphql: { + label: trans("query.quickGraphql"), type: BottomResTypeEnum.Query, extra: { - compType: "lowcoderApi", - dataSourceId: LOWCODER_API_ID, + compType: "graphql", + dataSourceId: QUICK_GRAPHQL_ID, }, }, }; @@ -232,6 +229,7 @@ export function ResCreatePanel(props: ResCreateModalProps) { const [isScrolling, setScrolling] = useState(false); const [visible, setVisible] = useState(false); + const isPublicApp = useSelector(isPublicApplication); const user = useSelector(getUser); const { width, ref } = useResizeDetector({ handleHeight: false }); @@ -289,7 +287,7 @@ export function ResCreatePanel(props: ResCreateModalProps) { onSelect={onSelect} /> - + {!isPublicApp && } + - {placement === "editor" && ( - - )} - {datasource.map((i) => ( ))} - {user.orgDev && ( + {(user.orgDev || isPublicApp) && ( setVisible(true)}> @@ -351,7 +346,7 @@ export function ResCreatePanel(props: ResCreateModalProps) { setVisible(false)} onCreated={() => setVisible(false)} /> diff --git a/client/packages/lowcoder/src/components/ThemeSettingsCompStyles.tsx b/client/packages/lowcoder/src/components/ThemeSettingsCompStyles.tsx index 2b90440d5..76e592d30 100644 --- a/client/packages/lowcoder/src/components/ThemeSettingsCompStyles.tsx +++ b/client/packages/lowcoder/src/components/ThemeSettingsCompStyles.tsx @@ -103,6 +103,7 @@ const isColorStyle = (styleKey: string) => { styleKey !== 'containerFooterPadding' && styleKey !== 'containerBodyPadding' && styleKey !== 'direction' && + styleKey !== 'detailSize' && styleKey !== 'chartOpacity' && styleKey !== 'chartBoxShadow' && styleKey !== 'chartBorderStyle' && @@ -309,6 +310,10 @@ export default function ThemeSettingsCompStyles(props: CompStyleProps) { placeholder = '0 0 1 1'; break; } + case 'detailSize': { + placeholder = '24px 12px'; + break; + } case 'chartOpacity': { placeholder = '1'; break; @@ -475,6 +480,10 @@ export default function ThemeSettingsCompStyles(props: CompStyleProps) { icon = ; break; } + case 'detailSize': { + icon = ; + break; + } case 'chartOpacity': { icon = ; break; diff --git a/client/packages/lowcoder/src/components/ThemeSettingsSelector.tsx b/client/packages/lowcoder/src/components/ThemeSettingsSelector.tsx index 50f13ffdc..f2004d43a 100644 --- a/client/packages/lowcoder/src/components/ThemeSettingsSelector.tsx +++ b/client/packages/lowcoder/src/components/ThemeSettingsSelector.tsx @@ -4,7 +4,7 @@ import { ConfigItem, Radius, Margin, Padding, GridColumns, BorderWidth, BorderSt import { isValidColor, isValidGradient, toHex } from "components/colorSelect/colorUtils"; import { ColorSelect } from "components/colorSelect"; import { TacoInput } from "components/tacoInput"; -import { Slider, Switch } from "antd"; +import { Segmented, Slider, Switch } from "antd"; import { ExpandIcon, CompressIcon, @@ -28,6 +28,7 @@ export type configChangeParams = { components?: Record, showComponentLoadingIndicators?: boolean; showDataLoadingIndicators?: boolean; + dataLoadingIndicator?: string; gridColumns?: string; gridRowHeight?: string; gridRowCount?: number; @@ -58,6 +59,7 @@ type ColorConfigProps = { padding?: string; showComponentLoadingIndicators?: boolean; showDataLoadingIndicators?: boolean; + dataLoadingIndicator?: string; gridColumns?: string; gridRowHeight?: string; gridRowCount?: number; @@ -87,6 +89,7 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) { fontFamily: defaultFontFamily, showComponentLoadingIndicators: defaultShowComponentLoaders, showDataLoadingIndicators: defaultShowDataLoaders, + dataLoadingIndicator: defaultDataLoadingIndicator, gridColumns: defaultGridColumns, gridRowHeight: defaultGridRowHeight, gridRowCount: defaultGridRowCount, @@ -110,6 +113,7 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) { const [fontFamily, setFontFamily] = useState(defaultFontFamily); const [showComponentLoaders, setComponentLoaders] = useState(defaultShowComponentLoaders); const [showDataLoaders, setDataLoaders] = useState(defaultShowDataLoaders); + const [dataLoadingIndicator, setDataLoadingIndicator] = useState(defaultDataLoadingIndicator); const [gridColumns, setGridColumns] = useState(defaultGridColumns); const [gridRowHeight, setGridRowHeight] = useState(defaultGridRowHeight); const [gridRowCount, setGridRowCount] = useState(defaultGridRowCount); @@ -346,6 +350,10 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) { setDataLoaders(defaultShowDataLoaders); }, [defaultShowDataLoaders]); + useEffect(() => { + setDataLoadingIndicator(defaultDataLoadingIndicator); + }, [defaultDataLoadingIndicator]); + useEffect(() => { setGridPaddingX(defaultGridPaddingX); }, [defaultGridPaddingX]); @@ -375,6 +383,7 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) { themeSettingKey !== "fontFamily" && themeSettingKey !== "showComponentLoadingIndicators" && themeSettingKey !== "showDataLoadingIndicators" && + themeSettingKey !== "dataLoadingIndicator" && themeSettingKey !== "gridColumns" && themeSettingKey !== "gridRowHeight" && themeSettingKey !== "gridRowCount" && @@ -551,6 +560,25 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) { )} + {themeSettingKey === "dataLoadingIndicator" && ( +
+ { + setDataLoadingIndicator(value) + configChange({ themeSettingKey, dataLoadingIndicator: value}); + }} + /> +
+ )} + {themeSettingKey === "gridColumns" && (
diff --git a/client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx b/client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx index a2b54ddc8..7749f262f 100644 --- a/client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx @@ -25,6 +25,7 @@ import type { AppState } from "@lowcoder-ee/redux/reducers"; import { ColorControl } from "../controls/colorControl"; import { DEFAULT_ROW_COUNT } from "@lowcoder-ee/layout/calculateUtils"; import { AppSettingContext } from "../utils/appSettingContext"; +import { isPublicApplication } from "@lowcoder-ee/redux/selectors/applicationSelector"; const TITLE = trans("appSetting.title"); const USER_DEFINE = "__USER_DEFINE"; @@ -337,6 +338,7 @@ function AppGeneralSettingsModal(props: ChildrenInstance) { } function AppCanvasSettingsModal(props: ChildrenInstance) { + const isPublicApp = useSelector(isPublicApplication); const { themeList, defaultTheme, @@ -415,13 +417,15 @@ function AppCanvasSettingsModal(props: ChildrenInstance) { placement="bottom" itemNode={(value) => } preNode={() => ( - <> - window.open(THEME_SETTING)}> - - {trans("appSetting.themeCreate")} - - - + isPublicApp ? <> : ( + <> + window.open(THEME_SETTING)}> + + {trans("appSetting.themeCreate")} + + + + ) )} allowClear onChange={(value) => { diff --git a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx index 4ab79a2ea..54a269812 100644 --- a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx @@ -1,9 +1,11 @@ -import React, { useContext, useEffect, useState } from "react"; +import { ReactNode, useEffect, useState } from "react"; import { Input, Section, sectionNames } from "lowcoder-design"; import { BoolControl } from "comps/controls/boolControl"; import { styleControl } from "comps/controls/styleControl"; import { AnimationStyle, + ChildrenMultiSelectStyle, + ChildrenMultiSelectStyleType, InputFieldStyle, InputLikeStyle, InputLikeStyleType, @@ -16,7 +18,7 @@ import { withExposingConfigs, } from "comps/generators/withExposing"; import styled, { css } from "styled-components"; -import { UICompBuilder, withDefault } from "../../generators"; +import { UICompBuilder } from "../../generators"; import { FormDataPropertyView } from "../formComp/formDataConstants"; import { jsonControl } from "comps/controls/codeControl"; import { dropdownControl } from "comps/controls/dropdownControl"; @@ -37,7 +39,6 @@ import { trans } from "i18n"; import { IconControl } from "comps/controls/iconControl"; import { hasIcon } from "comps/utils"; import { InputRef } from "antd/es/input"; -import { default as ConfigProvider } from "antd/es/config-provider"; import { default as AutoComplete } from "antd/es/auto-complete"; import { RefControl } from "comps/controls/refControl"; import { @@ -55,6 +56,7 @@ import { autocompleteIconColor, componentSize, } from "./autoCompleteConstants"; +import { DropdownStyled } from "../selectInputComp/selectCompConstants"; const InputStyle = styled(Input) <{ $style: InputLikeStyleType }>` box-shadow: ${props=>`${props.$style?.boxShadow} ${props.$style?.boxShadowColor}`}; @@ -69,13 +71,10 @@ box-shadow: ${props=>`${props.$style?.boxShadow} ${props.$style?.boxShadowColor} `} `; - const childrenMap = { ...textInputChildren, viewRef: RefControl, allowClear: BoolControl.DEFAULT_TRUE, - style: styleControl(InputFieldStyle , 'style'), - labelStyle: styleControl(LabelStyle , 'labelStyle'), prefixIcon: IconControl, suffixIcon: IconControl, items: jsonControl(convertAutoCompleteData, autoCompleteDate), @@ -88,7 +87,10 @@ const childrenMap = { autocompleteIconColor: dropdownControl(autocompleteIconColor, "blue"), componentSize: dropdownControl(componentSize, "small"), valueInItems: booleanExposingStateControl("valueInItems"), + style: styleControl(InputFieldStyle , 'style'), + labelStyle: styleControl(LabelStyle , 'labelStyle'), inputFieldStyle: styleControl(InputLikeStyle , 'inputFieldStyle'), + childrenInputFieldStyle: styleControl(ChildrenMultiSelectStyle, 'childrenInputFieldStyle'), animationStyle: styleControl(AnimationStyle , 'animationStyle'), }; @@ -155,59 +157,85 @@ let AutoCompleteCompBase = (function () { required: props.required, children: ( <> - { + props.valueInItems.onChange(false); + setvalidateState(textInputValidate(getTextInputValidate())); + setsearchtext(value); + props.value.onChange(value); + props.onEvent("change") + }} + onFocus={() => { + setActivationFlag(true) + props.onEvent("focus") }} - > - { - props.valueInItems.onChange(false); - setvalidateState(textInputValidate(getTextInputValidate())); - setsearchtext(value); - props.value.onChange(value); - props.onEvent("change") - }} - onFocus={() => { - setActivationFlag(true) - props.onEvent("focus") - }} - onBlur={() => props.onEvent("blur")} - onSelect={(data: string, option) => { - setsearchtext(option[valueOrLabel]); - props.valueInItems.onChange(true); - props.value.onChange(option[valueOrLabel]); - props.onEvent("submit"); - }} - filterOption={(inputValue: string, option) => { + onBlur={() => props.onEvent("blur")} + onSelect={(data: string, option) => { + setsearchtext(option[valueOrLabel]); + props.valueInItems.onChange(true); + props.value.onChange(option[valueOrLabel]); + props.onEvent("submit"); + }} + filterOption={(inputValue: string, option) => { + if (ignoreCase) { + if ( + option?.label && + option?.label + .toUpperCase() + .indexOf(inputValue.toUpperCase()) !== -1 + ) + return true; + } else { + if (option?.label && option?.label.indexOf(inputValue) !== -1) + return true; + } + if ( + chineseEnv && + searchFirstPY && + option?.label && + option.label + .spell("first") + .toString() + .toLowerCase() + .indexOf(inputValue.toLowerCase()) >= 0 + ) + return true; + if ( + chineseEnv && + searchCompletePY && + option?.label && + option.label + .spell() + .toString() + .toLowerCase() + .indexOf(inputValue.toLowerCase()) >= 0 + ) + return true; + if (!searchLabelOnly) { if (ignoreCase) { if ( - option?.label && - option?.label + option?.value && + option?.value .toUpperCase() .indexOf(inputValue.toUpperCase()) !== -1 ) return true; } else { - if (option?.label && option?.label.indexOf(inputValue) !== -1) + if ( + option?.value && + option?.value.indexOf(inputValue) !== -1 + ) return true; } if ( chineseEnv && searchFirstPY && - option?.label && - option.label + option?.value && + option.value .spell("first") .toString() .toLowerCase() @@ -217,73 +245,40 @@ let AutoCompleteCompBase = (function () { if ( chineseEnv && searchCompletePY && - option?.label && - option.label + option?.value && + option.value .spell() .toString() .toLowerCase() .indexOf(inputValue.toLowerCase()) >= 0 ) return true; - if (!searchLabelOnly) { - if (ignoreCase) { - if ( - option?.value && - option?.value - .toUpperCase() - .indexOf(inputValue.toUpperCase()) !== -1 - ) - return true; - } else { - if ( - option?.value && - option?.value.indexOf(inputValue) !== -1 - ) - return true; - } - if ( - chineseEnv && - searchFirstPY && - option?.value && - option.value - .spell("first") - .toString() - .toLowerCase() - .indexOf(inputValue.toLowerCase()) >= 0 - ) - return true; - if ( - chineseEnv && - searchCompletePY && - option?.value && - option.value - .spell() - .toString() - .toLowerCase() - .indexOf(inputValue.toLowerCase()) >= 0 - ) - return true; - } - return false; - }} - > - - - + } + return false; + }} + dropdownRender={(originNode: ReactNode) => ( + + {originNode} + + )} + > + + ), style: props.style, labelStyle: props.labelStyle, - inputFieldStyle:props.inputFieldStyle, + inputFieldStyle: props.inputFieldStyle, + childrenInputFieldStyle: props.childrenInputFieldStyle, animationStyle: props.animationStyle, showValidationWhenEmpty: props.showValidationWhenEmpty, ...validateState, @@ -350,6 +345,9 @@ let AutoCompleteCompBase = (function () {
{children.inputFieldStyle.getPropertyView()}
+
+ {children.childrenInputFieldStyle.getPropertyView()} +
}
{children.onEvent.getPropertyView()} + {showDataLoadingIndicatorsPropertyView(children)}
{hiddenPropertyView(children)} diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx index e4b276567..7a54ba428 100644 --- a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx +++ b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx @@ -11,12 +11,12 @@ export function getButtonStyle(buttonStyle: ButtonStyleType) { const hoverColor = buttonStyle.background && genHoverColor(buttonStyle.background); const activeColor = buttonStyle.background && genActiveColor(buttonStyle.background); return css` - &&& { + & { border-radius: ${buttonStyle.radius}; border-width:${buttonStyle.borderWidth}; margin: ${buttonStyle.margin}; padding: ${buttonStyle.padding}; - rotate: ${buttonStyle.rotation&&buttonStyle.rotation}; + rotate: ${buttonStyle.rotation}; &:not(:disabled) { --antd-wave-shadow-color: ${buttonStyle.border}; border-color: ${buttonStyle.border}; diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx index a27c4ab83..a734d7e45 100644 --- a/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx @@ -22,18 +22,18 @@ import { getButtonStyle, } from "./buttonCompConstants"; import { styleControl } from "@lowcoder-ee/comps/controls/styleControl"; +import { dropdownControl } from "@lowcoder-ee/comps/controls/dropdownControl"; const StyledDropdownButton = styled(DropdownButton)` width: 100%; .ant-btn-group { width: 100%; - } `; const LeftButtonWrapper = styled.div<{ $buttonStyle: DropdownStyleType }>` - width: calc(100%); + flex: 1; ${(props) => `margin: ${props.$buttonStyle.margin};`} margin-right: 0; .ant-btn span { @@ -42,12 +42,11 @@ const LeftButtonWrapper = styled.div<{ $buttonStyle: DropdownStyleType }>` } .ant-btn { - ${(props) => getButtonStyle(props.$buttonStyle)} + ${(props) => getButtonStyle(props.$buttonStyle as any)} margin: 0 !important; height: 100%; &.ant-btn-default { margin: 0 !important; - ${(props) => `border-radius: ${props.$buttonStyle.radius} 0 0 ${props.$buttonStyle.radius};`} ${(props) => `text-transform: ${props.$buttonStyle.textTransform};`} ${(props) => `font-weight: ${props.$buttonStyle.textWeight};`} @@ -65,11 +64,11 @@ const LeftButtonWrapper = styled.div<{ $buttonStyle: DropdownStyleType }>` `; const RightButtonWrapper = styled.div<{ $buttonStyle: DropdownStyleType }>` - // width: 32px; + width: 32px; ${(props) => `margin: ${props.$buttonStyle.margin};`} margin-left: -1px; .ant-btn { - ${(props) => getButtonStyle(props.$buttonStyle)} + ${(props) => getButtonStyle(props.$buttonStyle as any)} margin: 0 !important; height: 100%; &.ant-btn-default { @@ -80,10 +79,16 @@ const RightButtonWrapper = styled.div<{ $buttonStyle: DropdownStyleType }>` } `; +const triggerOptions = [ + { label: "Hover", value: "hover" }, + { label: "Click", value: "click" }, +] as const; + const DropdownTmpComp = (function () { const childrenMap = { text: withDefault(StringControl, trans("menu")), onlyMenu: BoolControl, + triggerMode: dropdownControl(triggerOptions, "hover"), options: DropdownOptionControl, disabled: BoolCodeControl, onEvent: ButtonEventHandlerControl, @@ -121,8 +126,9 @@ const DropdownTmpComp = (function () { menu} + trigger={[props.triggerMode]} > - + {props.text || " " /* Avoid button disappearing */} @@ -130,6 +136,7 @@ const DropdownTmpComp = (function () { menu} + trigger={[props.triggerMode]} onClick={() => props.onEvent("click")} buttonsRender={([left, right]) => [ @@ -170,6 +177,10 @@ const DropdownTmpComp = (function () { <>
{children.text.propertyView({ label: trans("label") })} + {children.triggerMode.propertyView({ + label: trans("dropdown.triggerMode"), + radioButton: true, + })} {children.onlyMenu.propertyView({ label: trans("dropdown.onlyMenu") })}
{children.style.getPropertyView()}
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx index e0fdf7b4b..43cb5959a 100644 --- a/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx @@ -14,6 +14,7 @@ import { hiddenPropertyView, disabledPropertyView, loadingPropertyView, + showDataLoadingIndicatorsPropertyView, } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import { IconControl } from "comps/controls/iconControl"; @@ -129,6 +130,7 @@ const LinkTmpComp = (function () { {disabledPropertyView(children)} {hiddenPropertyView(children)} {loadingPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children)}
{children.prefixIcon.propertyView({ label: trans("button.prefixIcon") })} diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx index 3fa93e028..74f9f8a55 100644 --- a/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx @@ -16,7 +16,7 @@ import { UICompBuilder } from "comps/generators/uiCompBuilder"; import { CustomModal, Section, sectionNames } from "lowcoder-design"; import styled from "styled-components"; import { CommonNameConfig, NameConfig, withExposingConfigs } from "../../generators/withExposing"; -import { hiddenPropertyView, disabledPropertyView } from "comps/utils/propertyUtils"; +import { hiddenPropertyView, disabledPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import React, { Suspense, useEffect, useRef, useState, useContext } from "react"; import { arrayStringExposingStateControl } from "comps/controls/codeStateControl"; @@ -223,6 +223,7 @@ const ScannerTmpComp = (function () { {children.onEvent.getPropertyView()} {disabledPropertyView(children)} {hiddenPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children)}
{children.continuous.propertyView({ label: trans("scanner.continuous") })} diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx index 5586c3bde..f78fee7bb 100644 --- a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx @@ -5,6 +5,7 @@ import { disabledPropertyView, hiddenPropertyView, loadingPropertyView, + showDataLoadingIndicatorsPropertyView, } from "comps/utils/propertyUtils"; import { Section, sectionNames } from "lowcoder-design"; import { trans } from "i18n"; @@ -109,6 +110,7 @@ const ToggleTmpComp = (function () { {disabledPropertyView(children)} {hiddenPropertyView(children)} {loadingPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children)}
{children.showText.propertyView({ label: trans("toggleButton.showText") })} diff --git a/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx b/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx index 9a14ba22d..4fb21b69f 100644 --- a/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx @@ -12,7 +12,7 @@ import { UICompBuilder, withDefault } from "../../generators"; // Right-side attribute subframe import { Section, sectionNames } from "lowcoder-design"; // Switch indicating whether the component is hidden or not -import { hiddenPropertyView } from "comps/utils/propertyUtils"; +import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils"; // Right property switch import { BoolControl } from "comps/controls/boolControl"; import { styleControl } from "comps/controls/styleControl"; //样式输入框 @@ -406,6 +406,7 @@ let CommentBasicComp = (function () { {children.deleteAble.propertyView({ label: trans("comment.deleteAble"), })} + {showDataLoadingIndicatorsPropertyView(children)}
)} diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx index f9a14575f..c7e1201bc 100644 --- a/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx @@ -5,7 +5,7 @@ import { TriContainer } from "../triContainerComp/triContainer"; import { ContainerCompBuilder, } from "../triContainerComp/triContainerCompBuilder"; -import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils"; +import { disabledPropertyView, hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import { BoolCodeControl, StringControl } from "comps/controls/codeControl"; import { BoolControl } from "comps/controls/boolControl"; @@ -318,8 +318,9 @@ export const ContainerBaseComp = (function () {
- {hiddenPropertyView(children)} {children.onEvent.getPropertyView()} + {hiddenPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children)}
)} diff --git a/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx b/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx index b33d74ae6..d91a6170b 100644 --- a/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx @@ -9,7 +9,7 @@ import { useEffect, useRef, useContext } from "react"; import styled from "styled-components"; import { getPromiseAfterDispatch } from "util/promiseUtils"; import { EventData, EventTypeEnum } from "./types"; -import { hiddenPropertyView } from "comps/utils/propertyUtils"; +import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import { EditorContext } from "comps/editorState"; import { AnimationStyle, AnimationStyleType, CustomStyle, CustomStyleType } from "@lowcoder-ee/comps/controls/styleControlConstants"; @@ -244,6 +244,7 @@ const CustomCompBase = new UICompBuilder(childrenMap, (props, dispatch) => { {children.model.propertyView({ label: trans("customComp.data") })} {children.code.propertyView({ label: trans("customComp.code"), language: "html" })} {hiddenPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children)}
{children.style.getPropertyView()} diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx index 686153fd2..fd2add150 100644 --- a/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx @@ -20,7 +20,7 @@ import { UICompBuilder, withDefault } from "../../generators"; import { CommonNameConfig, depsConfig, withExposingConfigs } from "../../generators/withExposing"; import { formDataChildren, FormDataPropertyView } from "../formComp/formDataConstants"; import { styleControl } from "comps/controls/styleControl"; -import { AnimationStyle, DateTimeStyle, DateTimeStyleType, InputFieldStyle, LabelStyle } from "comps/controls/styleControlConstants"; +import { AnimationStyle, ChildrenMultiSelectStyle, ChildrenMultiSelectStyleType, DateTimeStyle, DateTimeStyleType, InputFieldStyle, LabelStyle } from "comps/controls/styleControlConstants"; import { withMethodExposing } from "../../generators/withMethodExposing"; import { disabledPropertyView, @@ -34,6 +34,7 @@ import { minuteStepPropertyView, requiredPropertyView, SecondStepPropertyView, + showDataLoadingIndicatorsPropertyView, } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import { DATE_FORMAT, DATE_TIME_FORMAT, DateParser, PickerMode } from "util/dateTimeUtils"; @@ -56,6 +57,13 @@ import { fixOldInputCompData } from "../textInputComp/textInputConstants"; const EventOptions = [changeEvent, focusEvent, blurEvent] as const; +const PickerModeOptions = [ + { label: "Date", value: "date" }, + { label: "Week", value: "week" }, + { label: "Month", value: "month" }, + { label: "Quarter", value: "quarter" }, + { label: "Year", value: "year" }, +] const validationChildren = { showValidationWhenEmpty: BoolControl, @@ -70,6 +78,7 @@ const commonChildren = { label: LabelControl, placeholder: withDefault(StringControl, trans("date.placeholder")), format: StringControl, + inputFormat: withDefault(StringControl, DATE_FORMAT), disabled: BoolCodeControl, onEvent: eventHandlerControl(EventOptions), showTime: BoolControl, @@ -87,12 +96,14 @@ const commonChildren = { ...validationChildren, viewRef: RefControl, inputFieldStyle: styleControl(DateTimeStyle, 'inputFieldStyle'), + childrenInputFieldStyle: styleControl(ChildrenMultiSelectStyle, 'childrenInputFieldStyle'), timeZone: dropdownControl(timeZoneOptions, Intl.DateTimeFormat().resolvedOptions().timeZone), + pickerMode: dropdownControl(PickerModeOptions, 'date'), }; type CommonChildrenType = RecordConstructorToComp; const datePickerProps = (props: RecordConstructorToView) => - _.pick(props, "format", "showTime", "use12Hours", "hourStep", "minuteStep", "secondStep", "placeholder"); + _.pick(props, "format", "inputFormat", "showTime", "use12Hours", "hourStep", "minuteStep", "secondStep", "placeholder", "pickerMode"); const timeFields = (children: CommonChildrenType, isMobile?: boolean) => [ children.showTime.propertyView({ label: trans("date.showTime") }), @@ -154,6 +165,7 @@ export type DateCompViewProps = Pick< RecordConstructorToView, | "disabled" | "format" + | "inputFormat" | "minDate" | "maxDate" | "suffixIcon" @@ -164,15 +176,52 @@ export type DateCompViewProps = Pick< | "secondStep" | "viewRef" | "timeZone" + | "pickerMode" > & { onFocus: () => void; onBlur: () => void; $style: DateTimeStyleType; + $childrenInputFieldStyle: ChildrenMultiSelectStyleType; disabledTime: () => ReturnType; suffixIcon: ReactNode; placeholder?: string | [string, string]; }; +const getFormattedDate = ( + time: dayjs.Dayjs | null | undefined, + showTime: boolean, + pickerMode: string, +) => { + let updatedTime = undefined; + if (time?.isValid()) { + switch(pickerMode) { + case 'week': { + updatedTime = dayjs(time).day(0); + break; + } + case 'month': { + updatedTime = dayjs(time).set('date', 1); + break; + } + case 'quarter': { + updatedTime = dayjs(time).set('date', 1); + break; + } + case 'year': { + updatedTime = dayjs(time).set('date', 1).set('month', 1); + break; + } + default: { + updatedTime = time; + break; + } + } + } + return updatedTime + ? updatedTime.format(showTime ? DATE_TIME_FORMAT : DATE_FORMAT) + : ""; +} + const DatePickerTmpCmp = new UICompBuilder(childrenMap, (props) => { const defaultValue = { ...props.defaultValue }.value; const value = { ...props.value }.value; @@ -211,6 +260,7 @@ const DatePickerTmpCmp = new UICompBuilder(childrenMap, (props) => { viewRef={props.viewRef} disabledTime={() => disabledTime(props.minTime, props.maxTime)} $style={props.inputFieldStyle} + $childrenInputFieldStyle={props.childrenInputFieldStyle} disabled={props.disabled} {...datePickerProps(props)} hourStep={props.hourStep} @@ -220,9 +270,7 @@ const DatePickerTmpCmp = new UICompBuilder(childrenMap, (props) => { value={tempValue?.isValid() ? tempValue : null} onChange={(time) => { handleDateChange( - time && time.isValid() - ? time.format(props.showTime ? DATE_TIME_FORMAT : DATE_FORMAT) - : "", + getFormattedDate(time, props.showTime, props.pickerMode), props.value.onChange, props.onEvent ); @@ -249,9 +297,12 @@ const DatePickerTmpCmp = new UICompBuilder(childrenMap, (props) => { placeholder: "2022-04-07 21:39:59", tooltip: trans("date.formatTip") })} + {children.pickerMode.propertyView({ + label: trans("prop.pickerMode") + })} {children.timeZone.propertyView({ label: trans("prop.timeZone") - })} + })}
@@ -270,6 +321,7 @@ const DatePickerTmpCmp = new UICompBuilder(childrenMap, (props) => { {children.onEvent.getPropertyView()} {disabledPropertyView(children)} {hiddenPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children)}
)} @@ -279,7 +331,7 @@ const DatePickerTmpCmp = new UICompBuilder(childrenMap, (props) => { {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
- {formatPropertyView({ children })} + {formatPropertyView({ children, placeholder: DATE_FORMAT })} {children.placeholder.propertyView({ label: trans("date.placeholderText") })}
)} @@ -303,6 +355,9 @@ const DatePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
{children.inputFieldStyle.getPropertyView()}
+
+ {children.childrenInputFieldStyle.getPropertyView()} +
{children.animationStyle.getPropertyView()}
@@ -396,6 +451,7 @@ let DateRangeTmpCmp = (function () { timeZone={props?.timeZone} viewRef={props.viewRef} $style={props.inputFieldStyle} + $childrenInputFieldStyle={props.childrenInputFieldStyle} disabled={props.disabled} {...datePickerProps(props)} start={tempStartValue?.isValid() ? tempStartValue : null} @@ -406,12 +462,10 @@ let DateRangeTmpCmp = (function () { disabledTime={() => disabledTime(props.minTime, props.maxTime)} onChange={(start, end) => { props.start.onChange( - start && start.isValid() - ? start.format(props.showTime ? DATE_TIME_FORMAT : DATE_FORMAT) - : "" + getFormattedDate(start, props.showTime, props.pickerMode) ); props.end.onChange( - end && end.isValid() ? end.format(props.showTime ? DATE_TIME_FORMAT : DATE_FORMAT) : "" + getFormattedDate(end, props.showTime, props.pickerMode) ); props.onEvent("change"); }} @@ -457,6 +511,9 @@ let DateRangeTmpCmp = (function () { placeholder: "2022-04-07 21:39:59", tooltip: trans("date.formatTip"), })} + {children.pickerMode.propertyView({ + label: trans("prop.pickerMode") + })} {children.timeZone.propertyView({ label: trans("prop.timeZone") })} @@ -478,6 +535,7 @@ let DateRangeTmpCmp = (function () { {children.onEvent.getPropertyView()} {disabledPropertyView(children)} {hiddenPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children)}
)} @@ -510,6 +568,9 @@ let DateRangeTmpCmp = (function () {
{children.inputFieldStyle.getPropertyView()}
+
+ {children.childrenInputFieldStyle.getPropertyView()} +
)} diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateCompUtil.ts b/client/packages/lowcoder/src/comps/comps/dateComp/dateCompUtil.ts index b0b1ef0a0..63a030cda 100644 --- a/client/packages/lowcoder/src/comps/comps/dateComp/dateCompUtil.ts +++ b/client/packages/lowcoder/src/comps/comps/dateComp/dateCompUtil.ts @@ -1,9 +1,9 @@ import dayjs from "dayjs"; import { DateParser, TimeParser } from "util/dateTimeUtils"; import { range } from "lodash"; -import { DateTimeStyleType } from "../../controls/styleControlConstants"; -import { css } from "styled-components"; -import { isDarkColor, lightenColor } from "components/colorSelect/colorUtils"; +import { ChildrenMultiSelectStyleType, DateTimeStyleType } from "../../controls/styleControlConstants"; +import styled, { css } from "styled-components"; +import { fadeColor, isDarkColor, lightenColor } from "components/colorSelect/colorUtils"; // import { CommonPickerMethods } from "antd/es/date-picker/generatePicker/interface"; import { blurMethod, focusMethod } from "comps/utils/methodUtils"; import { refMethods } from "comps/generators/withMethodExposing"; @@ -135,3 +135,45 @@ export const getMobileStyle = (style: DateTimeStyleType) => `; export const dateRefMethods = refMethods([focusMethod, blurMethod]); + +export const StyledPickerPanel = styled.div<{ + $style: ChildrenMultiSelectStyleType +}>` + background: ${props => props.$style?.background}; + border: ${props => props.$style?.border}; + border-style: ${props => props.$style?.borderStyle}; + border-width: ${props => props.$style?.borderWidth}; + border-radius: ${props => props.$style?.radius}; + rotate: ${props => props.$style?.rotation}; + margin: ${props => props.$style?.margin}; + padding: ${props => props.$style?.padding}; + + .ant-picker-content th, .ant-picker-content td.ant-picker-cell { + font-size: ${props => props.$style?.textSize}; + font-style: ${props => props.$style?.fontStyle}; + font-family: ${props => props.$style?.fontFamily}; + font-weight: ${props => props.$style?.textWeight}; + text-transform: ${props => props.$style?.textTransform}; + line-height: ${props => props.$style?.lineHeight}; + color: ${props => props.$style?.text}; + + .ant-picker-cell-inner { + text-decoration: ${props => props.$style?.textDecoration}; + } + } + + .ant-picker-content td.ant-picker-cell:not(.ant-picker-cell-in-view) { + color: ${props => fadeColor(props.$style?.text, 0.5)}; + } + + .ant-picker-content .ant-picker-time-panel-column > li.ant-picker-time-panel-cell .ant-picker-time-panel-cell-inner { + font-size: ${props => props.$style?.textSize}; + font-style: ${props => props.$style?.fontStyle}; + font-family: ${props => props.$style?.fontFamily}; + font-weight: ${props => props.$style?.textWeight}; + text-transform: ${props => props.$style?.textTransform}; + line-height: ${props => props.$style?.lineHeight}; + color: ${props => props.$style?.text}; + text-decoration: ${props => props.$style?.textDecoration}; + } +` diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateRangeUIView.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/dateRangeUIView.tsx index 9b37570d8..a2c7ba56d 100644 --- a/client/packages/lowcoder/src/comps/comps/dateComp/dateRangeUIView.tsx +++ b/client/packages/lowcoder/src/comps/comps/dateComp/dateRangeUIView.tsx @@ -1,11 +1,11 @@ import dayjs from "dayjs"; import type { DateCompViewProps } from "./dateComp"; -import { disabledDate, getStyle } from "comps/comps/dateComp/dateCompUtil"; +import { disabledDate, getStyle, StyledPickerPanel } from "comps/comps/dateComp/dateCompUtil"; import { useUIView } from "../../utils/useUIView"; import { checkIsMobile } from "util/commonUtils"; import React, { useContext } from "react"; import styled from "styled-components"; -import type { DateTimeStyleType } from "../../controls/styleControlConstants"; +import type { ChildrenMultiSelectStyleType, DateTimeStyleType } from "../../controls/styleControlConstants"; import { EditorContext } from "../../editorState"; import { default as DatePicker } from "antd/es/date-picker"; import { hasIcon } from "comps/utils"; @@ -61,8 +61,10 @@ export const DateRangeUIView = (props: DateRangeUIViewProps) => { return useUIView( , disabledDate(current, props.minDate, props.maxDate)} onCalendarChange={(time: any) => { @@ -76,6 +78,13 @@ export const DateRangeUIView = (props: DateRangeUIViewProps) => { hourStep={props.hourStep as any} minuteStep={props.minuteStep as any} secondStep={props.secondStep as any} + panelRender={(panelNode) => ( + + {panelNode} + + )} renderExtraFooter={() => ( props.timeZone === "UserChoice" && ( diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateUIView.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/dateUIView.tsx index bb7e88322..a5bdea97a 100644 --- a/client/packages/lowcoder/src/comps/comps/dateComp/dateUIView.tsx +++ b/client/packages/lowcoder/src/comps/comps/dateComp/dateUIView.tsx @@ -1,11 +1,11 @@ import dayjs from "dayjs"; import type { DateCompViewProps } from "./dateComp"; -import { disabledDate, getStyle } from "comps/comps/dateComp/dateCompUtil"; +import { disabledDate, getStyle, StyledPickerPanel } from "comps/comps/dateComp/dateCompUtil"; import { useUIView } from "../../utils/useUIView"; import { checkIsMobile } from "util/commonUtils"; import React, { useContext } from "react"; import styled from "styled-components"; -import type { DateTimeStyleType } from "../../controls/styleControlConstants"; +import type { ChildrenMultiSelectStyleType, DateTimeStyleType } from "../../controls/styleControlConstants"; import { EditorContext } from "../../editorState"; import { default as DatePicker } from "antd/es/date-picker"; import type { DatePickerProps } from "antd/es/date-picker"; @@ -53,8 +53,9 @@ export const DateUIView = (props: DataUIViewProps) => { return useUIView( , { minuteStep={props.minuteStep as any} secondStep={props.secondStep as any} disabledDate={(current) => disabledDate(current, props.minDate, props.maxDate)} - picker={"date"} + picker={props.pickerMode as any} inputReadOnly={checkIsMobile(editorState?.getAppSettings().maxWidth)} placeholder={placeholder} + panelRender={(panelNode) => ( + + {panelNode} + + )} renderExtraFooter={()=>( props.timeZone === "UserChoice" && ( diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx index 7a578f5a5..10dc2dc90 100644 --- a/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx @@ -25,7 +25,7 @@ import { } from "../../generators/withExposing"; import { formDataChildren, FormDataPropertyView } from "../formComp/formDataConstants"; import { styleControl } from "comps/controls/styleControl"; -import { AnimationStyle, DateTimeStyle, DateTimeStyleType, InputFieldStyle, LabelStyle } from "comps/controls/styleControlConstants"; +import { AnimationStyle, ChildrenMultiSelectStyle, ChildrenMultiSelectStyleType, DateTimeStyle, DateTimeStyleType, InputFieldStyle, LabelStyle } from "comps/controls/styleControlConstants"; import { withMethodExposing } from "../../generators/withMethodExposing"; import { disabledPropertyView, @@ -37,6 +37,7 @@ import { minuteStepPropertyView, requiredPropertyView, SecondStepPropertyView, + showDataLoadingIndicatorsPropertyView, } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import { TIME_FORMAT, TimeParser } from "util/dateTimeUtils"; @@ -72,6 +73,7 @@ const commonChildren = { label: LabelControl, placeholder: withDefault(StringControl, trans("time.placeholder")), format: StringControl, + inputFormat: withDefault(StringControl, TIME_FORMAT), disabled: BoolCodeControl, onEvent: eventHandlerControl(EventOptions), showTime: BoolControl, @@ -86,6 +88,7 @@ const commonChildren = { 'labelStyle', ), inputFieldStyle: styleControl(DateTimeStyle, 'inputFieldStyle'), + childrenInputFieldStyle: styleControl(ChildrenMultiSelectStyle, 'childrenInputFieldStyle'), suffixIcon: withDefault(IconControl, "/icon:regular/clock"), timeZone: dropdownControl(timeZoneOptions, Intl.DateTimeFormat().resolvedOptions().timeZone), viewRef: RefControl, @@ -93,7 +96,7 @@ const commonChildren = { }; const timePickerComps = (props: RecordConstructorToView) => - _.pick(props, "format", "use12Hours", "minuteStep", "secondStep", "placeholder"); + _.pick(props, "format", "inputFormat", "use12Hours", "minuteStep", "secondStep", "placeholder"); /* const commonBasicSection = (children: RecordConstructorToComp) => [ formatPropertyView({ children }), @@ -139,13 +142,14 @@ type secondStepType = TimePickerProps['secondStep']; export type TimeCompViewProps = Pick< RecordConstructorToView, - "disabled" | "use12Hours" | "format" | "viewRef" + "disabled" | "use12Hours" | "format" | "inputFormat" | "viewRef" > & Pick< TimePickerProps, "hourStep" | "minuteStep" | "secondStep" > & { onFocus: () => void; onBlur: () => void; $style: DateTimeStyleType; + $childrenInputFieldStyle: ChildrenMultiSelectStyleType; disabledTime: () => ReturnType; suffixIcon?: ReactNode | false; placeholder?: string | [string, string]; @@ -189,6 +193,7 @@ const TimePickerTmpCmp = new UICompBuilder(childrenMap, (props) => { timeZone={props?.timeZone} viewRef={props.viewRef} $style={props.inputFieldStyle} + $childrenInputFieldStyle={props.childrenInputFieldStyle} disabled={props.disabled} value={tempValue?.isValid() ? tempValue : null} disabledTime={() => disabledTime(props.minTime, props.maxTime)} @@ -206,7 +211,8 @@ const TimePickerTmpCmp = new UICompBuilder(childrenMap, (props) => { }} onFocus={() => props.onEvent("focus")} onBlur={() => props.onEvent("blur")} - suffixIcon={hasIcon(props.suffixIcon) && props.suffixIcon} /> + suffixIcon={hasIcon(props.suffixIcon) && props.suffixIcon} + /> ), showValidationWhenEmpty: props.showValidationWhenEmpty, ...validate(props), @@ -240,13 +246,14 @@ const TimePickerTmpCmp = new UICompBuilder(childrenMap, (props) => { {children.onEvent.getPropertyView()} {disabledPropertyView(children)} {hiddenPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children)}
)} {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && children.label.getPropertyView()} {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
- {children.format.propertyView({ label: trans("time.format") })} + {formatPropertyView({ children, placeholder: TIME_FORMAT })} {children.placeholder.propertyView({ label: trans("time.placeholderText") })}
)} @@ -270,6 +277,9 @@ const TimePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
{children.inputFieldStyle.getPropertyView()}
+
+ {children.childrenInputFieldStyle.getPropertyView()} +
{children.animationStyle.getPropertyView()}
@@ -340,6 +350,7 @@ const TimeRangeTmpCmp = (function () { timeZone={props?.timeZone} viewRef={props.viewRef} $style={props.inputFieldStyle} + $childrenInputFieldStyle={props.childrenInputFieldStyle} disabled={props.disabled} start={tempStartValue?.isValid() ? tempStartValue : null} end={tempEndValue?.isValid() ? tempEndValue : null} @@ -411,13 +422,14 @@ const TimeRangeTmpCmp = (function () { {children.onEvent.getPropertyView()} {disabledPropertyView(children)} {hiddenPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children)}
)} {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && children.label.getPropertyView()} {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
- {children.format.propertyView({ label: trans("time.format") })} + {formatPropertyView({ children, placeholder: TIME_FORMAT })} {children.placeholder.propertyView({ label: trans("time.placeholderText") })}
)} @@ -441,6 +453,9 @@ const TimeRangeTmpCmp = (function () {
{children.inputFieldStyle.getPropertyView()}
+
+ {children.childrenInputFieldStyle.getPropertyView()} +
{children.animationStyle.getPropertyView()}
diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/timeRangeUIView.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/timeRangeUIView.tsx index 1127c42e2..44afcc7b3 100644 --- a/client/packages/lowcoder/src/comps/comps/dateComp/timeRangeUIView.tsx +++ b/client/packages/lowcoder/src/comps/comps/dateComp/timeRangeUIView.tsx @@ -1,10 +1,10 @@ import styled from "styled-components"; import { default as TimePicker } from "antd/es/time-picker"; -import { DateTimeStyleType } from "../../controls/styleControlConstants"; -import { getStyle } from "comps/comps/dateComp/dateCompUtil"; +import { ChildrenMultiSelectStyleType, DateTimeStyleType } from "../../controls/styleControlConstants"; +import { getStyle, StyledPickerPanel } from "comps/comps/dateComp/dateCompUtil"; import { useUIView } from "../../utils/useUIView"; import { checkIsMobile } from "util/commonUtils"; -import React, { useContext } from "react"; +import React, { ReactNode, useContext } from "react"; import type { TimeCompViewProps } from "./timeComp"; import { EditorContext } from "../../editorState"; import dayjs from "dayjs"; @@ -56,16 +56,24 @@ export const TimeRangeUIView = (props: TimeRangeUIViewProps) => { return useUIView( , { props.onChange(time?.[0], time?.[1]); }} + format={props.inputFormat} inputReadOnly={checkIsMobile(editorState?.getAppSettings().maxWidth)} suffixIcon={hasIcon(props.suffixIcon) && props.suffixIcon} placeholder={placeholders} + panelRender={(panelNode: ReactNode) => ( + + {panelNode} + + )} renderExtraFooter={() => ( props.timeZone === "UserChoice" && ( { return useUIView( , ( + + {panelNode} + + )} renderExtraFooter={()=>( - props.timeZone === "UserChoice" && ( - option.value !== 'UserChoice')} // Filter out 'userChoice' - onChange={props?.handleTimeZoneChange} - defaultValue={Intl.DateTimeFormat().resolvedOptions().timeZone} - /> + props.timeZone === "UserChoice" && ( + option.value !== 'UserChoice')} // Filter out 'userChoice' + onChange={props?.handleTimeZoneChange} + defaultValue={Intl.DateTimeFormat().resolvedOptions().timeZone} + /> + ) ) - )} + } /> ); }; diff --git a/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx b/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx index d46f9ad0b..78857be7e 100644 --- a/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx @@ -11,7 +11,7 @@ import { AnimationStyle, AnimationStyleType, FileStyle, FileStyleType, heightCal import { withMethodExposing } from "comps/generators/withMethodExposing"; import { hasIcon } from "comps/utils"; import { getComponentDocUrl } from "comps/utils/compDocUtil"; -import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils"; +import { disabledPropertyView, hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import _ from "lodash"; import mime from "mime"; @@ -644,6 +644,7 @@ let FileTmpComp = new UICompBuilder(childrenMap, (props, dispatch) => { {children.onEvent.getPropertyView()} {disabledPropertyView(children)} {hiddenPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children)}
{children.fileType.propertyView({ diff --git a/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx b/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx index cba4c8aaf..159595231 100644 --- a/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx @@ -8,7 +8,7 @@ import { Section, sectionNames } from "lowcoder-design"; import { StringControl } from "../controls/codeControl"; import { UICompBuilder, withDefault } from "../generators"; import { NameConfig, NameConfigHidden, withExposingConfigs } from "../generators/withExposing"; -import { hiddenPropertyView } from "comps/utils/propertyUtils"; +import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import { useContext } from "react"; import { EditorContext } from "comps/editorState"; @@ -112,6 +112,7 @@ let FileViewerBasicComp = (function () { {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
{hiddenPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children)}
)}
diff --git a/client/packages/lowcoder/src/comps/comps/gridItemComp.tsx b/client/packages/lowcoder/src/comps/comps/gridItemComp.tsx index 44ae164c6..7ef5440cc 100644 --- a/client/packages/lowcoder/src/comps/comps/gridItemComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/gridItemComp.tsx @@ -52,7 +52,10 @@ const TmpComp = withTypeAndChildren< return lazyLoadComp( manifest.compName, manifest.compPath, - ); + undefined, + undefined, + manifest.withoutLoading, + ) } const comp = manifest.withoutLoading ? manifest.comp : withIsLoading(manifest.comp!); return withErrorBoundary(comp!) as ExposingMultiCompConstructor; diff --git a/client/packages/lowcoder/src/comps/comps/iconComp.tsx b/client/packages/lowcoder/src/comps/comps/iconComp.tsx index 990f8531c..f93b0eb2a 100644 --- a/client/packages/lowcoder/src/comps/comps/iconComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/iconComp.tsx @@ -18,7 +18,7 @@ import { withExposingConfigs, } from "comps/generators/withExposing"; import { Section, sectionNames } from "lowcoder-design"; -import { hiddenPropertyView } from "comps/utils/propertyUtils"; +import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import { NumberControl } from "comps/controls/codeControl"; import { IconControl } from "comps/controls/iconControl"; @@ -41,9 +41,9 @@ const Container = styled.div<{ ${(props) => props.$style && css` - height: calc(100% - ${props.$style.margin}); - width: calc(100% - ${props.$style.margin}); - padding: ${props.$style.padding}; + height: calc(100% - ${props.$style.margin ?? '0px'}); + width: calc(100% - ${props.$style.margin ?? '0px'}); + padding: ${props.$style.padding ?? '0px'}; margin: ${props.$style.margin}; border: ${props.$style.borderWidth} solid ${props.$style.border}; border-radius: ${props.$style.radius}; @@ -128,6 +128,7 @@ let IconBasicComp = (function () {
{children.onEvent.getPropertyView()} {hiddenPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children)}
)} diff --git a/client/packages/lowcoder/src/comps/comps/iframeComp.tsx b/client/packages/lowcoder/src/comps/comps/iframeComp.tsx index 889444883..c401653d1 100644 --- a/client/packages/lowcoder/src/comps/comps/iframeComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/iframeComp.tsx @@ -6,7 +6,7 @@ import styled from "styled-components"; import { NameConfig, NameConfigHidden, withExposingConfigs } from "../generators/withExposing"; import { styleControl } from "comps/controls/styleControl"; import { AnimationStyle, AnimationStyleType, IframeStyle, IframeStyleType } from "comps/controls/styleControlConstants"; -import { hiddenPropertyView } from "comps/utils/propertyUtils"; +import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import log from "loglevel"; @@ -81,6 +81,7 @@ let IFrameCompBase = new UICompBuilder( {children.allowMicrophone.propertyView({ label: trans("iframe.allowMicrophone") })} {children.allowCamera.propertyView({ label: trans("iframe.allowCamera") })} {children.allowPopup.propertyView({ label: trans("iframe.allowPopup") })} + {showDataLoadingIndicatorsPropertyView(children)}
)} diff --git a/client/packages/lowcoder/src/comps/comps/imageComp.tsx b/client/packages/lowcoder/src/comps/comps/imageComp.tsx index 9e777fede..d78a21d20 100644 --- a/client/packages/lowcoder/src/comps/comps/imageComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/imageComp.tsx @@ -24,7 +24,7 @@ import { heightCalculator, widthCalculator, } from "comps/controls/styleControlConstants"; -import { hiddenPropertyView } from "comps/utils/propertyUtils"; +import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import { AutoHeightControl } from "comps/controls/autoHeightControl"; import { BoolControl } from "comps/controls/boolControl"; @@ -34,23 +34,58 @@ import { DEFAULT_IMG_URL } from "util/stringUtils"; import { useContext } from "react"; import { EditorContext } from "comps/editorState"; import { StringControl } from "../controls/codeControl"; +import { PositionControl } from "comps/controls/dropdownControl"; -const Container = styled.div<{ $style: ImageStyleType | undefined,$animationStyle:AnimationStyleType }>` +const Container = styled.div<{ + $style: ImageStyleType | undefined, + $animationStyle: AnimationStyleType, + $clipPath: string, + $enableOverflow: boolean, + $overflow: string, + $positionX: string, + $positionY: string, + $aspectRatio: string | undefined, + $placement: string // New property to control image placement +}>` height: 100%; width: 100%; display: flex; - align-items: center; - justify-content: center; - .ant-image, - img { - width: 100%; - height: 100%; - } + align-items: ${(props) => + props.$placement.includes("bottom") + ? "flex-end" + : props.$placement.includes("top") + ? "flex-start" + : "center"}; + justify-content: ${(props) => + props.$placement.includes("right") + ? "flex-end" + : props.$placement.includes("left") + ? "flex-start" + : "center"}; + overflow: ${(props) => (props.$enableOverflow ? props.$overflow : "hidden")}; + .ant-image, img { - object-fit: contain; - pointer-events: auto; - ${props=>props.$animationStyle} + ${(props) => + props.$enableOverflow + ? ` + aspect-ratio: ${props.$aspectRatio}; + width: 100%; + height: 100%; + object-fit: cover; + ` + : ` + width: auto; + height: auto; + max-width: 100%; + max-height: 100%; + object-fit: contain; + `} + + object-position: ${(props) => `${props.$positionX} ${props.$positionY}`}; + ${props => props.$clipPath && `clip-path: ${props.$clipPath};`}; + ${props => props.$style?.opacity !== undefined && `opacity: ${props.$style?.opacity};`}; + ${props => props.$animationStyle}; } ${(props) => props.$style && getStyle(props.$style)} @@ -60,6 +95,7 @@ const getStyle = (style: ImageStyleType) => { return css` img { border: ${(props) => (style.borderWidth ? style.borderWidth : "1px")} solid ${style.border}; + box-shadow: ${props=>`${style?.boxShadow} ${style?.boxShadowColor}`}; border-radius: ${style.radius}; margin: ${style.margin}; padding: ${style.padding}; @@ -107,8 +143,6 @@ const ContainerImg = (props: RecordConstructorToView) => { // on safari const setStyle = (height: string, width: string) => { - // console.log(width, height); - const img = imgRef.current; const imgDiv = img?.getElementsByTagName("div")[0]; const imgCurrent = img?.getElementsByTagName("img")[0]; @@ -123,7 +157,7 @@ const ContainerImg = (props: RecordConstructorToView) => { const onResize = () => { const img = imgRef.current; const container = conRef.current; - if (!img?.clientWidth || !img?.clientHeight || props.autoHeight || !width) { + if (!props.enableOverflow && (!img?.clientWidth || !img?.clientHeight || props.autoHeight || !width)) { return; } // fixme border style bug on safari @@ -136,11 +170,23 @@ const ContainerImg = (props: RecordConstructorToView) => { setStyle("auto", "100%"); } }; + return ( ( - +
{ @@ -190,6 +243,7 @@ let ImageBasicComp = new UICompBuilder(childrenMap, (props) => {
{children.onEvent.getPropertyView()} {hiddenPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children)} {children.supportPreview.propertyView({ label: trans("image.supportPreview"), tooltip: trans("image.supportPreviewTip"), @@ -203,10 +257,52 @@ let ImageBasicComp = new UICompBuilder(childrenMap, (props) => { {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( <>
+ {children.autoHeight.getPropertyView()} + + {children.autoHeight.getView() == false && ( + children.placement.propertyView({ + label: trans("image.placement"), + radioButton: true + }))} + + {children.autoHeight.getView() == false && ( + children.enableOverflow.propertyView({ + label: trans("image.enableOverflow"), + tooltip: trans("image.enableOverflowTip") + }))} + + {children.autoHeight.getView() == false && children.enableOverflow.getView() == true && ( + children.overflow.propertyView({ + label: trans("image.overflow"), + tooltip: trans("image.overflowTip") + }))} + + {children.autoHeight.getView() == false && children.enableOverflow.getView() == true && ( + children.positionX.propertyView({ + label: trans("image.positionX"), + tooltip: trans("image.positionXTip") + }))} + + {children.autoHeight.getView() == false && children.enableOverflow.getView() == true && ( + children.positionY.propertyView({ + label: trans("image.positionY"), + tooltip: trans("image.positionYTip") + }))} + + {children.autoHeight.getView() == false && children.enableOverflow.getView() == true && ( + children.aspectRatio.propertyView({ + label: trans("image.aspectRatio"), + tooltip: trans("image.aspectRatioTip") + }))}
+
{children.style.getPropertyView()} + {children.clipPath.propertyView({ + label: trans("image.clipPath"), + tooltip: trans("image.clipPathTip") + })}
{children.animationStyle.getPropertyView()} diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx index 3cc215c0b..3828e9b01 100644 --- a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx @@ -5,7 +5,7 @@ import { defaultData } from "./jsonConstants"; import styled from "styled-components"; import { jsonValueExposingStateControl } from "comps/controls/codeStateControl"; import { ChangeEventHandlerControl } from "comps/controls/eventHandlerControl"; -import { hiddenPropertyView } from "comps/utils/propertyUtils"; +import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import { LabelControl } from "comps/controls/labelControl"; import { formDataChildren, FormDataPropertyView } from "../formComp/formDataConstants"; @@ -155,15 +155,15 @@ let JsonEditorTmpComp = (function () {
{children.onEvent.getPropertyView()} {hiddenPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children)}
)}
{children.autoHeight.propertyView({ label: trans('prop.height') })}
- {!children.autoHeight.getView()&&
- {children.showVerticalScrollbar.propertyView({label: trans('prop.showVerticalScrollbar')})} - -
} + {!children.autoHeight.getView()&&
+ {children.showVerticalScrollbar.propertyView({label: trans('prop.showVerticalScrollbar')})} +
} {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( children.label.getPropertyView() )} {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( <> diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx index 0a9e5f886..d1c6b917c 100644 --- a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx @@ -7,7 +7,7 @@ import styled from "styled-components"; import { BoolControl } from "comps/controls/boolControl"; import { dropdownControl } from "comps/controls/dropdownControl"; import { ArrayOrJSONObjectControl, NumberControl } from "comps/controls/codeControl"; -import { hiddenPropertyView } from "comps/utils/propertyUtils"; +import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import { EditorContext } from "comps/editorState"; import { useContext, useEffect } from "react"; @@ -90,6 +90,7 @@ let JsonExplorerTmpComp = (function () {
{hiddenPropertyView(children)} {children.expandToggle.propertyView({ label: trans("jsonExplorer.expandToggle") })} + {showDataLoadingIndicatorsPropertyView(children)}
)} diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx index 89686dbe5..c3f93b6e1 100644 --- a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx @@ -1,4 +1,4 @@ -import { hiddenPropertyView } from "comps/utils/propertyUtils"; +import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils"; import { ArrayOrJSONObjectControl, NumberControl, @@ -157,6 +157,7 @@ let JsonLottieTmpComp = (function () { {children.animationStart.propertyView({ label: trans("jsonLottie.animationStart")})} {children.keepLastFrame.propertyView({ label: trans("jsonLottie.keepLastFrame")})} {hiddenPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children)}
)} diff --git a/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx index c1e58eda8..219f3d783 100644 --- a/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx @@ -20,7 +20,7 @@ import { UICompBuilder, withDefault } from "../../generators"; import DateWidget from "./dateWidget"; import ErrorBoundary from "./errorBoundary"; import { Theme } from "@rjsf/antd"; -import { hiddenPropertyView } from "comps/utils/propertyUtils"; +import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils"; import { AutoHeightControl } from "../../controls/autoHeightControl"; import { useContext, useEffect, useRef, useState, createContext } from "react"; import { EditorContext } from "comps/editorState"; @@ -418,6 +418,7 @@ let FormBasicComp = (function () { {children.resetAfterSubmit.propertyView({ label: trans("jsonSchemaForm.resetAfterSubmit"), })} + {showDataLoadingIndicatorsPropertyView(children)}
)} {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( diff --git a/client/packages/lowcoder/src/comps/comps/lazyLoadComp/lazyLoadComp.tsx b/client/packages/lowcoder/src/comps/comps/lazyLoadComp/lazyLoadComp.tsx index 38952eb17..7a45714b3 100644 --- a/client/packages/lowcoder/src/comps/comps/lazyLoadComp/lazyLoadComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/lazyLoadComp/lazyLoadComp.tsx @@ -1,5 +1,5 @@ import { default as Skeleton } from "antd/es/skeleton"; -import { simpleMultiComp } from "comps/generators"; +import { simpleMultiComp, withIsLoading } from "comps/generators"; import { withExposingConfigs } from "comps/generators/withExposing"; import { GreyTextColor } from "constants/style"; import log from "loglevel"; @@ -92,7 +92,8 @@ export function lazyLoadComp( compName?: string, compPath?: string, loader?: LazyloadCompLoader, - loadingElement?: () => React.ReactNode + loadingElement?: () => React.ReactNode, + withoutLoading?: boolean, ) { class LazyLoadComp extends simpleMultiComp({}) { compValue: any; @@ -119,6 +120,8 @@ export function lazyLoadComp( return; } + LazyExportedComp = withoutLoading ? LazyExportedComp : withIsLoading(LazyExportedComp); + const params: CompParams = { dispatch: this.dispatch, }; diff --git a/client/packages/lowcoder/src/comps/comps/listViewComp/listViewPropertyView.tsx b/client/packages/lowcoder/src/comps/comps/listViewComp/listViewPropertyView.tsx index 15e10968a..6e9a4b865 100644 --- a/client/packages/lowcoder/src/comps/comps/listViewComp/listViewPropertyView.tsx +++ b/client/packages/lowcoder/src/comps/comps/listViewComp/listViewPropertyView.tsx @@ -4,7 +4,7 @@ import { ListViewImplComp } from "./listViewComp"; import { ListCompType } from "./listViewUtils"; import { useContext } from "react"; import { EditorContext } from "comps/editorState"; -import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils"; +import { disabledPropertyView, hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils"; type Props = { comp: InstanceType; @@ -56,6 +56,7 @@ export function listPropertyView(compType: ListCompType) { {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
{hiddenPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children)}
)} diff --git a/client/packages/lowcoder/src/comps/comps/mediaComp/audioComp.tsx b/client/packages/lowcoder/src/comps/comps/mediaComp/audioComp.tsx index 47373e51b..9b64c1bbc 100644 --- a/client/packages/lowcoder/src/comps/comps/mediaComp/audioComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/mediaComp/audioComp.tsx @@ -11,7 +11,7 @@ import { TacoAudio } from "lowcoder-design"; import { BoolControl } from "comps/controls/boolControl"; import { withDefault } from "../../generators/simpleGenerators"; import { trans } from "i18n"; -import { hiddenPropertyView } from "comps/utils/propertyUtils"; +import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils"; import { mediaCommonChildren, mediaMethods } from "./mediaUtils"; import { useContext, useEffect } from "react"; import { EditorContext } from "comps/editorState"; @@ -97,6 +97,7 @@ let AudioBasicComp = (function () { {children.loop.propertyView({ label: trans("audio.loop"), })} + {showDataLoadingIndicatorsPropertyView(children)}
)}
diff --git a/client/packages/lowcoder/src/comps/comps/mediaComp/colorPickerComp.tsx b/client/packages/lowcoder/src/comps/comps/mediaComp/colorPickerComp.tsx index 6ddab9be4..b11e528a3 100644 --- a/client/packages/lowcoder/src/comps/comps/mediaComp/colorPickerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/mediaComp/colorPickerComp.tsx @@ -7,7 +7,7 @@ import styled, { css } from "styled-components"; import { UICompBuilder, withDefault } from "../../generators"; import { FormDataPropertyView } from "../formComp/formDataConstants"; import { textInputChildren } from "../textInputComp/textInputConstants"; -import { disabledPropertyView, hiddenPropertyView, } from "comps/utils/propertyUtils"; +import { disabledPropertyView, hiddenPropertyView, showDataLoadingIndicatorsPropertyView, } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import { ColorPicker } from 'antd'; import { presets } from "./colorPickerConstants"; @@ -108,6 +108,7 @@ export const ColorPickerComp = new UICompBuilder(childrenMap, (props) => {
{children.onEvent.getPropertyView()} {disabledPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children)}
diff --git a/client/packages/lowcoder/src/comps/comps/mediaComp/videoComp.tsx b/client/packages/lowcoder/src/comps/comps/mediaComp/videoComp.tsx index 2d0336704..a4f5fb751 100644 --- a/client/packages/lowcoder/src/comps/comps/mediaComp/videoComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/mediaComp/videoComp.tsx @@ -15,7 +15,7 @@ import { BoolControl } from "comps/controls/boolControl"; import { withDefault } from "../../generators/simpleGenerators"; import { playIcon } from "lowcoder-design"; import { RangeControl } from "../../controls/codeControl"; -import { hiddenPropertyView } from "comps/utils/propertyUtils"; +import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import { Video } from "lowcoder-design"; import type ReactPlayer from "react-player"; @@ -146,6 +146,7 @@ let VideoBasicComp = (function () { <>
{children.onEvent.getPropertyView()} {hiddenPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children)}
{children.poster.propertyView({ diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/videobuttonCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/videobuttonCompConstants.tsx index 6bdf5c242..9a7a0d43b 100644 --- a/client/packages/lowcoder/src/comps/comps/meetingComp/videobuttonCompConstants.tsx +++ b/client/packages/lowcoder/src/comps/comps/meetingComp/videobuttonCompConstants.tsx @@ -1,22 +1,16 @@ +import { styleControl } from "@lowcoder-ee/comps/controls/styleControl"; +import { ButtonStyle } from "@lowcoder-ee/comps/controls/styleControlConstants"; +import { migrateOldData } from "@lowcoder-ee/comps/generators/simpleGenerators"; +import { refMethods } from "@lowcoder-ee/comps/generators/withMethodExposing"; +import { blurMethod, clickMethod, focusWithOptions } from "@lowcoder-ee/comps/utils/methodUtils"; import { default as Button } from "antd/es/button"; -import { - styleControl, - ButtonStyleType, - ButtonStyle, - migrateOldData, - refMethods, - blurMethod, - clickMethod, - focusWithOptions, - genActiveColor, - genHoverColor, -} from "lowcoder-sdk"; +import { genActiveColor, genHoverColor } from "components/colorSelect/colorUtils"; import styled, { css } from "styled-components"; // import { genActiveColor, genHoverColor } from "lowcoder-design"; export function getButtonStyle(buttonStyle: any) { - const hoverColor = genHoverColor(buttonStyle.background); - const activeColor = genActiveColor(buttonStyle.background); + const hoverColor = buttonStyle.background && genHoverColor(buttonStyle.background); + const activeColor = buttonStyle.background && genActiveColor(buttonStyle.background); return css` &&& { border-radius: ${buttonStyle.radius}; diff --git a/client/packages/lowcoder/src/comps/comps/moduleComp/moduleComp.tsx b/client/packages/lowcoder/src/comps/comps/moduleComp/moduleComp.tsx index c825c5b0d..93039108b 100644 --- a/client/packages/lowcoder/src/comps/comps/moduleComp/moduleComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/moduleComp/moduleComp.tsx @@ -34,7 +34,7 @@ import { wrapWithPromiseHandling } from "util/promiseUtils"; import ModuleInputComp from "./moduleInputComp"; import { MethodConfigInfo, withMethodExposing } from "comps/generators/withMethodExposing"; import { eventHandlerControl } from "comps/controls/eventHandlerControl"; -import { hiddenPropertyView } from "comps/utils/propertyUtils"; +import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils"; import { ModuleLoading } from "components/ModuleLoading"; import { trans } from "i18n"; import { ParamsConfig, ParamType } from "comps/controls/actionSelector/executeCompTypes"; @@ -119,9 +119,10 @@ class ModuleTmpComp extends ModuleCompBase { return ( <> {inputPropertyView &&
{inputPropertyView}
} - {eventConfigs.length > 0 && ( -
{eventsPropertyView}
- )} +
+ {eventConfigs.length > 0 && eventsPropertyView} + {showDataLoadingIndicatorsPropertyView(this.children)} +
{!this.autoScaleCompHeight() && this.children.autoHeight.getPropertyView()} {!this.autoScaleCompHeight() && this.children.scrollbars.propertyView({ diff --git a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx index 75b483072..58d3ed016 100644 --- a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx @@ -17,7 +17,7 @@ import { AnimationStyleType, NavigationStyle, } from "comps/controls/styleControlConstants"; -import { hiddenPropertyView } from "comps/utils/propertyUtils"; +import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import { useContext } from "react"; @@ -241,6 +241,7 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => { {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
{hiddenPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children)}
)} diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx index efee00caa..8750d2e0c 100644 --- a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx +++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx @@ -9,7 +9,7 @@ import { AnimationStyle, InputFieldStyle, LabelStyle, SliderStyle, SliderStyleT import styled, { css } from "styled-components"; import { default as Slider } from "antd/es/slider"; import { darkenColor, fadeColor } from "lowcoder-design"; -import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils"; +import { disabledPropertyView, hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils"; import { IconControl } from "comps/controls/iconControl"; import { trans } from "i18n"; @@ -102,6 +102,7 @@ export const SliderPropertyView = ( {children.onEvent.getPropertyView()} {disabledPropertyView(children)} {hiddenPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children as any)}
)} diff --git a/client/packages/lowcoder/src/comps/comps/progressComp.tsx b/client/packages/lowcoder/src/comps/comps/progressComp.tsx index 66f5c2123..1863c0150 100644 --- a/client/packages/lowcoder/src/comps/comps/progressComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/progressComp.tsx @@ -7,7 +7,7 @@ import { NameConfig, NameConfigHidden, withExposingConfigs } from "../generators import { styleControl } from "comps/controls/styleControl"; import { AnimationStyle, AnimationStyleType, ProgressStyle, ProgressStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants"; import styled, { css } from "styled-components"; -import { hiddenPropertyView } from "comps/utils/propertyUtils"; +import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import { useContext } from "react"; @@ -82,6 +82,7 @@ const ProgressBasicComp = (function () { {children.showInfo.propertyView({ label: trans("progress.showInfo"), })} + {showDataLoadingIndicatorsPropertyView(children)}
)} diff --git a/client/packages/lowcoder/src/comps/comps/ratingComp.tsx b/client/packages/lowcoder/src/comps/comps/ratingComp.tsx index 4e915f1bc..42a80c8ee 100644 --- a/client/packages/lowcoder/src/comps/comps/ratingComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/ratingComp.tsx @@ -12,7 +12,7 @@ import { formDataChildren, FormDataPropertyView } from "./formComp/formDataConst import { styleControl } from "comps/controls/styleControl"; import { AnimationStyle, InputFieldStyle, LabelStyle, RatingStyle, RatingStyleType } from "comps/controls/styleControlConstants"; import { migrateOldData } from "comps/generators/simpleGenerators"; -import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils"; +import { disabledPropertyView, hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import { useContext, useEffect, useRef } from "react"; @@ -107,6 +107,7 @@ const RatingBasicComp = (function () { {children.onEvent.getPropertyView()} {disabledPropertyView(children)} {hiddenPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children)}
{children.allowHalf.propertyView({ diff --git a/client/packages/lowcoder/src/comps/comps/remoteComp/loaders.tsx b/client/packages/lowcoder/src/comps/comps/remoteComp/loaders.tsx index 263400f76..812842910 100644 --- a/client/packages/lowcoder/src/comps/comps/remoteComp/loaders.tsx +++ b/client/packages/lowcoder/src/comps/comps/remoteComp/loaders.tsx @@ -1,3 +1,4 @@ +import { PUBLIC_APP_ID } from "@lowcoder-ee/constants/publicApp"; import { sdkConfig } from "@lowcoder-ee/constants/sdkConfig"; import { ASSETS_BASE_URL, NPM_PLUGIN_ASSETS_BASE_URL } from "constants/npmPlugins"; import { trans } from "i18n"; @@ -23,7 +24,9 @@ async function npmLoader( ? `${sdkConfig.baseURL}/${ASSETS_BASE_URL}` : NPM_PLUGIN_ASSETS_BASE_URL; - const entry = `${pluginBaseUrl}/${appId || 'none'}/${packageName}@${localPackageVersion}/index.js`; + const applicationId = (!appId || appId && appId === PUBLIC_APP_ID) ? 'none' : appId; + + const entry = `${pluginBaseUrl}/${applicationId}/${packageName}@${localPackageVersion}/index.js`; try { const module = await import( diff --git a/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx b/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx index 52829fd49..deb4eac70 100644 --- a/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx @@ -17,6 +17,7 @@ import { hiddenPropertyView, placeholderPropertyView, readOnlyPropertyView, + showDataLoadingIndicatorsPropertyView, } from "comps/utils/propertyUtils"; import _ from "lodash"; import { trans } from "i18n"; @@ -327,6 +328,7 @@ const RichTextEditorCompBase = new UICompBuilder(childrenMap, (props) => { {children.onEvent.getPropertyView()} {hiddenPropertyView(children)} {readOnlyPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children)}
)} diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx index af7959081..330c94120 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx @@ -12,6 +12,7 @@ import { disabledPropertyView, hiddenPropertyView, placeholderPropertyView, + showDataLoadingIndicatorsPropertyView, showSearchPropertyView, } from "comps/utils/propertyUtils"; import { i18nObjs, trans } from "i18n"; @@ -60,6 +61,7 @@ export const CascaderPropertyView = ( {children.onEvent.getPropertyView()} {disabledPropertyView(children)} {hiddenPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children as any)}
)} diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioCompConstants.tsx index ca740c6db..2945fec1f 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioCompConstants.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioCompConstants.tsx @@ -16,7 +16,7 @@ import { formDataChildren, FormDataPropertyView } from "../formComp/formDataCons import { styleControl } from "comps/controls/styleControl"; import { AnimationStyle, InputFieldStyle, LabelStyle, RadioStyle } from "comps/controls/styleControlConstants"; import { dropdownControl } from "../../controls/dropdownControl"; -import { hiddenPropertyView, disabledPropertyView } from "comps/utils/propertyUtils"; +import { hiddenPropertyView, disabledPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import { RefControl } from "comps/controls/refControl"; @@ -72,6 +72,7 @@ export const RadioPropertyView = ( {children.onEvent.getPropertyView()} {disabledPropertyView(children)} {hiddenPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children as any)} )} diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx index 6ad51d255..fe030f20b 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx @@ -48,6 +48,7 @@ import { disabledPropertyView, hiddenPropertyView, placeholderPropertyView, + showDataLoadingIndicatorsPropertyView, showSearchPropertyView, } from "comps/utils/propertyUtils"; import { trans } from "i18n"; @@ -190,7 +191,7 @@ const Select = styled(AntdSelect) <{ $style: SelectStyleType & MultiSelectStyleT ${(props) => props.$inputFieldStyle && getStyle(props.$inputFieldStyle)} `; -const DropdownStyled = styled.div<{ $style: ChildrenMultiSelectStyleType }>` +export const DropdownStyled = styled.div<{ $style: ChildrenMultiSelectStyleType }>` background: ${props => props.$style?.background}; border: ${props => props.$style?.border}; border-style: ${props => props.$style?.borderStyle}; @@ -342,6 +343,7 @@ export const SelectPropertyView = ( {children.onEvent.getPropertyView()} {disabledPropertyView(children)} {hiddenPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children as any)} )} diff --git a/client/packages/lowcoder/src/comps/comps/shapeComp/shapeComp.tsx b/client/packages/lowcoder/src/comps/comps/shapeComp/shapeComp.tsx index 51a404dbd..fca9c6b8b 100644 --- a/client/packages/lowcoder/src/comps/comps/shapeComp/shapeComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/shapeComp/shapeComp.tsx @@ -18,6 +18,7 @@ import { import { disabledPropertyView, hiddenPropertyView, + showDataLoadingIndicatorsPropertyView, } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import { BoolCodeControl } from "comps/controls/codeControl"; @@ -53,6 +54,7 @@ export const ContainerBaseComp = (function () {
{disabledPropertyView(children)} {hiddenPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children)}
)} diff --git a/client/packages/lowcoder/src/comps/comps/signatureComp.tsx b/client/packages/lowcoder/src/comps/comps/signatureComp.tsx index 7d681bc4a..6ba13fe0e 100644 --- a/client/packages/lowcoder/src/comps/comps/signatureComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/signatureComp.tsx @@ -15,7 +15,7 @@ import { SignatureContainerStyle } from "comps/controls/styleControlConstants"; import { stateComp, withDefault } from "comps/generators/simpleGenerators"; -import { hiddenPropertyView } from "comps/utils/propertyUtils"; +import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import { changeValueAction, multiChangeAction } from "lowcoder-core"; import { Section, sectionNames, UndoIcon } from "lowcoder-design"; @@ -215,6 +215,7 @@ let SignatureTmpComp = (function () { {hiddenPropertyView(children)} {children.showUndo.propertyView({ label: trans("signature.showUndo") })} {children.showClear.propertyView({ label: trans("signature.showClear") })} + {showDataLoadingIndicatorsPropertyView(children)} )} diff --git a/client/packages/lowcoder/src/comps/comps/switchComp.tsx b/client/packages/lowcoder/src/comps/comps/switchComp.tsx index 00c5abaef..730f521df 100644 --- a/client/packages/lowcoder/src/comps/comps/switchComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/switchComp.tsx @@ -11,7 +11,7 @@ import styled, { css } from "styled-components"; import { UICompBuilder } from "../generators"; import { CommonNameConfig, NameConfig, withExposingConfigs } from "../generators/withExposing"; import { formDataChildren, FormDataPropertyView } from "./formComp/formDataConstants"; -import { hiddenPropertyView, disabledPropertyView } from "comps/utils/propertyUtils"; +import { hiddenPropertyView, disabledPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import { RefControl } from "comps/controls/refControl"; import { refMethods } from "comps/generators/withMethodExposing"; @@ -149,6 +149,7 @@ let SwitchTmpComp = (function () { {children.onEvent.getPropertyView()} {disabledPropertyView(children)} {hiddenPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children)} )} diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnDateComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnDateComp.tsx index d077f6d79..a71734f46 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnDateComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnDateComp.tsx @@ -137,8 +137,11 @@ export function formatDate(date: string, format: string) { const childrenMap = { text: StringControl, format: withDefault(StringControl, DATE_FORMAT), + inputFormat: withDefault(StringControl, DATE_FORMAT), }; +let inputFormat = DATE_FORMAT; + const getBaseValue: ColumnTypeViewFn = (props) => props.text; type DateEditProps = { @@ -146,6 +149,7 @@ type DateEditProps = { onChange: (value: string) => void; onChangeEnd: () => void; showTime: boolean; + inputFormat: string; }; export const DateEdit = (props: DateEditProps) => { @@ -183,6 +187,7 @@ export const DateEdit = (props: DateEditProps) => { nextIcon={} superNextIcon={} superPrevIcon={} + format={props.inputFormat} allowClear={true} variant="borderless" autoFocus @@ -210,6 +215,7 @@ export const DateComp = (function () { return new ColumnTypeCompBuilder( childrenMap, (props, dispatch) => { + inputFormat = props.inputFormat; const value = props.changeValue ?? getBaseValue(props, dispatch); return formatDate(value, props.format); }, @@ -222,6 +228,7 @@ export const DateComp = (function () { onChange={props.onChange} onChangeEnd={props.onChangeEnd} showTime={false} + inputFormat={inputFormat} /> )) .setPropertyViewFn((children) => ( diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnDateTimeComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnDateTimeComp.tsx index b28724fde..7e243fdfb 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnDateTimeComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnDateTimeComp.tsx @@ -13,14 +13,18 @@ import { DateEdit, formatDate } from "./columnDateComp"; const childrenMap = { text: StringControl, format: withDefault(StringControl, DATE_TIME_FORMAT), + inputFormat: withDefault(StringControl, DATE_TIME_FORMAT), }; +let inputFormat = DATE_TIME_FORMAT; + const getBaseValue: ColumnTypeViewFn = (props) => props.text; export const DateTimeComp = (function () { return new ColumnTypeCompBuilder( childrenMap, (props, dispatch) => { + inputFormat = props.inputFormat; const value = props.changeValue ?? getBaseValue(props, dispatch); return formatDate(value, props.format); }, @@ -33,6 +37,7 @@ export const DateTimeComp = (function () { onChange={props.onChange} onChangeEnd={props.onChangeEnd} showTime={true} + inputFormat={inputFormat} /> )) .setPropertyViewFn((children) => ( diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx index a712fe7a8..0325d5d75 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx @@ -772,6 +772,7 @@ export function TableCompView(props: { const rowStyle = compChildren.rowStyle.getView(); const headerStyle = compChildren.headerStyle.getView(); const toolbarStyle = compChildren.toolbarStyle.getView(); + const hideToolbar = compChildren.hideToolbar.getView() const rowAutoHeight = compChildren.rowAutoHeight.getView(); const tableAutoHeight = comp.getTableAutoHeight(); const showHorizontalScrollbar = compChildren.showHorizontalScrollbar.getView(); @@ -935,7 +936,7 @@ export function TableCompView(props: { [viewMode, compChildren.onEvent, compChildren.columns] ); - const toolbarView = ( + const toolbarView = !hideToolbar && ( - {toolbar.position === "above" && (toolbar.fixedToolbar || (tableAutoHeight && showHorizontalScrollbar)) && toolbarView} + {toolbar.position === "above" && !hideToolbar && (toolbar.fixedToolbar || (tableAutoHeight && showHorizontalScrollbar)) && toolbarView} - {toolbar.position === "below" && (toolbar.fixedToolbar || (tableAutoHeight && showHorizontalScrollbar)) && toolbarView} + {toolbar.position === "below" && !hideToolbar && (toolbar.fixedToolbar || (tableAutoHeight && showHorizontalScrollbar)) && toolbarView} diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx index fce61b34e..325e0d14d 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx @@ -491,9 +491,6 @@ export function compTablePropertyView {comp.children.onEvent.getPropertyView()} {hiddenPropertyView(comp.children)} {loadingPropertyView(comp.children)} - {comp.children.showDataLoadSpinner.propertyView({ - label: trans("table.showDataLoadSpinner"), - })} {comp.children.selection.getPropertyView()} {comp.children.editModeClicks.propertyView({ label: trans("table.editMode"), @@ -550,6 +547,9 @@ export function compTablePropertyView {comp.children.hideHeader.propertyView({ label: trans("table.hideHeader"), })} + {comp.children.hideToolbar.propertyView({ + label: trans("table.hideToolbar"), + })} {comp.children.viewModeResizable.propertyView({ label: trans("table.viewModeResizable"), tooltip: trans("table.viewModeResizableTooltip"), diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx index d32d3ff24..47db799b8 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx @@ -227,7 +227,6 @@ const tableChildrenMap = { showHorizontalScrollbar: BoolControl, data: withIsLoadingMethod(JSONObjectArrayControl), newData: stateComp([]), - showDataLoadSpinner: withDefault(BoolPureControl, true), columns: ColumnListComp, size: dropdownControl(sizeOptions, "middle"), selection: SelectionControl, @@ -240,6 +239,7 @@ const tableChildrenMap = { rowStyle: styleControl(TableRowStyle, 'rowStyle'), summaryRowStyle: styleControl(TableSummaryRowStyle, 'summaryRowStyle'), toolbarStyle: styleControl(TableToolbarStyle, 'toolbarStyle'), + hideToolbar: withDefault(BoolControl,false), headerStyle: styleControl(TableHeaderStyle, 'headerStyle'), searchText: StringControl, columnsStyle: styleControl(TableColumnStyle, 'columnsStyle'), diff --git a/client/packages/lowcoder/src/comps/comps/textComp.tsx b/client/packages/lowcoder/src/comps/comps/textComp.tsx index 38043d1a4..f51a1ede4 100644 --- a/client/packages/lowcoder/src/comps/comps/textComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/textComp.tsx @@ -11,7 +11,7 @@ import { NameConfig, NameConfigHidden, withExposingConfigs } from "../generators import { markdownCompCss, TacoMarkDown } from "lowcoder-design"; import { styleControl } from "comps/controls/styleControl"; import { AnimationStyle, AnimationStyleType, TextStyle, TextStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants"; -import { hiddenPropertyView } from "comps/utils/propertyUtils"; +import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import { alignWithJustifyControl } from "comps/controls/alignControl"; @@ -171,6 +171,7 @@ const TextPropertyView = React.memo((props: {
{hiddenPropertyView(props.children)} {props.children.onEvent.getPropertyView()} + {showDataLoadingIndicatorsPropertyView(props.children)}
)} diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx index 9c3129746..513c4f38f 100644 --- a/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx +++ b/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx @@ -30,6 +30,7 @@ import { placeholderPropertyView, regexPropertyView, requiredPropertyView, + showDataLoadingIndicatorsPropertyView, } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import { ChangeEvent, useEffect, useRef, useState } from "react"; @@ -168,6 +169,7 @@ export const textInputProps = (props: RecordConstructorToView) => { const [validateState, setValidateState] = useState({}); const changeRef = useRef(false) + const touchRef = useRef(false); const propsRef = useRef>(props); propsRef.current = props; @@ -194,9 +196,23 @@ export const useTextInputProps = (props: RecordConstructorToView { + if (!touchRef.current) return; + + setValidateState( + textInputValidate({ + ...propsRef.current, + value: { + value: props.value.value, + }, + }) + ); + }, [props.customRule]) + const handleChange = (e: ChangeEvent) => { props.value.onChange(e.target.value); changeRef.current = true; + touchRef.current = true; }; return [ @@ -221,6 +237,7 @@ export const TextInputInteractionSection = (children: TextInputComp) => (
{children.onEvent.getPropertyView()} {disabledPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children as any)}
); diff --git a/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx b/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx index 762ba516a..6e4f298dd 100644 --- a/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx @@ -9,7 +9,7 @@ import { import { trans } from "i18n"; import { UICompBuilder, withDefault } from "../../generators"; import { ScrollBar, Section, sectionNames } from "lowcoder-design"; -import { hiddenPropertyView } from "comps/utils/propertyUtils"; +import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils"; import { BoolControl } from "comps/controls/boolControl"; import { stringExposingStateControl } from "comps/controls/codeStateControl"; import { dropdownControl } from "comps/controls/dropdownControl"; @@ -194,6 +194,7 @@ let TimeLineBasicComp = (function () {
{children.onEvent.getPropertyView()} {hiddenPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children)}
)} diff --git a/client/packages/lowcoder/src/comps/comps/timerComp.tsx b/client/packages/lowcoder/src/comps/comps/timerComp.tsx index 5db56ca3a..907566e12 100644 --- a/client/packages/lowcoder/src/comps/comps/timerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/timerComp.tsx @@ -4,7 +4,7 @@ import { AnimationStyle, AnimationStyleType, startButtonStyle, StartButtonStyleT import { UICompBuilder } from "comps/generators/uiCompBuilder"; import { NameConfig, NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing"; import { Section, sectionNames } from "lowcoder-design"; -import { hiddenPropertyView } from "comps/utils/propertyUtils"; +import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import { Button, Space } from "antd"; import { countdownEvent, eventHandlerControl, pauseEvent, resetEvent, resumeEvent, startEvent } from "../controls/eventHandlerControl"; @@ -239,8 +239,9 @@ let AvatarGroupBasicComp = (function () { })}
- {hiddenPropertyView(children)} {children.onEvent.propertyView()} + {hiddenPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children)}
)} diff --git a/client/packages/lowcoder/src/comps/comps/transferComp.tsx b/client/packages/lowcoder/src/comps/comps/transferComp.tsx index 378a2f6fb..300020bd7 100644 --- a/client/packages/lowcoder/src/comps/comps/transferComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/transferComp.tsx @@ -6,7 +6,7 @@ import { TransferStyle, TransferStyleType, heightCalculator, widthCalculator } f import { UICompBuilder } from "comps/generators/uiCompBuilder"; import { NameConfig, NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing"; import { Section, sectionNames } from "lowcoder-design"; -import { hiddenPropertyView } from "comps/utils/propertyUtils"; +import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import { NumberControl, StringControl } from "comps/controls/codeControl"; import { default as Transfer } from "antd/es/transfer"; @@ -170,9 +170,10 @@ let TransferBasicComp = (function () { label: trans("transfer.pageSize"), })} -
+
{children.onEvent.propertyView()} {hiddenPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children)}
{children.style.getPropertyView()}
@@ -186,7 +187,7 @@ TransferBasicComp = class extends TransferBasicComp { } }; -export const TransferComp = withExposingConfigs(TransferBasicComp, [ +export const transferComp = withExposingConfigs(TransferBasicComp, [ new NameConfig("items", trans("transfer.items")), new NameConfig("targetKeys", trans("transfer.targetKeys")), new NameConfig("targerObject", trans("transfer.targerObject")), diff --git a/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx b/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx index cdfb952b6..cc7489237 100644 --- a/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx @@ -29,6 +29,7 @@ import { trans } from "i18n"; import { useContext } from "react"; import { EditorContext } from "comps/editorState"; import { AutoHeightControl } from "@lowcoder-ee/comps/controls/autoHeightControl"; +import { showDataLoadingIndicatorsPropertyView } from "@lowcoder-ee/comps/utils/propertyUtils"; type TreeStyleType = StyleConfigType; @@ -151,6 +152,7 @@ let TreeBasicComp = (function () { {children.onEvent.getPropertyView()} {children.hidden.propertyView({ label: trans("prop.hide") })} {children.disabled.propertyView({ label: trans("prop.disabled") })} + {showDataLoadingIndicatorsPropertyView(children)} {children.selectType.propertyView({ label: trans("tree.selectType") })} {children.selectType.getView() !== "none" && valuePropertyView(children)} {children.selectType.getView() === "check" && diff --git a/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx b/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx index c1a3f8157..115534568 100644 --- a/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx @@ -30,6 +30,7 @@ import { trans } from "i18n"; import { allowClearPropertyView, placeholderPropertyView, + showDataLoadingIndicatorsPropertyView, showSearchPropertyView, } from "comps/utils/propertyUtils"; import { BaseSelectRef } from "rc-select"; @@ -170,6 +171,7 @@ let TreeBasicComp = (function () { children.checkedStrategy.propertyView({ label: trans("tree.checkedStrategy") })} {allowClearPropertyView(children)} {showSearchPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children)}
)} diff --git a/client/packages/lowcoder/src/comps/controls/styleControl.tsx b/client/packages/lowcoder/src/comps/controls/styleControl.tsx index c4eb8546f..5d40a2db4 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControl.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControl.tsx @@ -44,6 +44,7 @@ import { SingleColorConfig, MarginConfig, DirectionConfig, + DetailSizeConfig, ChartOpacityConfig, ChartBoxShadowConfig, ChartBorderStyleConfig, @@ -209,6 +210,10 @@ function isDirectionConfig(config: SingleColorConfig): config is DirectionConfig return config.hasOwnProperty("direction"); } +function isDetailSizeConfig(config: SingleColorConfig): config is DetailSizeConfig { + return config.hasOwnProperty("detailSize"); +} + function isChartOpacityConfig(config: SingleColorConfig): config is ChartOpacityConfig { return config.hasOwnProperty("chartOpacity"); } @@ -410,6 +415,9 @@ function isEmptyMargin(margin: string) { function isEmptyDirection(direction: string) { return _.isEmpty(direction); } +function isEmptyDetailSize(detailSize: string) { + return _.isEmpty(detailSize); +} function isEmptyChartOpacity(chartOpacity: string) { return _.isEmpty(chartOpacity); } @@ -624,6 +632,10 @@ function calcColors>( res[name] = props[name]; return; } + if (!isEmptyDetailSize(props[name]) && isDetailSizeConfig(config)) { + res[name] = props[name]; + return; + } if (!isEmptyChartOpacity(props[name]) && isChartOpacityConfig(config)) { res[name] = props[name]; return; @@ -812,6 +824,9 @@ function calcColors>( if (isDirectionConfig(config)) { res[name] = themeWithDefault[config.direction] || '0 0 1 1'; } + if (isDetailSizeConfig(config)) { + res[name] = themeWithDefault[config.detailSize] || '24px 12px'; + } if (isChartOpacityConfig(config)) { res[name] = themeWithDefault[config.chartOpacity] || '1'; } @@ -1005,7 +1020,7 @@ const RadiusPropIcon = styled(BorderRadiusIcon)` width: 24px; margin: 0 11px 0 0 const BorderPropIcon = styled(BorderWidthIcon)` margin: 0 8px 0 -3px; padding: 3px; color: #888`; const BorderStylePropIcon = styled(BorderStyleIcon)` margin: 0 8px 0 -3px; padding: 3px; color: #888`; -const StyledBackgroundImageIcon = styled(ImageCompIconSmall)` margin: 0 6px 0 0; padding: 2px; color: #888`; +const StyledBackgroundImageIcon = styled(ImageCompIconSmall)` margin: 0 10px 0 0; padding: 2px; color: #888`; const AnimationIterationCountPropIcon = styled(RefreshLineIcon)` margin: 0 8px 0 -3px; padding: 3px; @@ -1174,6 +1189,7 @@ export function styleControl( name === 'footerBackgroundImageOrigin' || name === 'margin' || name === 'direction' || + name === 'detailSize' || name === 'chartOpacity' || name === 'chartBoxShadow' || name === 'chartBorderStyle' || @@ -1242,6 +1258,14 @@ export function styleControl( ); const showReset = Object.values(childrenToProps(children)).findIndex((item) => item) > -1; + + // helper function to build the tooltip automatically - but check if there is a translation existing at least. + const getTooltip = (name: string) => { + const tooltipKey = `style.${name}Tip`; + const tooltip = trans(tooltipKey); + return !tooltip.includes("oups!") ? tooltip : false; + }; + return ( <> @@ -1255,6 +1279,7 @@ export function styleControl( name === 'radius' || name === 'margin' || name === 'direction' || + name === 'detailSize' || name === 'chartOpacity' || name === 'chartBoxShadow' || name === 'chartBorderStyle' || @@ -1348,6 +1373,7 @@ export function styleControl( label: config.label, preInputNode: , placeholder: props[name], + tooltip: getTooltip(name), }) : name === 'borderWidth' ? ( @@ -1358,6 +1384,7 @@ export function styleControl( ), placeholder: props[name], + tooltip: getTooltip(name), }) : name === 'borderStyle' ? ( @@ -1370,6 +1397,7 @@ export function styleControl( ), placeholder: props[name], + tooltip: getTooltip(name), }) : name === 'margin' ? ( @@ -1380,6 +1408,7 @@ export function styleControl( label: config.label, preInputNode: , placeholder: props[name], + tooltip: getTooltip(name), }) : name === 'direction' ? ( @@ -1390,7 +1419,19 @@ export function styleControl( label: config.label, preInputNode: , placeholder: props[name], + tooltip: getTooltip(name), }) + : name === 'detailSize' + ? ( + children[name] as InstanceType< + typeof StringControl + > + ).propertyView({ + label: config.label, + preInputNode: , + placeholder: props[name], + tooltip: getTooltip(name), + }) : name === 'chartOpacity' ? ( children[name] as InstanceType< @@ -1400,6 +1441,7 @@ export function styleControl( label: config.label, preInputNode: , placeholder: props[name], + tooltip: getTooltip(name), }) : name === 'chartBoxShadow' ? ( @@ -1410,6 +1452,7 @@ export function styleControl( label: config.label, preInputNode: , placeholder: props[name], + tooltip: getTooltip(name), }) : name === 'chartBorderStyle' ? ( @@ -1420,6 +1463,7 @@ export function styleControl( label: config.label, preInputNode: , placeholder: props[name], + tooltip: getTooltip(name), }) : name === 'chartBorderRadius' ? ( @@ -1430,6 +1474,7 @@ export function styleControl( label: config.label, preInputNode: , placeholder: props[name], + tooltip: getTooltip(name), }) : name === 'chartBorderWidth' ? ( @@ -1440,6 +1485,7 @@ export function styleControl( label: config.label, preInputNode: , placeholder: props[name], + tooltip: getTooltip(name), }) : name === 'chartTextSize' ? ( @@ -1450,6 +1496,7 @@ export function styleControl( label: config.label, preInputNode: , placeholder: props[name], + tooltip: getTooltip(name), }) : name === 'chartTextWeight' ? ( @@ -1460,6 +1507,7 @@ export function styleControl( label: config.label, preInputNode: , placeholder: props[name], + tooltip: getTooltip(name), }) : name === 'chartFontFamily' ? ( @@ -1470,6 +1518,7 @@ export function styleControl( label: config.label, preInputNode: , placeholder: props[name], + tooltip: getTooltip(name), }) : name === 'chartFontStyle' ? ( @@ -1480,6 +1529,7 @@ export function styleControl( label: config.label, preInputNode: , placeholder: props[name], + tooltip: getTooltip(name), }) : name === 'animationIterationCount' ? ( @@ -1492,6 +1542,7 @@ export function styleControl( ), placeholder: props[name], + tooltip: getTooltip(name), }) : name === 'opacity' ? ( @@ -1504,6 +1555,7 @@ export function styleControl( ), placeholder: props[name], + tooltip: getTooltip(name), }) : name === 'boxShadowColor' ? ( @@ -1516,6 +1568,7 @@ export function styleControl( ), placeholder: props[name], + tooltip: getTooltip(name), }) : name === 'chartBackgroundColor' ? ( @@ -1528,6 +1581,7 @@ export function styleControl( ), placeholder: props[name], + tooltip: getTooltip(name), }) : name === 'chartGradientColor' ? ( @@ -1540,6 +1594,7 @@ export function styleControl( ), placeholder: props[name], + tooltip: getTooltip(name), }) : name === 'chartShadowColor' ? ( @@ -1552,6 +1607,7 @@ export function styleControl( ), placeholder: props[name], + tooltip: getTooltip(name), }) : name === 'chartBorderColor' ? ( @@ -1564,6 +1620,7 @@ export function styleControl( ), placeholder: props[name], + tooltip: getTooltip(name), }) : name === 'chartTextColor' ? ( @@ -1576,6 +1633,7 @@ export function styleControl( ), placeholder: props[name], + tooltip: getTooltip(name), }) : name === 'boxShadow' ? ( @@ -1588,6 +1646,7 @@ export function styleControl( ), placeholder: props[name], + tooltip: getTooltip(name), }) : name === 'animation' ? ( @@ -1600,6 +1659,7 @@ export function styleControl( ), placeholder: props[name], + tooltip: getTooltip(name), }) : name === 'animationDelay' ? ( @@ -1612,6 +1672,7 @@ export function styleControl( ), placeholder: props[name], + tooltip: getTooltip(name), }) : name === 'animationDuration' ? ( @@ -1624,6 +1685,7 @@ export function styleControl( ), placeholder: props[name], + tooltip: getTooltip(name), }) : name === 'padding' || name === @@ -1643,6 +1705,7 @@ export function styleControl( ), placeholder: props[name], + tooltip: getTooltip(name), }) : name === 'textSize' ? ( @@ -1657,6 +1720,7 @@ export function styleControl( ), placeholder: props[name], + tooltip: getTooltip(name), }) : name === 'textWeight' ? ( @@ -1671,6 +1735,7 @@ export function styleControl( ), placeholder: props[name], + tooltip: getTooltip(name), }) : name === 'fontFamily' ? ( @@ -1685,6 +1750,7 @@ export function styleControl( ), placeholder: props[name], + tooltip: getTooltip(name), }) : name === 'textDecoration' ? ( @@ -1698,8 +1764,8 @@ export function styleControl( preInputNode: ( ), - placeholder: - props[name], + placeholder: props[name], + tooltip: getTooltip(name), }) : name === 'textTransform' ? ( @@ -1713,8 +1779,8 @@ export function styleControl( preInputNode: ( ), - placeholder: - props[name], + placeholder: props[name], + tooltip: getTooltip(name), }) : name === 'fontStyle' ? ( @@ -1728,8 +1794,8 @@ export function styleControl( preInputNode: ( ), - placeholder: - props[name], + placeholder: props[name], + tooltip: getTooltip(name), }) : name === 'backgroundImage' || @@ -1749,15 +1815,10 @@ export function styleControl( preInputNode: ( ), - placeholder: - props[name], + placeholder: props[name], + tooltip: getTooltip(name), }) - : name === - 'backgroundImageRepeat' || - name === - 'headerBackgroundImageRepeat' || - name === - 'footerBackgroundImageRepeat' + : name === 'backgroundImageRepeat' || name === 'headerBackgroundImageRepeat' || name === 'footerBackgroundImageRepeat' ? ( children[ name @@ -1770,48 +1831,77 @@ export function styleControl( preInputNode: ( ), - placeholder: - props[name], - }) - : name === - 'rotation' - ? ( - children[ - name - ] as InstanceType< - typeof StringControl - > - ).propertyView({ - label: - config.label, - preInputNode: - ( - - ), - placeholder: - props[name], - }) - : name === 'lineHeight' // Added lineHeight here - ? ( - children[name] as InstanceType - ).propertyView({ - label: config.label, - preInputNode: , placeholder: props[name], + tooltip: getTooltip(name), }) - : children[ - name - ].propertyView({ - label: - config.label, - panelDefaultColor: - props[name], - // isDep: isDepColorConfig(config), - isDep: true, - depMsg: - depMsg, - allowGradient: config.name.includes('background'), - })} + : name === 'backgroundImageSize' || + name === 'headerBackgroundImageSize' || + name === 'footerBackgroundImageSize' + ? (children[name] as InstanceType).propertyView({ + label: config.label, + preInputNode: , + placeholder: props[name], + tooltip: getTooltip(name), + }) + : name === 'backgroundImagePosition' || + name === 'headerBackgroundImagePosition' || + name === 'footerBackgroundImagePosition' + ? (children[name] as InstanceType).propertyView({ + label: config.label, + preInputNode: , + placeholder: props[name], + tooltip: getTooltip(name), + }) + : name === 'backgroundImageOrigin' || + name === 'headerBackgroundImageOrigin' || + name === 'footerBackgroundImageOrigin' + ? (children[name] as InstanceType).propertyView({ + label: config.label, + preInputNode: , + placeholder: props[name], + tooltip: getTooltip(name), + }) + + : name === + 'rotation' + ? ( + children[ + name + ] as InstanceType< + typeof StringControl + > + ).propertyView({ + label: + config.label, + preInputNode: + ( + + ), + placeholder: props[name], + tooltip: getTooltip(name), + }) + : name === 'lineHeight' // Added lineHeight here + ? ( + children[name] as InstanceType + ).propertyView({ + label: config.label, + preInputNode: , + placeholder: props[name], + tooltip: getTooltip(name), + }) + : children[ + name + ].propertyView({ + label: + config.label, + panelDefaultColor: + props[name], + // isDep: isDepColorConfig(config), + isDep: true, + depMsg: + depMsg, + allowGradient: config.name.includes('background'), + })} ); })} diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index 6de547836..e4d467741 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -185,6 +185,10 @@ export type DirectionConfig = CommonColorConfig & { readonly direction: string; }; +export type DetailSizeConfig = CommonColorConfig & { + readonly detailSize: string; +}; + export type ChartOpacityConfig = CommonColorConfig & { readonly chartOpacity: string; }; @@ -260,6 +264,7 @@ export type SingleColorConfig = | FontStyleConfig | MarginConfig | DirectionConfig + | DetailSizeConfig | ChartOpacityConfig | ChartBoxShadowConfig | ChartBorderStyleConfig @@ -655,6 +660,12 @@ const DIRECTION = { direction: "direction", } as const; +const DETAILSIZE = { + name: "detailSize", + label: trans("style.detailSize"), + detailSize: "detailSize", +} as const; + const CHARTOPACITY = { name: "chartOpacity", label: trans("style.opacity"), @@ -954,7 +965,7 @@ export const ButtonStyle = [ ] as const; export const DropdownStyle = [ - getBackground('primary'), + getBackground(), ...STYLING_FIELDS_SEQUENCE.filter(style=>style.name!=='rotation'), ] as const; @@ -1876,11 +1887,16 @@ export const NavigationStyle = [ ] as const; export const ImageStyle = [ - getStaticBorder("#00000000"), - RADIUS, - BORDER_WIDTH, + // getStaticBorder("#00000000"), MARGIN, PADDING, + BORDER, + BORDER_STYLE, + RADIUS, + BORDER_WIDTH, + OPACITY, + BOXSHADOW, + BOXSHADOWCOLOR, ROTATION ] as const; @@ -1988,6 +2004,57 @@ export const EchartDefaultChartStyle = [ CHARTBORDERWIDTH, ] as const; +export const EchartCandleStickChartStyle = [ + getBackground("primarySurface"), + CHARTSHADOWCOLOR, + CHARTBOXSHADOW, + CHARTBORDERSTYLE, + CHARTBORDERRADIUS, + CHARTBORDERWIDTH, +] as const; + +export const SankeyLineStyle = [ + CHARTSHADOWCOLOR, + CHARTBOXSHADOW, + CHARTBORDERCOLOR, + CHARTBORDERSTYLE, + CHARTBORDERRADIUS, + CHARTBORDERWIDTH, +] as const; + +export const EchartDefaultDetailStyle = [ + CHARTBACKGROUNDCOLOR, + DETAILSIZE, + PADDING, + CHARTTEXTCOLOR, + CHARTTEXTSIZE, + CHARTTEXTWEIGHT, + CHARTFONTFAMILY, + CHARTFONTSTYLE, + CHARTSHADOWCOLOR, + CHARTBOXSHADOW, + CHARTBORDERCOLOR, + CHARTBORDERSTYLE, + CHARTBORDERRADIUS, + CHARTBORDERWIDTH, +] as const; + +export const RadarLabelStyle = [ + CHARTBACKGROUNDCOLOR, + PADDING, + CHARTTEXTCOLOR, + CHARTTEXTSIZE, + CHARTTEXTWEIGHT, + CHARTFONTFAMILY, + CHARTFONTSTYLE, + CHARTSHADOWCOLOR, + CHARTBOXSHADOW, + CHARTBORDERCOLOR, + CHARTBORDERSTYLE, + CHARTBORDERRADIUS, + CHARTBORDERWIDTH, +] as const; + export const CalendarStyle = [ getBackground("primarySurface"), { diff --git a/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx b/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx index e64b82cf3..9539a5bab 100644 --- a/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx +++ b/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx @@ -38,6 +38,7 @@ import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; export type NewChildren>> = ChildrenCompMap & { hidden: InstanceType; + showDataLoadingIndicators: InstanceType, className: InstanceType; dataTestId: InstanceType; preventStyleOverwriting: InstanceType; @@ -78,7 +79,7 @@ export const ExtendedPropertyView = React.memo(< const editorState = useContext(EditorContext); const selectedComp = values(editorState?.selectedComps())[0]; const compType = selectedComp?.children?.compType?.getView() as UICompType; - + useEffect(() => { setCompName(uiCompRegistry[compType]?.compName || ''); }, [compType]); @@ -139,6 +140,7 @@ export function uiChildren< return { ...childrenMap, hidden: BoolCodeControl, + showDataLoadingIndicators: withDefault(BoolControl, false), className: StringControl, dataTestId: StringControl, preventStyleOverwriting: withDefault(BoolControl, false), diff --git a/client/packages/lowcoder/src/comps/generators/withIsLoading.tsx b/client/packages/lowcoder/src/comps/generators/withIsLoading.tsx index 26914c1df..30d4f9873 100644 --- a/client/packages/lowcoder/src/comps/generators/withIsLoading.tsx +++ b/client/packages/lowcoder/src/comps/generators/withIsLoading.tsx @@ -11,6 +11,11 @@ import { import styled from "styled-components"; import { codeControl } from "comps/controls/codeControl"; import { setFieldsNoTypeCheck } from "util/objectUtils"; +import Skeleton from "antd/es/skeleton"; +import { ReactNode, useContext, useMemo } from "react"; +import { CompContext } from "../utils/compContext"; +import LoadingOutlined from "@ant-design/icons/LoadingOutlined"; +import { ThemeContext } from "../utils/themeContext"; const Wrapper = styled.div` &, @@ -23,6 +28,50 @@ const Wrapper = styled.div` const __WITH_IS_LOADING = "__WITH_IS_LOADING"; +const LoadingWrapper = ({ + isLoading, + children, +}: { + isLoading: boolean, + children: ReactNode, +}) => { + const compState = useContext(CompContext); + const currentTheme = useContext(ThemeContext)?.theme; + + const showLoading = useMemo(() => { + const themeDataIndicator = currentTheme?.showDataLoadingIndicators; + const compDataIndicator = compState.comp?.comp?.showDataLoadingIndicators; + + return isLoading ? ( + compDataIndicator !== 'undefined' ? compDataIndicator : Boolean(themeDataIndicator) + ) : false; + }, [ + isLoading, + currentTheme?.showDataLoadingIndicators, + compState.comp?.comp?.showDataLoadingIndicators, + ]); + + if (currentTheme?.dataLoadingIndicator === 'skeleton') { + return ( + + + {children} + + + ); + } + + return ( + + } + > + {children} + + + ) +} /** * Unified increase isLoading effect */ @@ -38,16 +87,16 @@ export function withIsLoading(VariantComp: T): T }, updateNodeFields: (value: any) => { const fetchInfo = value[__WITH_IS_LOADING] as FetchInfo; - return { isLoading: fetchInfo.isFetching }; + return { isLoading: fetchInfo?.isFetching }; }, }); } override getView() { return ( - - {super.getView()} - + + {super.getView()} + ); } } diff --git a/client/packages/lowcoder/src/comps/queries/httpQuery/alasqlQuery.tsx b/client/packages/lowcoder/src/comps/queries/httpQuery/alasqlQuery.tsx new file mode 100644 index 000000000..a49dada44 --- /dev/null +++ b/client/packages/lowcoder/src/comps/queries/httpQuery/alasqlQuery.tsx @@ -0,0 +1,134 @@ +import { QueryConfigItemWrapper, QueryConfigLabel, QueryConfigWrapper } from "components/query"; +import { simpleMultiComp } from "comps/generators/multi"; +import { JSONValue } from "../../../util/jsonTypes"; +import { ParamsStringControl } from "../../controls/paramsControl"; +import { dropdownControl } from "@lowcoder-ee/comps/controls/dropdownControl"; +import { QueryResult } from "../queryComp"; +import { QUERY_EXECUTION_ERROR, QUERY_EXECUTION_OK } from "@lowcoder-ee/constants/queryConstants"; +import { getDynamicStringSegments, isDynamicSegment } from "lowcoder-core"; +import alasql from "alasql"; +import { trans } from "i18n"; + +const childrenMap = { + databaseType: dropdownControl( + [ + { label: "Data Query", value: "dataQuery" }, + { label: "Local Database", value: "localDB" }, + ] as const, + "dataQuery" + ), + database: dropdownControl( + [ + { label: "Local Storage", value: "LOCALSTORAGE" }, + { label: "IndexedDB", value: "INDEXEDDB" }, + ] as const, + "LOCALSTORAGE" + ), + sql: ParamsStringControl, +}; + +const AlaSqlTmpQuery = simpleMultiComp(childrenMap); + +// TODO: Support multiple queries +export class AlaSqlQuery extends AlaSqlTmpQuery { + override getView() { + const children = this.children; + const params = [ ...children.sql.getQueryParams() ]; + const databaseType = children.databaseType.getView(); + const selectedDB = children.database.getView(); + const paramsMap: Record = {}; + params.forEach(({key, value}) => { + paramsMap[key] = value(); + }); + + const sqlQuery = children.sql.children.text.unevaledValue.replace(/ +/g, ' '); + const isCreateDBQuery = sqlQuery.toUpperCase().startsWith('CREATE DATABASE'); + + return async (p: { args?: Record }): Promise => { + try { + let result: JSONValue; + const timer = performance.now(); + + if (databaseType === 'localDB' && isCreateDBQuery) { + const updatedQuery = `${sqlQuery.slice(0, 6)} ${selectedDB} ${sqlQuery.slice(6)}`; + const tableName = updatedQuery.split(' ').pop()?.replace(';', ''); + result = alasql(updatedQuery); + result = alasql(`ATTACH ${selectedDB} DATABASE ${tableName};`); + } else { + let segments = getDynamicStringSegments(sqlQuery); + let dataArr: any = []; + segments = segments.map((segment) => { + if (isDynamicSegment(segment)) { + const key = segment.replace('{{','').replace('}}',''); + dataArr.push(paramsMap[key]); + return '?'; + } + return segment; + }) + result = alasql(segments.join(' '), dataArr); + } + + return { + data: result as JSONValue, + code: QUERY_EXECUTION_OK, + success: true, + runTime: Number((performance.now() - timer).toFixed()), + }; + } catch (e) { + return { + success: false, + data: "", + code: QUERY_EXECUTION_ERROR, + message: (e as any).message || "", + }; + } + }; + } + + propertyView(props: { datasourceId: string }) { + return ; + } +} + +const PropertyView = (props: { comp: InstanceType; datasourceId: string }) => { + const { comp } = props; + const { children } = comp; + + return ( + <> + + {trans("query.databaseType")} + + {children.databaseType.propertyView({ + styleName: "medium", + width: "100%", + })} + + + + {children.databaseType.getView() === 'localDB' && ( + + {trans("query.chooseDatabase")} + + {children.database.propertyView({ + styleName: "medium", + width: "100%", + })} + + + )} + + + + {children.sql.propertyView({ + placement: "bottom", + placeholder: "SELECT * FROM users WHERE user_id = {{userId}}::uuid", + styleName: "medium", + language: "sql", + enableMetaCompletion: true, + })} + + + + ); +}; diff --git a/client/packages/lowcoder/src/comps/queries/queryComp.tsx b/client/packages/lowcoder/src/comps/queries/queryComp.tsx index 1937bf289..e90bf8d19 100644 --- a/client/packages/lowcoder/src/comps/queries/queryComp.tsx +++ b/client/packages/lowcoder/src/comps/queries/queryComp.tsx @@ -97,10 +97,25 @@ interface AfterExecuteQueryAction { result: QueryResult; } -const TriggerTypeOptions = [ +const CommonTriggerOptions = [ + { label: trans("query.triggerTypeInputChange"), value: "onInputChange"}, + { label: trans("query.triggerTypeQueryExec"), value: "onQueryExecution"}, + { label: trans("query.triggerTypeTimeout"), value: "onTimeout"}, +] + +export const TriggerTypeOptions = [ + { label: trans("query.triggerTypePageLoad"), value: "onPageLoad"}, + ...CommonTriggerOptions, { label: trans("query.triggerTypeAuto"), value: "automatic" }, { label: trans("query.triggerTypeManual"), value: "manual" }, ] as const; + +export const JSTriggerTypeOptions = [ + ...CommonTriggerOptions, + { label: trans("query.triggerTypePageLoad"), value: "automatic" }, + { label: trans("query.triggerTypeManual"), value: "manual" }, +]; + export type TriggerType = ValueFromOption; const EventOptions = [ @@ -151,6 +166,13 @@ const childrenMap = { }, }), cancelPrevious: withDefault(BoolPureControl, false), + // use only for onQueryExecution trigger + depQueryName: SimpleNameComp, + // use only for onTimeout trigger, triggers query after x time passed on page load + delayTime: millisecondsControl({ + left: 0, + defaultValue: 5 * 1000, + }) }; let QueryCompTmp = withTypeAndChildren>( @@ -174,6 +196,7 @@ export type QueryChildrenType = InstanceType extends MultiB ? X : never; +let blockInputChangeQueries = true; /** * Logic to automatically trigger execution */ @@ -222,11 +245,17 @@ QueryCompTmp = class extends QueryCompTmp { const isJsQuery = this.children.compType.getView() === "js"; const notExecuted = this.children.lastQueryStartTime.getView() === -1; const isAutomatic = getTriggerType(this) === "automatic"; + const isPageLoadTrigger = getTriggerType(this) === "onPageLoad"; + const isInputChangeTrigger = getTriggerType(this) === "onInputChange"; if ( - action.type === CompActionTypes.UPDATE_NODES_V2 && - isAutomatic && - (!isJsQuery || (isJsQuery && notExecuted)) // query which has deps can be executed on page load(first time) + action.type === CompActionTypes.UPDATE_NODES_V2 + && ( + isAutomatic + || isInputChangeTrigger + || (isPageLoadTrigger && notExecuted) + ) + // && (!isJsQuery || (isJsQuery && notExecuted)) // query which has deps can be executed on page load(first time) ) { const next = super.reduce(action); const depends = this.children.comp.node()?.dependValues(); @@ -250,6 +279,18 @@ QueryCompTmp = class extends QueryCompTmp { const dependsChanged = !_.isEqual(preDepends, depends); const dslNotChanged = _.isEqual(preDsl, dsl); + if(isInputChangeTrigger && blockInputChangeQueries && dependsChanged) { + // block executing input change queries initially on page refresh + setTimeout(() => { + blockInputChangeQueries = false; + }, 500) + + return setFieldsNoTypeCheck(next, { + [lastDependsKey]: depends, + [lastDslKey]: dsl, + }); + } + // If the dsl has not changed, but the dependent node value has changed, then trigger the query execution // FIXME, this should be changed to a reference judgement, but for unknown reasons if the reference is modified once, it will change twice. if (dependsChanged) { @@ -277,7 +318,10 @@ function QueryView(props: QueryViewProps) { useEffect(() => { // Automatically load when page load if ( - getTriggerType(comp) === "automatic" && + ( + getTriggerType(comp) === "automatic" + || getTriggerType(comp) === "onPageLoad" + ) && (comp as any).isDepReady && !comp.children.isNewCreate.value ) { @@ -285,6 +329,12 @@ function QueryView(props: QueryViewProps) { comp.dispatch(deferAction(executeQueryAction({}))); }, 300); } + + if(getTriggerType(comp) === "onTimeout") { + setTimeout(() => { + comp.dispatch(deferAction(executeQueryAction({}))); + }, comp.children.delayTime.getView()); + } }, []); useFixedDelay( @@ -292,9 +342,9 @@ function QueryView(props: QueryViewProps) { getPromiseAfterDispatch(comp.dispatch, executeQueryAction({}), { notHandledError: trans("query.fixedDelayError"), }), - getTriggerType(comp) === "automatic" && comp.children.periodic.getView() - ? comp.children.periodicTime.getView() - : null + getTriggerType(comp) === "automatic" && comp.children.periodic.getView() + ? comp.children.periodicTime.getView() + : null ); return null; @@ -609,6 +659,29 @@ export const QueryComp = withExposingConfigs(QueryCompTmp, [ const QueryListTmpComp = list(QueryComp); class QueryListComp extends QueryListTmpComp implements BottomResListComp { + override reduce(action: CompAction): this { + if (isCustomAction(action, "afterExecQuery")) { + if (action.path?.length === 1 && !isNaN(parseInt(action.path[0]))) { + const queryIdx = parseInt(action.path[0]); + const queryComps = this.getView(); + const queryName = queryComps?.[queryIdx]?.children.name.getView(); + const dependentQueries = queryComps.filter((query, idx) => { + if (queryIdx === idx) return false; + if ( + getTriggerType(query) === 'onQueryExecution' + && query.children.depQueryName.getView() === queryName + ) { + return true; + } + }) + dependentQueries?.forEach((query) => { + query.dispatch(deferAction(executeQueryAction({}))); + }) + } + } + return super.reduce(action); + } + nameAndExposingInfo(): NameAndExposingInfo { const result: NameAndExposingInfo = {}; Object.values(this.children).forEach((comp) => { diff --git a/client/packages/lowcoder/src/comps/queries/queryComp/queryPropertyView.tsx b/client/packages/lowcoder/src/comps/queries/queryComp/queryPropertyView.tsx index d71a28470..05c0f939d 100644 --- a/client/packages/lowcoder/src/comps/queries/queryComp/queryPropertyView.tsx +++ b/client/packages/lowcoder/src/comps/queries/queryComp/queryPropertyView.tsx @@ -3,7 +3,6 @@ import { manualTriggerResource, ResourceType } from "@lowcoder-ee/constants/quer import { PreparedStatementConfig } from "api/datasourceApi"; import { isCompWithPropertyView } from "comps/utils/propertyUtils"; import { - LOWCODER_API_ID, QUICK_GRAPHQL_ID, QUICK_REST_API_ID, } from "constants/datasourceConstants"; @@ -27,11 +26,45 @@ import { useSelector } from "react-redux"; import { getDataSource, getDataSourceTypes } from "redux/selectors/datasourceSelectors"; import { BottomResTypeEnum } from "types/bottomRes"; import { EditorContext } from "../../editorState"; -import { QueryComp } from "../queryComp"; +import { JSTriggerTypeOptions, QueryComp, TriggerType, TriggerTypeOptions } from "../queryComp"; import { ResourceDropdown } from "../resourceDropdown"; import { NOT_SUPPORT_GUI_SQL_QUERY, SQLQuery } from "../sqlQuery/SQLQuery"; import { StreamQuery } from "../httpQuery/streamQuery"; import SupaDemoDisplay from "../../utils/supademoDisplay"; +import _ from "lodash"; +import React from "react"; +import styled from "styled-components"; +import { DataSourceButton } from "pages/datasource/pluginPanel"; +import { Tooltip, Divider } from "antd"; +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { InputTypeEnum } from "@lowcoder-ee/comps/comps/moduleContainerComp/ioComp/inputListItemComp"; + +const Wrapper = styled.div` + width: 100%; + padding: 16px; + background-color: white; + + .section-title { + font-size: 13px; + line-height: 1.5; + color: grey; + margin-bottom: 12px; + } + + .section { + margin-bottom: 12px; + + &:last-child { + margin-bottom: 0px; + } + } +`; + +const ComponentListWrapper = styled.div` + display: flex; + flex-wrap: wrap; + gap: 8px; +`; export function QueryPropertyView(props: { comp: InstanceType }) { const { comp } = props; @@ -129,6 +162,12 @@ export function QueryPropertyView(props: { comp: InstanceType })} + + + + + + ), }, @@ -188,26 +227,41 @@ export const QueryGeneralPropertyView = (props: { comp.children.datasourceId.dispatchChangeValueAction(QUICK_REST_API_ID); } - // transfer old Lowcoder API datasource to new - const oldLowcoderId = useMemo( - () => - datasource.find( - (d) => - d.datasource.creationSource === 2 && OLD_LOWCODER_DATASOURCE.includes(d.datasource.type) - )?.datasource.id, - [datasource] - ); - if (datasourceId === oldLowcoderId) { - datasourceId = LOWCODER_API_ID; - datasourceType = "lowcoderApi"; - dispatch( - comp.changeValueAction({ - ...comp.toJsonValue(), - datasourceId: LOWCODER_API_ID, - compType: "lowcoderApi", - } as any) - ); - } + const triggerOptions = useMemo(() => { + if (datasourceType === "js" || datasourceType === "streamApi") { + return JSTriggerTypeOptions; + } + return TriggerTypeOptions; + }, [datasourceType]); + + const getQueryOptions = useMemo(() => { + const options: { label: string; value: string }[] = + editorState + ?.queryCompInfoList() + .map((info) => ({ + label: info.name, + value: info.name, + })) + .filter((option) => { + // Filter out the current query under query + if (editorState.selectedBottomResType === BottomResTypeEnum.Query) { + return option.value !== editorState.selectedBottomResName; + } + return true; + }) || []; + + // input queries + editorState + ?.getModuleLayoutComp() + ?.getInputs() + .forEach((i) => { + const { name, type } = i.getView(); + if (type === InputTypeEnum.Query) { + options.push({ label: name, value: name }); + } + }); + return options; + }, [editorState]); return ( @@ -312,26 +366,38 @@ export const QueryGeneralPropertyView = (props: { {placement === "editor" && ( - - children.triggerType.dispatchChangeValueAction(value)} - /> - + <> + + children.triggerType.dispatchChangeValueAction(value as TriggerType)} + /> + + {children.triggerType.getView() === 'onQueryExecution' && ( + + children.depQueryName.dispatchChangeValueAction(value)} + /> + + )} + {children.triggerType.getView() === 'onTimeout' && ( + + {children.delayTime.propertyView({ + label: trans("query.delayTime"), + placeholder: "5s", + placement: "bottom", + })} + + )} + )} @@ -435,6 +501,230 @@ export const QueryGeneralPropertyView = (props: { ); }; +function findQueryInNestedStructure( + structure: any, + queryName: string, + visited = new Set() +) : boolean { + if (typeof structure === "object" && structure !== null) { + if (visited.has(structure)) { + return false; + } + visited.add(structure); + } + + if (typeof structure === "string") { + // Regex to match query name in handlebar-like expressions + const regex = new RegExp( + `{{\\s*[!?]?(\\s*${queryName}\\b(\\.[^}\\s]*)?\\s*)(\\?[^}:]*:[^}]*)?\\s*}}` + ); + return regex.test(structure); + } + + if (typeof structure === "object" && structure !== null) { + // Recursively check all properties of the object + return Object.values(structure).some((value) => + findQueryInNestedStructure(value, queryName, visited) + ); + } + return false; +} + +function collectComponentsUsingQuery(comps: any, queryName: string) { + + // Select all active components + const components = Object.values(comps); + + // Filter components that reference the query by name + const componentsUsingQuery = components.filter((component: any) => { + return findQueryInNestedStructure(component.children, queryName); + }); + + return componentsUsingQuery; +} + +// this function we use to gather informations of the places where a Data Query is used. +function collectQueryUsageDetails(component: any, queryName: string): any[] { + const results: any[] = []; + const visited = new WeakSet(); // Track visited objects to avoid circular references + + function traverse(node: any, path: string[] = []): boolean { + + if (!node || typeof node !== "object") { return false; } + // Avoid circular references + if ( visited.has(node)) { return false; } + else { visited.add(node); } + + // Check all properties of the current node + for (const [key, value] of Object.entries(node)) { + const currentPath = [...path, key]; + if (typeof value === "string" && !key.includes("__") && key != "exposingValues" && key != "ref" && key != "version" && key != "prevContextVal") { + // Check if the string contains the query + const regex = new RegExp(`{{\\s*[!?]?(\\s*${queryName}\\b(\\.[^}\\s]*)?\\s*)(\\?[^}:]*:[^}]*)?\\s*}}`); + const entriesToRemove = ["children", "comp", "unevaledValue", "value"]; + if (regex.test(value)) { + console.log("tester",component.children); + results.push({ + componentType: component.children.compType?.value || "Unknown Component", + componentName: component.children.name?.value || "Unknown Component", + path: currentPath.filter(entry => !entriesToRemove.includes(entry)).join(" > "), + value, + }); + return true; // Stop traversal of this branch + } + } else if (typeof value === "object" && !key.includes("__") && key != "exposingValues" && key != "ref" && key != "version" && key != "prevContextVal") { + // Traverse deeper only through selected properties. + traverse(value, currentPath); + } + } + return false; // Continue traversal if no match is found + } + + traverse(component); + return results; +} + +function buildQueryUsageDataset(components: any[], queryName: string): any[] { + const dataset: any[] = []; + const visitedComponents = new WeakSet(); // Prevent revisiting components + for (const component of components) { + if (visitedComponents.has(component.children.name)) { + continue; + } + visitedComponents.add(component.children.name); + const usageDetails = collectQueryUsageDetails(component, queryName); + dataset.push(...usageDetails); + } + + return dataset; +} + + +const ComponentButton = (props: { + componentType: string; + componentName: string; + path: string; + value: string; + onSelect: (componentType: string, componentName: string, path: string) => void; +}) => { + const handleClick = () => { + props.onSelect(props.componentType, props.componentName, props.path); + }; + + // Retrieve the component's icon from the registry + const Icon = uiCompRegistry[props.componentType]?.icon; + + return ( + + +
+
+ {Icon && ( + + )} +
+
+
+ {props.componentName?.length > 100 + ? `${props.componentName.slice(0, 100)}...` + : props.componentName} +
+
+ {props.componentType?.length > 100 + ? `${props.componentType.slice(0, 100)}...` + : props.componentType} +
+
+
+ + + ); +}; + +export function ComponentUsagePanel(props: { + components: { componentType: string, componentName: string; path: string; value: string }[]; + onSelect: (componentType: string, componentName: string, path: string) => void; +}) { + const { components, onSelect } = props; + + return ( + +
{trans("query.componentsUsingQuery")}
+
+ + {components.map((component, idx) => ( + + ))} + +
+ + ); +} + +// a usage display to show which components make use of this query +export const QueryUsagePropertyView = (props: { + comp: InstanceType; + placement?: PageType; +}) => { + const { comp, placement = "editor" } = props; + const editorState = useContext(EditorContext); + const queryName = comp.children.name.getView(); + const componentsUsingQuery = collectComponentsUsingQuery(editorState.getAllUICompMap(), queryName); + + const usageObjects = buildQueryUsageDataset(componentsUsingQuery, queryName); + + const handleSelect = (componentType: string,componentName: string, path: string) => { + editorState.setSelectedCompNames(new Set([componentName])); + // console.log(`Selected Component: ${componentName}, Path: ${path}`); + }; + + if (usageObjects.length > 0) { + return ( + <> + + + + {trans("query.componentsUsingQueryTitle")} + + + + + ); + } else { + return
; + } + +}; + + function useDatasourceStatus(datasourceId: string, datasourceType: ResourceType) { const datasource = useSelector(getDataSource); const datasourceTypes = useSelector(getDataSourceTypes); @@ -444,9 +734,9 @@ function useDatasourceStatus(datasourceId: string, datasourceType: ResourceType) datasourceType === "js" || datasourceType === "streamApi" || datasourceType === "libraryQuery" || + datasourceType === "alasql" || datasourceId === QUICK_REST_API_ID || - datasourceId === QUICK_GRAPHQL_ID || - datasourceId === LOWCODER_API_ID + datasourceId === QUICK_GRAPHQL_ID ) { return ""; } diff --git a/client/packages/lowcoder/src/comps/queries/resourceDropdown.tsx b/client/packages/lowcoder/src/comps/queries/resourceDropdown.tsx index e71ecb5aa..3907a3d92 100644 --- a/client/packages/lowcoder/src/comps/queries/resourceDropdown.tsx +++ b/client/packages/lowcoder/src/comps/queries/resourceDropdown.tsx @@ -13,8 +13,6 @@ import { getBottomResIcon } from "@lowcoder-ee/util/bottomResUtils"; import { trans } from "i18n"; import { DatasourceType, ResourceType } from "@lowcoder-ee/constants/queryConstants"; import { - LOWCODER_API_ID, - LOWCODER_API_INFO, QUICK_GRAPHQL_ID, QUICK_REST_API_ID, } from "constants/datasourceConstants"; @@ -104,9 +102,9 @@ const QuickGraphqlValue: ResourceOptionValue = { type: "graphql", }; -const LowcoderAPIValue: ResourceOptionValue = { - id: LOWCODER_API_ID, - type: "lowcoderApi", +const QuickAlasqlValue: ResourceOptionValue = { + id: "", + type: "alasql", }; interface ResourceDropdownProps { @@ -272,6 +270,17 @@ export const ResourceDropdown = (props: ResourceDropdownProps) => { {trans("query.quickStreamAPI")} + + + + {getBottomResIcon("restApi")} + {trans("query.quickAlasql")} + + { {context?.placement !== "queryLibrary" && ( <> - - - {LOWCODER_API_INFO.icon} - {LOWCODER_API_INFO.name} - - - = Comp>( return "propertyView" in comp && typeof (comp as any)["propertyView"] === "function"; } +export const showDataLoadingIndicatorsPropertyView = ( + children: {showDataLoadingIndicators: InstanceType } +) => + children.showDataLoadingIndicators.propertyView({ label: trans("themeDetail.showDataLoadingIndicators") }); + export const hiddenPropertyView = (children: { hidden: InstanceType }) => children.hidden.propertyView({ label: trans("prop.hide") }); @@ -99,24 +104,49 @@ export const showLabelPropertyView = (children: { showLabel: InstanceType }; + children: { + format: InstanceType, + inputFormat: InstanceType + }; placeholder?: string; -}) => - params.children.format.propertyView({ - label: trans("date.format"), - placeholder: params.placeholder, - tooltip: ( - <> - {trans("date.reference")}   - - dayjs format - - - ), - }); // FIXME: need verification +}) => { + return [ + params.children.format.propertyView({ + label: trans("date.format"), + placeholder: params.placeholder, + tooltip: ( + <> + {trans("date.reference")}   + + dayjs format + + + ), + }), // FIXME: need verification + params.children.inputFormat.propertyView({ + label: trans("date.inputFormat"), + placeholder: params.placeholder, + tooltip: ( + <> + {trans("date.reference")}   + + dayjs format + + + ), + }) + ] +} + diff --git a/client/packages/lowcoder/src/constants/datasourceConstants.ts b/client/packages/lowcoder/src/constants/datasourceConstants.ts index 71f014765..640fee1af 100644 --- a/client/packages/lowcoder/src/constants/datasourceConstants.ts +++ b/client/packages/lowcoder/src/constants/datasourceConstants.ts @@ -15,6 +15,7 @@ export const databasePlugins: Partial[] = [ "clickHouse", "snowflake", "mariadb", + "alasql", ]; export const apiPluginsForQueryLibrary: Partial[] = [ @@ -42,9 +43,4 @@ export interface Datasource { export const QUICK_REST_API_ID = "#QUICK_REST_API"; export const QUICK_GRAPHQL_ID = "#QUICK_GRAPHQL"; -export const LOWCODER_API_ID = "#LOWCODER_API"; -export const LOWCODER_API_INFO = { - icon: getBottomResIcon("lowcoderApi"), - name: trans("query.lowcoderAPI"), -}; export const OLD_LOWCODER_DATASOURCE: Partial[] = []; diff --git a/client/packages/lowcoder/src/constants/libConstants.ts b/client/packages/lowcoder/src/constants/libConstants.ts index 0820cf01c..cff4ded40 100644 --- a/client/packages/lowcoder/src/constants/libConstants.ts +++ b/client/packages/lowcoder/src/constants/libConstants.ts @@ -1 +1 @@ -export const libNames = new Set(["uuid", "numbro", "Papa", "supabase"]); +export const libNames = new Set(["uuid", "numbro", "Papa", "supabase", "alasql"]); diff --git a/client/packages/lowcoder/src/constants/publicApp.ts b/client/packages/lowcoder/src/constants/publicApp.ts new file mode 100644 index 000000000..410d60475 --- /dev/null +++ b/client/packages/lowcoder/src/constants/publicApp.ts @@ -0,0 +1,136 @@ +export const PUBLIC_APP_ID = "public_app"; +export const PUBLIC_APP_ORG_ID = "645b53eb86b4c862d8ae0fb9"; + +export const publicAppResponse = { + status: 200, + statusText: 'OK', + headers: {}, + config: { + headers: {} as any, + }, + data: { + code: 1, + success: true, + message: "", + data: { + orgCommonSettings: undefined, + applicationDSL: { + "ui": { + "compType": "normal", + "comp": {} + }, + "refTree": { + "value": "" + }, + "hooks": [ + { + "compType": "urlParams", + "comp": {}, + "name": "url" + }, + { + "compType": "dayJsLib", + "comp": {}, + "name": "dayjs" + }, + { + "compType": "lodashJsLib", + "comp": {}, + "name": "_" + }, + { + "compType": "utils", + "comp": {}, + "name": "utils" + }, + { + "compType": "message", + "comp": {}, + "name": "message" + }, + { + "compType": "toast", + "comp": {}, + "name": "toast" + }, + { + "compType": "localStorage", + "comp": {}, + "name": "localStorage" + }, + { + "compType": "currentUser", + "comp": {}, + "name": "currentUser" + }, + { + "compType": "screenInfo", + "comp": {}, + "name": "screenInfo" + }, + { + "compType": "theme", + "comp": {}, + "name": "theme" + } + ], + "settings": { + "title": "", + "description": "", + "category": "Business", + "showHeaderInPublic": true, + "themeId": "default", + "preventAppStylesOverwriting": true, + "disableCollision": false, + "lowcoderCompVersion": "latest", + "maxWidth": { + "dropdown": "1920", + "input": 0 + }, + "gridRowCount": "Infinity", + "gridPaddingX": "20", + "gridPaddingY": "20" + }, + "preload": { + "script": "", + "css": "", + "globalCSS": "" + } + }, + moduleDSL: {}, + applicationInfoView: { + "orgId": "", + "applicationId": PUBLIC_APP_ID, + "name": "Public App", + "createAt": 1735651262539, + "createBy": "", + "role": "owner", + "applicationType": 1, + "applicationStatus": "NORMAL", + "folderId": '', + "lastViewTime": 0, + "lastModifyTime": 1735747724691, + "lastEditedAt": 1735737886323, + "folder": false, + "extra": {}, + "editingUserId": "", + }, + } + } +}; + +export const publicAppJSDatasourceResponse = { + status: 200, + statusText: 'OK', + headers: {}, + config: { + headers: {} as any, + }, + data: { + code: 1, + data: [], + message: "", + success: true, + total: 0, + } +}; \ No newline at end of file diff --git a/client/packages/lowcoder/src/constants/queryConstants.ts b/client/packages/lowcoder/src/constants/queryConstants.ts index 490190dab..be78de0d6 100644 --- a/client/packages/lowcoder/src/constants/queryConstants.ts +++ b/client/packages/lowcoder/src/constants/queryConstants.ts @@ -3,7 +3,6 @@ import { SQLQuery } from "../comps/queries/sqlQuery/SQLQuery"; import { HttpQuery } from "../comps/queries/httpQuery/httpQuery"; import { StreamQuery } from "../comps/queries/httpQuery/streamQuery"; import { MongoQuery } from "../comps/queries/mongoQuery"; -import { LowcoderQuery } from "../comps/queries/lowcoderQuery"; import { RedisQuery } from "../comps/queries/redisQuery"; import { EsQuery } from "../comps/queries/esQuery"; import { SMTPQuery } from "../comps/queries/smtpQuery"; @@ -14,6 +13,7 @@ import { GraphqlQuery } from "../comps/queries/httpQuery/graphqlQuery"; import { toPluginQuery } from "comps/queries/pluginQuery/pluginQuery"; import { MultiCompConstructor } from "lowcoder-core"; import { DataSourcePluginMeta } from "lowcoder-sdk/dataSource"; +import { AlaSqlQuery } from "@lowcoder-ee/comps/queries/httpQuery/alasqlQuery"; export type DatasourceType = | "mysql" @@ -21,7 +21,6 @@ export type DatasourceType = | "restApi" | "streamApi" | "postgres" - | "lowcoderApi" | "redis" | "es" | "mssql" @@ -31,18 +30,19 @@ export type DatasourceType = | "googleSheets" | "graphql" | "snowflake" - | "mariadb"; + | "mariadb" + | "alasql"; export type ResourceType = DatasourceType | "js" | "libraryQuery" | "view"; export const QueryMap = { js: JSQuery, mysql: SQLQuery, + alasql: AlaSqlQuery, restApi: HttpQuery, streamApi: StreamQuery, mongodb: MongoQuery, postgres: SQLQuery, - lowcoderApi: LowcoderQuery, redis: RedisQuery, es: EsQuery, mssql: SQLQuery, diff --git a/client/packages/lowcoder/src/constants/routesURL.ts b/client/packages/lowcoder/src/constants/routesURL.ts index 38ae03943..6931a1d74 100644 --- a/client/packages/lowcoder/src/constants/routesURL.ts +++ b/client/packages/lowcoder/src/constants/routesURL.ts @@ -49,6 +49,7 @@ export const FOLDERS_URL = `/folders`; export const TRASH_URL = `/trash`; export const IMPORT_APP_FROM_TEMPLATE_URL = `${ALL_APPLICATIONS_URL}/template-import/:templateId`; export const APP_EDITOR_URL = `${ALL_APPLICATIONS_URL}/:applicationId/:viewMode/:appPageId?`; +export const PUBLIC_APP_EDITOR_URL = `/editor/public`; export const AUTH_BIND_URL = `${USER_AUTH_URL}/bind`; export const AUTH_LOGIN_URL = `${USER_AUTH_URL}/login`; diff --git a/client/packages/lowcoder/src/constants/themeConstants.ts b/client/packages/lowcoder/src/constants/themeConstants.ts index 144486380..052389f18 100644 --- a/client/packages/lowcoder/src/constants/themeConstants.ts +++ b/client/packages/lowcoder/src/constants/themeConstants.ts @@ -28,6 +28,7 @@ const theme = { animationIterationCount: "", showComponentLoadingIndicators: true, showDataLoadingIndicators: true, + dataLoadingIndicatpr: 'spinner', gridBgImageSize: "cover", gridBgImagePosition: "center", gridBgImageRepeat: "no-repeat", diff --git a/client/packages/lowcoder/src/global.ts b/client/packages/lowcoder/src/global.ts index 2a57ab990..8c347d4d0 100644 --- a/client/packages/lowcoder/src/global.ts +++ b/client/packages/lowcoder/src/global.ts @@ -9,5 +9,6 @@ declare global { numbro: any; Papa: any; uuid: any; + alasql: any; } } diff --git a/client/packages/lowcoder/src/i18n/locales/de.ts b/client/packages/lowcoder/src/i18n/locales/de.ts index 6678a6846..f1ca16ac3 100644 --- a/client/packages/lowcoder/src/i18n/locales/de.ts +++ b/client/packages/lowcoder/src/i18n/locales/de.ts @@ -585,6 +585,60 @@ export const de = { "siderBackgroundImageOrigin": "Sider Hintergrundbild Ursprung", "activeBackground": "Aktive Hintergrundfarbe", "labelBackground": "Hintergrundfarbe des Etiketts", + + "radiusTip": "Legt den Radius der Ecken des Elements fest. Beispiel: 5px, 50% oder 1em.", + "gapTip": "Legt den Abstand zwischen Zeilen und Spalten in einem Raster- oder Flexcontainer fest. Beispiel: 10px, 1rem oder 5%.", + "cardRadiusTip": "Definiert den Eckenradius für Kartenkomponenten. Beispiel: 10px, 15px.", + "borderWidthTip": "Legt die Breite des Randes des Elements fest. Beispiel: 1px, 0.5em oder dünn.", + "borderStyleTip": "Legt den Stil des Randes fest. Beispiel: solid, dashed, dotted oder none.", + "marginTip": "Definiert den äußeren Abstand um ein Element. Beispiel: 10px, 2em oder auto. Kann kombiniert werden: 0px 20px oder für alle 4 Seiten: 0px 1px 5px 2px.", + "directionTip": "Legt die Richtung des Layouts fest. Beispiel: row, column oder row-reverse.", + "detailSizeTip": "Definiert die Größe bestimmter Details im Layout. Beispiel: 10px, 2em oder 80%.", + "chartOpacityTip": "Legt die Deckkraft des Diagramms fest. Beispiel: 1 (undurchsichtig), 0.5 (50% transparent).", + "chartBoxShadowTip": "Definiert den Schatten, den das Diagramm wirft. Beispiel: 0px 4px 8px rgba(0, 0, 0, 0.3).", + "chartBorderStyleTip": "Legt den Stil der Diagrammrand fest. Beispiel: solid, dashed oder dotted.", + "chartBorderRadiusTip": "Definiert den Eckenradius der Diagrammgrenze. Beispiel: 10px, 20%.", + "chartBorderWidthTip": "Legt die Breite der Diagrammgrenze fest. Beispiel: 2px, 0.5em.", + "chartTextSizeTip": "Legt die Schriftgröße des Diagrammtexts fest. Beispiel: 16px, 1em, 120%.", + "chartTextWeightTip": "Legt die Schriftstärke des Diagrammtexts fest. Beispiel: normal, bold oder 700.", + "chartFontFamilyTip": "Legt die Schriftart für den Diagrammtext fest. Beispiel: Arial, Helvetica oder 'Times New Roman'.", + "chartFontStyleTip": "Legt den Schriftstil des Diagrammtexts fest. Beispiel: normal, italic oder oblique.", + "animationIterationCountTip": "Legt fest, wie oft eine Animation ausgeführt werden soll. Beispiel: infinite, 1 oder 3.", + "opacityTip": "Legt den Transparenzgrad des Elements fest. Beispiel: 1 (undurchsichtig), 0.5 (50% transparent), 0 (unsichtbar).", + "boxShadowColorTip": "Legt die Farbe des Schattens fest. Beispiel: rgba(0, 0, 0, 0.3), #FF5733.", + "chartBackgroundColorTip": "Legt die Hintergrundfarbe des Diagramms fest. Beispiel: #FFFFFF, rgba(255, 255, 255, 0.8).", + "chartGradientColorTip": "Definiert die Farbverläufe für den Diagrammhintergrund. Beispiel: linear-gradient(to right, #ff7e5f, #feb47b).", + "chartShadowColorTip": "Legt die Schattenfarbe des Diagramms fest. Beispiel: rgba(0, 0, 0, 0.2), #333333.", + "chartBorderColorTip": "Definiert die Farbe der Diagrammgrenze. Beispiel: #000000, rgba(0, 0, 0, 0.5).", + "chartTextColorTip": "Legt die Farbe des Diagrammtexts fest. Beispiel: #333333, rgba(51, 51, 51, 1).", + "boxShadowTip": "Definiert den Schatten, der von einem Element geworfen wird. Beispiel: 0px 4px 8px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(255, 255, 255, 0.5).", + "animationDelayTip": "Legt die Verzögerung vor Beginn der Animation fest. Beispiel: 1s, 500ms, 0.", + "animationDurationTip": "Legt die Dauer der Animation fest. Beispiel: 2s, 3s, 500ms.", + "paddingTip": "Definiert den inneren Abstand innerhalb eines Elements. Beispiel: 10px, 2em, 5%. Kann kombiniert werden: 0px 20px oder für alle 4 Seiten: 10px 21px 5px 20px.", + "containerHeaderPaddingTip": "Definiert den Innenabstand für den Container-Header. Beispiel: 10px, 1rem.", + "containerSiderPaddingTip": "Definiert den Innenabstand für die Container-Seitenleiste. Beispiel: 8px, 1em.", + "containerFooterPaddingTip": "Definiert den Innenabstand für den Container-Footer. Beispiel: 12px, 1rem.", + "containerBodyPaddingTip": "Definiert den Innenabstand für den Container-Body. Beispiel: 15px, 2em.", + "textSizeTip": "Legt die Schriftgröße des Textes fest. Beispiel: 14px, 1.2em, 110%.", + "textWeightTip": "Definiert die Schriftstärke des Textes. Beispiel: normal, bold, 400.", + "fontFamilyTip": "Legt die Schriftart des Textes fest. Beispiel: Arial, Verdana, 'Courier New'.", + "textDecorationTip": "Definiert die Verzierung des Textes. Beispiel: underline, line-through, none.", + "textTransformTip": "Legt die Groß- und Kleinschreibung des Textes fest. Beispiel: uppercase, lowercase, capitalize.", + "fontStyleTip": "Definiert den Schriftstil des Textes. Beispiel: normal, italic, oblique.", + "backgroundImageTip": "Legt das Hintergrundbild eines Elements fest. Beispiel: url('image.jpg'), linear-gradient(to right, #ff7e5f, #feb47b).", + "headerBackgroundImageTip": "Legt das Hintergrundbild des Headers fest. Beispiel: url('header.jpg').", + "footerBackgroundImageTip": "Legt das Hintergrundbild des Footers fest. Beispiel: url('footer.jpg').", + "backgroundImageRepeatTip": "Definiert, wie das Hintergrundbild wiederholt wird. Beispiel: no-repeat, repeat-x, repeat-y.", + "headerBackgroundImageRepeatTip": "Definiert, wie das Header-Hintergrundbild wiederholt wird. Beispiel: repeat-x, no-repeat.", + "footerBackgroundImageRepeatTip": "Definiert, wie das Footer-Hintergrundbild wiederholt wird. Beispiel: repeat-y, no-repeat.", + "backgroundImageSizeTip": "Definiert die Größe des Hintergrundbilds. Beispiel: cover, contain, 50% 50%.", + "backgroundImagePositionTip": "Legt die Position des Hintergrundbilds fest. Beispiel: center, top right, 10% 20%.", + "backgroundImageOriginTip": "Legt den Bereich fest, in dem das Hintergrundbild positioniert wird. Beispiel: padding-box, border-box, content-box.", + "headerBackgroundImageOriginTip": "Legt den Bereich fest, in dem das Header-Hintergrundbild positioniert wird. Beispiel: padding-box, border-box, content-box.", + "footerBackgroundImageOriginTip": "Legt den Bereich fest, in dem das Footer-Hintergrundbild positioniert wird. Beispiel: padding-box, border-box, content-box.", + "rotationTip": "Legt den Rotationswinkel des Elements fest. Beispiel: 45deg, 90deg, -180deg.", + "lineHeightTip": "Legt die Höhe einer Textzeile fest. Beispiel: 1.5, 2, 120%." + }, "export": { ...en.export, @@ -683,9 +737,13 @@ export const de = { "importFromQueryLibrary": "von Abfragebibliothek", "importFromFile": "Aus Datei importieren", "triggerType": "Ausgelöst, wenn...", - "triggerTypeAuto": "Wenn sich Eingaben in der App ändern oder beim Laden der Seite", - "triggerTypePageLoad": "Wenn die Anwendung (Seite) geladen wird", - "triggerTypeManual": "Nur Manuell auslösen", + "triggerTypeAuto": "Eingaben ändern sich oder beim Laden der Seite", + "triggerTypePageLoad": "Beim Laden der Anwendung (Seite)", + "triggerTypeManual": "Manuell auslösen", + "triggerTypeInputChange": "Wenn sich Eingaben ändern", + "triggerTypeQueryExec": "Nach Ausführung einer Daten-Abfrage", + "triggerTypeTimeout": "Nach dem Laden der Anwendung (Seite) und Timeout", + "delayTime": "Verzögerungszeit", "chooseDataSource": "Datenquelle wählen", "method": "Methode", "updateExceptionDataSourceTitle": "Fehlerhafte Datenquelle aktualisieren", @@ -1829,6 +1887,7 @@ export const de = { "onlyMenu": "Anzeige nur mit Etikett", "textDesc": "Derzeit auf der Schaltfläche angezeigter Text", + "triggerMode": "Triggermodus" }, "textShow": { ...en.textShow, @@ -1934,7 +1993,8 @@ export const de = { "defaultButton": "Standard", "type": "Typ", "tableSize": "Tabelle Größe", - "hideHeader": "Tabellenüberschrift ausblenden", + "hideHeader": "Tabellenkopfzeile ausblenden", + "hideToolbar" : "Tabellenfußzeile ausblenden", "fixedHeader": "Feste Tabellenüberschrift", "fixedHeaderTooltip": "Kopfzeile wird für vertikal scrollbare Tabelle fixiert", "fixedToolbar": "Feste Symbolleiste", @@ -2660,7 +2720,9 @@ export const de = { "gridColumnsDesc": "Standardanzahl von Spalten, welcher für den Canvas verwendet wird", "loadingIndicators": "Ladeindikatoren", "showComponentLoadingIndicators": "Ladeindikatoren beim Laden einer Komponente anzeigen", - "showDataLoadingIndicators": "Ladeindikatoren beim Laden von Daten anzeigen", + "showDataLoadingIndicators": "Zeige Ladeindikatoren während des Ladens von Daten", + "showIndicatorsDuringDataLoading": "Zeige Indikatoren während des Datenladens", + "dataLoadingIndicator": "Daten-Ladeindikator" }, "pluginSetting": { ...en.pluginSetting, diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts index 71d619e91..399bb3b87 100644 --- a/client/packages/lowcoder/src/i18n/locales/en.ts +++ b/client/packages/lowcoder/src/i18n/locales/en.ts @@ -139,7 +139,7 @@ export const en = { "pluginListTitle": "Plugins", "emptyModules": "Modules are reusable Mikro-Apps. You can embed them in your App.", "searchNotFound": "Can't find the right component?", - "emptyPlugins": "No Plugins Added", + "emptyPlugins": "No plugins added yet. Add npm plugins to enhance your project.", "contactUs": "Contact Us", "issueHere": "here.", "folderListTitle": "Folders" @@ -231,6 +231,7 @@ export const en = { "color": "Color", "horizontalGridCells": "Horizontal Grid Cells", "timeZone": "TimeZone", + "pickerMode": "Picker Mode", }, "autoHeightProp": { "auto": "Auto", @@ -583,7 +584,61 @@ export const en = { "chartGradientColor": "Gradient Color", "chartShadowColor": "Shadow Color", "chartBorderColor": "Border Color", - "chartTextColor": "Text Color" + "chartTextColor": "Text Color", + "detailSize": "Detail Size", + + "radiusTip": "Specifies the radius of the element's corners. Example: 5px, 50%, or 1em.", + "gapTip": "Specifies the gap between rows and columns in a grid or flex container. Example: 10px, 1rem, or 5%.", + "cardRadiusTip": "Defines the corner radius for card components. Example: 10px, 15px.", + "borderWidthTip": "Specifies the width of the element's border. Example: 1px, 0.5em, or thin.", + "borderStyleTip": "Sets the style of the border. Example: solid, dashed, dotted, or none.", + "marginTip": "Defines the outer margin space around an element. Example: 10px, 2em, or auto. Also you can combine it like: 0px 20px. Or even separate for all 4 directions like: 0px 1px 5px 2px", + "directionTip": "Specifies the direction of the layout. Example: row, column, or row-reverse.", + "detailSizeTip": "Defines the size of specific details in the layout. Example: 10px, 2em, or 80%.", + "chartOpacityTip": "Specifies the opacity of the chart. Example: 1 (opaque), 0.5 (50% transparent).", + "chartBoxShadowTip": "Defines the shadow cast by the chart's box. Example: 0px 4px 8px rgba(0, 0, 0, 0.3).", + "chartBorderStyleTip": "Sets the style of the chart's border. Example: solid, dashed, dotted.", + "chartBorderRadiusTip": "Specifies the corner radius of the chart's border. Example: 10px, 20%.", + "chartBorderWidthTip": "Specifies the width of the chart's border. Example: 2px, 0.5em.", + "chartTextSizeTip": "Specifies the font size for chart text. Example: 16px, 1em, or 120%.", + "chartTextWeightTip": "Specifies the font weight for chart text. Example: normal, bold, or 700.", + "chartFontFamilyTip": "Specifies the font family for chart text. Example: Arial, Helvetica, or 'Times New Roman'.", + "chartFontStyleTip": "Specifies the font style for chart text. Example: normal, italic, or oblique.", + "animationIterationCountTip": "Defines how many times an animation should run. Example: infinite, 1, or 3.", + "opacityTip": "Sets the transparency level of the element. Example: 1 (opaque), 0.5 (50% transparent), or 0 (invisible).", + "boxShadowColorTip": "Defines the color of the box shadow. Example: rgba(0, 0, 0, 0.3), #FF5733.", + "chartBackgroundColorTip": "Sets the background color of the chart. Example: #FFFFFF, rgba(255, 255, 255, 0.8).", + "chartGradientColorTip": "Specifies the gradient colors for the chart background. Example: linear-gradient(to right, #ff7e5f, #feb47b).", + "chartShadowColorTip": "Defines the color of the chart's shadow. Example: rgba(0, 0, 0, 0.2), #333333.", + "chartBorderColorTip": "Specifies the color of the chart's border. Example: #000000, rgba(0, 0, 0, 0.5).", + "chartTextColorTip": "Sets the color of the chart's text. Example: #333333, rgba(51, 51, 51, 1).", + "boxShadowTip": "Defines the shadow cast by an element's box. Example: 0px 4px 8px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(255, 255, 255, 0.5).", + "animationDelayTip": "Specifies the delay before the animation starts. Example: 1s, 500ms, 0.", + "animationDurationTip": "Sets the duration of the animation. Example: 2s, 3s, 500ms.", + "paddingTip": "Defines the inner padding space inside an element. Example: 10px, 2em, 5%. Also you can combine it like: 0px 20px. Or even separate for all 4 directions like: 10px 21px 5px 20px", + "containerHeaderPaddingTip": "Defines the padding for the container header. Example: 10px, 1rem. Also you can combine it like: 0px 20px. Or even separate for all 4 directions like: 10px 21px 5px 20px", + "containerSiderPaddingTip": "Defines the padding for the container sider. Example: 8px, 1em. Also you can combine it like: 0px 20px. Or even separate for all 4 directions like: 10px 21px 5px 20px", + "containerFooterPaddingTip": "Defines the padding for the container footer. Example: 12px, 1rem. Also you can combine it like: 0px 20px. Or even separate for all 4 directions like: 10px 21px 5px 20px", + "containerBodyPaddingTip": "Defines the padding for the container body. Example: 15px, 2em. Also you can combine it like: 0px 20px. Or even separate for all 4 directions like: 10px 21px 5px 20px", + "textSizeTip": "Specifies the font size of the text. Example: 14px, 1.2em, 110%.", + "textWeightTip": "Specifies the font weight of the text. Example: normal, bold, 400.", + "fontFamilyTip": "Specifies the font family of the text. Example: Arial, Verdana, 'Courier New'.", + "textDecorationTip": "Defines the decoration of the text. Example: underline, line-through, none.", + "textTransformTip": "Specifies the capitalization of the text. Example: uppercase, lowercase, capitalize.", + "fontStyleTip": "Sets the font style of the text. Example: normal, italic, oblique.", + "backgroundImageTip": "Specifies the background image of an element. Example: url('image.jpg'), linear-gradient(to right, #ff7e5f, #feb47b).", + "headerBackgroundImageTip": "Specifies the background image for the header. Example: url('header.jpg').", + "footerBackgroundImageTip": "Specifies the background image for the footer. Example: url('footer.jpg').", + "backgroundImageRepeatTip": "Defines how the background image is repeated. Example: no-repeat, repeat-x, repeat-y.", + "headerBackgroundImageRepeatTip": "Defines how the header background image is repeated. Example: repeat-x, no-repeat.", + "footerBackgroundImageRepeatTip": "Defines how the footer background image is repeated. Example: repeat-y, no-repeat.", + "backgroundImageSizeTip": "Defines the size of the background image. Example: cover, contain, 50% 50%.", + "backgroundImagePositionTip": "Defines the position of the background image. Example: center, top right, 10% 20%.", + "backgroundImageOriginTip": "Specifies the positioning area of the header's background image. Example: padding-box, border-box, content-box.", + "headerBackgroundImageOriginTip": "Specifies the positioning area of the header's background image. Example: padding-box, border-box, content-box.", + "footerBackgroundImageOriginTip": "Specifies the positioning area of the footer's background image. Example: padding-box, border-box, content-box.", + "rotationTip": "Specifies the rotation angle of the element. Example: 45deg, 90deg, -180deg.", + "lineHeightTip": "Sets the height of a line of text. Example: 1.5, 2, 120%." }, "export": { "hiddenDesc": "If true, the component is hidden", @@ -676,6 +731,9 @@ export const en = { "quickRestAPI": "REST Query", "quickStreamAPI": "Stream Query", "quickGraphql": "GraphQL Query", + "quickAlasql": "Local SQL Query", + "databaseType": "Database Type", + "chooseDatabase": "Choose Database", "lowcoderAPI": "Lowcoder API", "executeJSCode": "Run JavaScript Code", "importFromQueryLibrary": "Import from Query Library", @@ -684,6 +742,10 @@ export const en = { "triggerTypeAuto": "Inputs Change or On Page Load", "triggerTypePageLoad": "When the Application (Page) loads", "triggerTypeManual": "Only when you trigger it manually", + "triggerTypeInputChange": "When Inputs Change", + "triggerTypeQueryExec": "After Query Execution", + "triggerTypeTimeout": "After Application (Page) loads and Timeout", + "delayTime": "Delay Time", "chooseDataSource": "Choose Data Source", "method": "Method", "updateExceptionDataSourceTitle": "Update Failing Data Source", @@ -790,6 +852,8 @@ export const en = { "categoryWebscrapers" : "Webscrapers & Open Data", "categoryDocumentHandling" : "Report & Document Generation", "categoryRPA" : "Robotic Process Automation", + "componentsUsingQueryTitle" : "Query Usage", + "componentsUsingQuery" : "Where is this Query in use" }, @@ -1809,6 +1873,7 @@ export const en = { }, "date": { "format": "Format", + "inputFormat": "Input Format", "formatTip": "Support: 'YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD', 'Timestamp'", "reference": "Please Refer to", "showTime": "Show Time", @@ -1866,7 +1931,8 @@ export const en = { }, "dropdown": { "onlyMenu": "Display with Label Only", - "textDesc": "Text Currently Displayed on Button" + "textDesc": "Text Currently Displayed on Button", + "triggerMode": "Trigger Mode" }, "textShow": { "text": "### 👋 Hello, {name}", @@ -1974,6 +2040,7 @@ export const en = { "type": "Type", "tableSize": "Table Size", "hideHeader": "Hide Table Header", + "hideToolbar": "Hide Table Toolbar (Footer)", "fixedHeader": "Fixed Table Header", "fixedHeaderTooltip": "Header Will Be Fixed for Vertically Scrollable Table", "fixedToolbar": "Fixed Toolbar", @@ -2057,7 +2124,21 @@ export const en = { "srcDesc": "The Image Source. Can be an URL, Path or Base64 String. for Example: data:image/png;base64, AAA... CCC", "supportPreview": "Support Zoom Preview (on Click)", "supportPreviewTip": "Effective When the Image Source is Valid", - "previewSrc": "HighRes Image Source" + "previewSrc": "HighRes Image Source", + "clipPath" : "Image Clipping Path", + "clipPathTip" : "Use clip-path to define a custom shape for your element based on CSS definition, referencing an SVG mask (via source URL) or using predefined shapes like circle(), ellipse(), polygon(), or inset() for clipping.", + "enableOverflow": "Enable Overflow", + "enableOverflowTip": "Allows the image to overflow its container, enabling cropping beyond the container's bounds. Useful for maintaining focus on specific parts of the image.", + "overflow": "Overflow Behavior (CSS)", + "overflowTip": "Defines how the content should behave when overflowing the container. Options like 'hidden', 'scroll', or 'visible' determine visibility of cropped content.", + "positionX": "Horizontal Position", + "positionXTip": "Specifies the horizontal alignment of the image within its container. Examples: 'left', 'center', 'right', or percentage values.", + "positionY": "Vertical Position", + "positionYTip": "Specifies the vertical alignment of the image within its container. Examples: 'top', 'center', 'bottom', or percentage values.", + "aspectRatio": "Aspect Ratio (CSS)", + "aspectRatioTip": "Maintains a consistent width-to-height ratio for the image, such as '16/9' for widescreen or '1/1' for square. Leave blank for natural image dimensions.", + "placement": "Image Placement", + "placementTip": "Determines where and how the image is displayed within the layout or container. Options include specific alignment or placement logic." }, "progress": { "value": "Value", @@ -2704,7 +2785,8 @@ export const en = { "gridColumnsDesc": "Default number of columns typically used for most containers", "loadingIndicators": "Loading Indicators", "showComponentLoadingIndicators": "Show loading indicators when component load", - "showDataLoadingIndicators": "Show loading indicators when data load", + "showDataLoadingIndicators": "Show indicators during data loading", + "dataLoadingIndicator": "Data loading indicator", "background": "Background Styles", "gridSettings": "Grid Settings", "gridRowHeight": "Grid Row Height", diff --git a/client/packages/lowcoder/src/i18n/locales/es.ts b/client/packages/lowcoder/src/i18n/locales/es.ts index b276a055c..ea945dcaa 100644 --- a/client/packages/lowcoder/src/i18n/locales/es.ts +++ b/client/packages/lowcoder/src/i18n/locales/es.ts @@ -585,6 +585,60 @@ export const es = { "siderBackgroundImageOrigin": "Sider Origen de la imagen de fondo", "activeBackground": "Color de fondo activo", "labelBackground": "Color de fondo de la etiqueta", + + "radiusTip": "Especifica el radio de las esquinas del elemento. Ejemplo: 5px, 50% o 1em.", + "gapTip": "Especifica el espacio entre filas y columnas en un contenedor de cuadrícula o flex. Ejemplo: 10px, 1rem o 5%.", + "cardRadiusTip": "Define el radio de las esquinas para los componentes de tarjeta. Ejemplo: 10px, 15px.", + "borderWidthTip": "Especifica el ancho del borde del elemento. Ejemplo: 1px, 0.5em o fino.", + "borderStyleTip": "Establece el estilo del borde. Ejemplo: sólido, discontinuo, punteado o ninguno.", + "marginTip": "Define el margen exterior alrededor de un elemento. Ejemplo: 10px, 2em o auto. También se puede combinar como: 0px 20px. O incluso separar para las 4 direcciones como: 0px 1px 5px 2px.", + "directionTip": "Especifica la dirección del diseño. Ejemplo: row, column o row-reverse.", + "detailSizeTip": "Define el tamaño de detalles específicos en el diseño. Ejemplo: 10px, 2em o 80%.", + "chartOpacityTip": "Especifica la opacidad del gráfico. Ejemplo: 1 (opaco), 0.5 (50% transparente).", + "chartBoxShadowTip": "Define la sombra proyectada por el cuadro del gráfico. Ejemplo: 0px 4px 8px rgba(0, 0, 0, 0.3).", + "chartBorderStyleTip": "Establece el estilo del borde del gráfico. Ejemplo: sólido, discontinuo o punteado.", + "chartBorderRadiusTip": "Especifica el radio de las esquinas del borde del gráfico. Ejemplo: 10px, 20%.", + "chartBorderWidthTip": "Especifica el ancho del borde del gráfico. Ejemplo: 2px, 0.5em.", + "chartTextSizeTip": "Especifica el tamaño de la fuente para el texto del gráfico. Ejemplo: 16px, 1em o 120%.", + "chartTextWeightTip": "Especifica el peso de la fuente para el texto del gráfico. Ejemplo: normal, negrita o 700.", + "chartFontFamilyTip": "Especifica la familia de fuentes para el texto del gráfico. Ejemplo: Arial, Helvetica o 'Times New Roman'.", + "chartFontStyleTip": "Especifica el estilo de la fuente para el texto del gráfico. Ejemplo: normal, cursiva o oblicua.", + "animationIterationCountTip": "Define cuántas veces debe ejecutarse una animación. Ejemplo: infinito, 1 o 3.", + "opacityTip": "Establece el nivel de transparencia del elemento. Ejemplo: 1 (opaco), 0.5 (50% transparente), 0 (invisible).", + "boxShadowColorTip": "Define el color de la sombra del cuadro. Ejemplo: rgba(0, 0, 0, 0.3), #FF5733.", + "chartBackgroundColorTip": "Establece el color de fondo del gráfico. Ejemplo: #FFFFFF, rgba(255, 255, 255, 0.8).", + "chartGradientColorTip": "Especifica los colores degradados para el fondo del gráfico. Ejemplo: linear-gradient(to right, #ff7e5f, #feb47b).", + "chartShadowColorTip": "Define el color de la sombra del gráfico. Ejemplo: rgba(0, 0, 0, 0.2), #333333.", + "chartBorderColorTip": "Especifica el color del borde del gráfico. Ejemplo: #000000, rgba(0, 0, 0, 0.5).", + "chartTextColorTip": "Establece el color del texto del gráfico. Ejemplo: #333333, rgba(51, 51, 51, 1).", + "boxShadowTip": "Define la sombra proyectada por un elemento. Ejemplo: 0px 4px 8px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(255, 255, 255, 0.5).", + "animationDelayTip": "Especifica el retraso antes de que comience la animación. Ejemplo: 1s, 500ms, 0.", + "animationDurationTip": "Establece la duración de la animación. Ejemplo: 2s, 3s, 500ms.", + "paddingTip": "Define el espacio interior dentro de un elemento. Ejemplo: 10px, 2em, 5%. También se puede combinar como: 0px 20px. O separar para las 4 direcciones: 10px 21px 5px 20px.", + "containerHeaderPaddingTip": "Define el espacio interior para el encabezado del contenedor. Ejemplo: 10px, 1rem.", + "containerSiderPaddingTip": "Define el espacio interior para el lateral del contenedor. Ejemplo: 8px, 1em.", + "containerFooterPaddingTip": "Define el espacio interior para el pie de página del contenedor. Ejemplo: 12px, 1rem.", + "containerBodyPaddingTip": "Define el espacio interior para el cuerpo del contenedor. Ejemplo: 15px, 2em.", + "textSizeTip": "Especifica el tamaño de la fuente del texto. Ejemplo: 14px, 1.2em, 110%.", + "textWeightTip": "Especifica el peso de la fuente del texto. Ejemplo: normal, negrita, 400.", + "fontFamilyTip": "Especifica la familia de fuentes del texto. Ejemplo: Arial, Verdana, 'Courier New'.", + "textDecorationTip": "Define la decoración del texto. Ejemplo: subrayado, tachado, ninguno.", + "textTransformTip": "Especifica la capitalización del texto. Ejemplo: mayúsculas, minúsculas, capitalizar.", + "fontStyleTip": "Define el estilo de la fuente del texto. Ejemplo: normal, cursiva, oblicua.", + "backgroundImageTip": "Especifica la imagen de fondo de un elemento. Ejemplo: url('image.jpg'), linear-gradient(to right, #ff7e5f, #feb47b).", + "headerBackgroundImageTip": "Especifica la imagen de fondo para el encabezado. Ejemplo: url('header.jpg').", + "footerBackgroundImageTip": "Especifica la imagen de fondo para el pie de página. Ejemplo: url('footer.jpg').", + "backgroundImageRepeatTip": "Define cómo se repite la imagen de fondo. Ejemplo: no-repeat, repeat-x, repeat-y.", + "headerBackgroundImageRepeatTip": "Define cómo se repite la imagen de fondo del encabezado. Ejemplo: repeat-x, no-repeat.", + "footerBackgroundImageRepeatTip": "Define cómo se repite la imagen de fondo del pie de página. Ejemplo: repeat-y, no-repeat.", + "backgroundImageSizeTip": "Define el tamaño de la imagen de fondo. Ejemplo: cover, contain, 50% 50%.", + "backgroundImagePositionTip": "Define la posición de la imagen de fondo. Ejemplo: center, top right, 10% 20%.", + "backgroundImageOriginTip": "Especifica el área de posicionamiento de la imagen de fondo. Ejemplo: padding-box, border-box, content-box.", + "headerBackgroundImageOriginTip": "Especifica el área de posicionamiento de la imagen de fondo del encabezado. Ejemplo: padding-box, border-box, content-box.", + "footerBackgroundImageOriginTip": "Especifica el área de posicionamiento de la imagen de fondo del pie de página. Ejemplo: padding-box, border-box, content-box.", + "rotationTip": "Especifica el ángulo de rotación del elemento. Ejemplo: 45deg, 90deg, -180deg.", + "lineHeightTip": "Define la altura de una línea de texto. Ejemplo: 1.5, 2, 120%." + }, "export": { ...en.export, @@ -682,10 +736,14 @@ export const es = { "executeJSCode": "Ejecutar código JavaScript", "importFromQueryLibrary": "Importar desde la biblioteca de consultas", "importFromFile": "Importar desde archivo", - "triggerType": "Se activa cuando...", - "triggerTypeAuto": "Cambio de entradas o al cargar la página", + "triggerType": "Activado cuando...", + "triggerTypeAuto": "Cambios en las entradas o al cargar la página", "triggerTypePageLoad": "Cuando se carga la aplicación (página)", - "triggerTypeManual": "Sólo cuando se activa manualmente", + "triggerTypeManual": "Solo cuando lo activas manualmente", + "triggerTypeInputChange": "Cuando cambian las entradas", + "triggerTypeQueryExec": "Después de la ejecución de la consulta", + "triggerTypeTimeout": "Después de que la aplicación (página) se carga y se produce el tiempo de espera", + "delayTime": "Tiempo de retraso", "chooseDataSource": "Elegir fuente de datos", "method": "Método", "updateExceptionDataSourceTitle": "Actualizar fuente de datos que falla", @@ -1829,6 +1887,7 @@ export const es = { "onlyMenu": "Pantalla sólo con etiqueta", "textDesc": "Texto que aparece actualmente en el botón", + "triggerMode": "Modo de disparo" }, "textShow": { ...en.textShow, @@ -1935,6 +1994,7 @@ export const es = { "type": "Tipo", "tableSize": "Tamaño de la tabla", "hideHeader": "Ocultar cabecera de tabla", + "hideToolbar": "Ocultar pie de página", "fixedHeader": "Cabecera de tabla fija", "fixedHeaderTooltip": "La cabecera será fija para la tabla desplazable verticalmente", "fixedToolbar": "Barra de herramientas fija", @@ -2660,6 +2720,8 @@ export const es = { "loadingIndicators": "Indicadores de carga", "showComponentLoadingIndicators": "Mostrar indicadores de carga cuando se carga el componente", "showDataLoadingIndicators": "Mostrar indicadores de carga al cargar los datos", + "showIndicatorsDuringDataLoading": "Mostrar indicadores durante la carga de datos", + "dataLoadingIndicator": "Indicador de carga de datos" }, "pluginSetting": { ...en.pluginSetting, diff --git a/client/packages/lowcoder/src/i18n/locales/it.ts b/client/packages/lowcoder/src/i18n/locales/it.ts index a5fe6c70d..6f4de72d6 100644 --- a/client/packages/lowcoder/src/i18n/locales/it.ts +++ b/client/packages/lowcoder/src/i18n/locales/it.ts @@ -585,6 +585,60 @@ export const it = { "siderBackgroundImageOrigin": "Origine dell'immagine di sfondo Sider", "activeBackground": "Colore di sfondo attivo", "labelBackground": "Colore di sfondo dell'etichetta", + + "radiusTip": "Specifica il raggio degli angoli dell'elemento. Esempio: 5px, 50% o 1em.", + "gapTip": "Specifica lo spazio tra righe e colonne in un contenitore a griglia o flessibile. Esempio: 10px, 1rem o 5%.", + "cardRadiusTip": "Definisce il raggio degli angoli per i componenti della carta. Esempio: 10px, 15px.", + "borderWidthTip": "Specifica la larghezza del bordo dell'elemento. Esempio: 1px, 0.5em o sottile.", + "borderStyleTip": "Imposta lo stile del bordo. Esempio: solido, tratteggiato, puntinato o nessuno.", + "marginTip": "Definisce il margine esterno intorno a un elemento. Esempio: 10px, 2em o auto. Può essere combinato: 0px 20px o separato per 4 direzioni: 0px 1px 5px 2px.", + "directionTip": "Specifica la direzione del layout. Esempio: row, column o row-reverse.", + "detailSizeTip": "Definisce la dimensione di dettagli specifici nel layout. Esempio: 10px, 2em o 80%.", + "chartOpacityTip": "Specifica l'opacità del grafico. Esempio: 1 (opaco), 0.5 (50% trasparente).", + "chartBoxShadowTip": "Definisce l'ombra proiettata dal grafico. Esempio: 0px 4px 8px rgba(0, 0, 0, 0.3).", + "chartBorderStyleTip": "Imposta lo stile del bordo del grafico. Esempio: solido, tratteggiato, puntinato.", + "chartBorderRadiusTip": "Specifica il raggio degli angoli del bordo del grafico. Esempio: 10px, 20%.", + "chartBorderWidthTip": "Specifica la larghezza del bordo del grafico. Esempio: 2px, 0.5em.", + "chartTextSizeTip": "Specifica la dimensione del testo del grafico. Esempio: 16px, 1em, 120%.", + "chartTextWeightTip": "Specifica lo spessore del testo del grafico. Esempio: normale, grassetto, o 700.", + "chartFontFamilyTip": "Specifica il carattere tipografico del testo del grafico. Esempio: Arial, Helvetica, o 'Times New Roman'.", + "chartFontStyleTip": "Specifica lo stile del carattere del testo del grafico. Esempio: normale, corsivo o obliquo.", + "animationIterationCountTip": "Definisce quante volte deve essere eseguita un'animazione. Esempio: infinito, 1, o 3.", + "opacityTip": "Imposta il livello di trasparenza dell'elemento. Esempio: 1 (opaco), 0.5 (50% trasparente), 0 (invisibile).", + "boxShadowColorTip": "Definisce il colore dell'ombra del box. Esempio: rgba(0, 0, 0, 0.3), #FF5733.", + "chartBackgroundColorTip": "Imposta il colore di sfondo del grafico. Esempio: #FFFFFF, rgba(255, 255, 255, 0.8).", + "chartGradientColorTip": "Definisce i colori del gradiente per lo sfondo del grafico. Esempio: linear-gradient(to right, #ff7e5f, #feb47b).", + "chartShadowColorTip": "Specifica il colore dell'ombra del grafico. Esempio: rgba(0, 0, 0, 0.2), #333333.", + "chartBorderColorTip": "Definisce il colore del bordo del grafico. Esempio: #000000, rgba(0, 0, 0, 0.5).", + "chartTextColorTip": "Imposta il colore del testo del grafico. Esempio: #333333, rgba(51, 51, 51, 1).", + "boxShadowTip": "Definisce l'ombra proiettata da un elemento. Esempio: 0px 4px 8px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(255, 255, 255, 0.5).", + "animationDelayTip": "Specifica il ritardo prima dell'inizio dell'animazione. Esempio: 1s, 500ms, 0.", + "animationDurationTip": "Imposta la durata dell'animazione. Esempio: 2s, 3s, 500ms.", + "paddingTip": "Definisce lo spazio interno all'interno di un elemento. Esempio: 10px, 2em, 5%. Può essere combinato: 0px 20px o separato per tutte e 4 le direzioni: 10px 21px 5px 20px.", + "containerHeaderPaddingTip": "Definisce lo spazio interno per l'intestazione del contenitore. Esempio: 10px, 1rem.", + "containerSiderPaddingTip": "Definisce lo spazio interno per la barra laterale del contenitore. Esempio: 8px, 1em.", + "containerFooterPaddingTip": "Definisce lo spazio interno per il piè di pagina del contenitore. Esempio: 12px, 1rem.", + "containerBodyPaddingTip": "Definisce lo spazio interno per il corpo del contenitore. Esempio: 15px, 2em.", + "textSizeTip": "Specifica la dimensione del testo. Esempio: 14px, 1.2em, 110%.", + "textWeightTip": "Definisce lo spessore del testo. Esempio: normale, grassetto, 400.", + "fontFamilyTip": "Specifica il carattere tipografico del testo. Esempio: Arial, Verdana, 'Courier New'.", + "textDecorationTip": "Definisce la decorazione del testo. Esempio: sottolineato, barrato, nessuno.", + "textTransformTip": "Imposta la capitalizzazione del testo. Esempio: maiuscolo, minuscolo, prima lettera maiuscola.", + "fontStyleTip": "Definisce lo stile del carattere del testo. Esempio: normale, corsivo, obliquo.", + "backgroundImageTip": "Specifica l'immagine di sfondo di un elemento. Esempio: url('image.jpg'), linear-gradient(to right, #ff7e5f, #feb47b).", + "headerBackgroundImageTip": "Specifica l'immagine di sfondo per l'intestazione. Esempio: url('header.jpg').", + "footerBackgroundImageTip": "Specifica l'immagine di sfondo per il piè di pagina. Esempio: url('footer.jpg').", + "backgroundImageRepeatTip": "Definisce come viene ripetuta l'immagine di sfondo. Esempio: no-repeat, repeat-x, repeat-y.", + "headerBackgroundImageRepeatTip": "Definisce come viene ripetuta l'immagine di sfondo dell'intestazione. Esempio: repeat-x, no-repeat.", + "footerBackgroundImageRepeatTip": "Definisce come viene ripetuta l'immagine di sfondo del piè di pagina. Esempio: repeat-y, no-repeat.", + "backgroundImageSizeTip": "Definisce la dimensione dell'immagine di sfondo. Esempio: cover, contain, 50% 50%.", + "backgroundImagePositionTip": "Imposta la posizione dell'immagine di sfondo. Esempio: center, top right, 10% 20%.", + "backgroundImageOriginTip": "Definisce l'area in cui è posizionata l'immagine di sfondo. Esempio: padding-box, border-box, content-box.", + "headerBackgroundImageOriginTip": "Definisce l'area in cui è posizionata l'immagine di sfondo dell'intestazione. Esempio: padding-box, border-box, content-box.", + "footerBackgroundImageOriginTip": "Definisce l'area in cui è posizionata l'immagine di sfondo del piè di pagina. Esempio: padding-box, border-box, content-box.", + "rotationTip": "Specifica l'angolo di rotazione dell'elemento. Esempio: 45deg, 90deg, -180deg.", + "lineHeightTip": "Definisce l'altezza di una riga di testo. Esempio: 1.5, 2, 120%." + }, "export": { ...en.export, @@ -682,10 +736,14 @@ export const it = { "executeJSCode": "Eseguire il codice JavaScript", "importFromQueryLibrary": "Importazione da Query Library", "importFromFile": "Importazione da file", - "triggerType": "Si attiva quando...", - "triggerTypeAuto": "Modifica degli ingressi o caricamento della pagina", - "triggerTypePageLoad": "Quando l'applicazione (pagina) viene caricata", - "triggerTypeManual": "Solo quando lo si attiva manualmente", + "triggerType": "Attivato quando...", + "triggerTypeAuto": "Cambiamenti negli input o al caricamento della pagina", + "triggerTypePageLoad": "Quando si carica l'applicazione (pagina)", + "triggerTypeManual": "Solo quando lo attivi manualmente", + "triggerTypeInputChange": "Quando cambiano gli input", + "triggerTypeQueryExec": "Dopo l'esecuzione della query", + "triggerTypeTimeout": "Dopo il caricamento dell'applicazione (pagina) e il timeout", + "delayTime": "Tempo di ritardo", "chooseDataSource": "Scegliere l'origine dei dati", "method": "Metodo", "updateExceptionDataSourceTitle": "Aggiornamento dell'origine dati non funzionante", @@ -1829,6 +1887,7 @@ export const it = { "onlyMenu": "Display con sola etichetta", "textDesc": "Testo attualmente visualizzato sul pulsante", + "triggerMode": "Modalità di attivazione" }, "textShow": { ...en.textShow, @@ -1935,6 +1994,7 @@ export const it = { "type": "Tipo", "tableSize": "Dimensione della tabella", "hideHeader": "Nascondere l'intestazione della tabella", + "hideToolbar": "Nascondere Piè di pagina", "fixedHeader": "Intestazione fissa della tabella", "fixedHeaderTooltip": "L'intestazione sarà fissa per la tabella a scorrimento verticale", "fixedToolbar": "Barra degli strumenti fissa", @@ -2660,7 +2720,9 @@ export const it = { "gridColumnsDesc": "Numero predefinito di colonne, tipicamente utilizzato per la maggior parte dei contenitori.", "loadingIndicators": "Indicatori di carico", "showComponentLoadingIndicators": "Mostra gli indicatori di caricamento quando il componente viene caricato", - "showDataLoadingIndicators": "Mostra gli indicatori di caricamento quando i dati vengono caricati", + "showDataLoadingIndicators": "Mostra indicatori di caricamento durante il caricamento dei dati", + "showIndicatorsDuringDataLoading": "Mostra indicatori durante il caricamento dei dati", + "dataLoadingIndicator": "Indicatore di caricamento dei dati" }, "pluginSetting": { ...en.pluginSetting, diff --git a/client/packages/lowcoder/src/i18n/locales/pt.ts b/client/packages/lowcoder/src/i18n/locales/pt.ts index 78a184e44..2de92e915 100644 --- a/client/packages/lowcoder/src/i18n/locales/pt.ts +++ b/client/packages/lowcoder/src/i18n/locales/pt.ts @@ -585,6 +585,60 @@ export const pt = { "siderBackgroundImageOrigin": "Origem da imagem de fundo do Sider", "activeBackground": "Cor de fundo ativa", "labelBackground": "Cor de fundo da etiqueta", + + "radiusTip": "Especifica o raio dos cantos do elemento. Exemplo: 5px, 50% ou 1em.", + "gapTip": "Especifica o espaçamento entre linhas e colunas em um contêiner de grade ou flex. Exemplo: 10px, 1rem ou 5%.", + "cardRadiusTip": "Define o raio dos cantos para componentes de cartão. Exemplo: 10px, 15px.", + "borderWidthTip": "Especifica a largura da borda do elemento. Exemplo: 1px, 0.5em ou fina.", + "borderStyleTip": "Define o estilo da borda. Exemplo: sólido, tracejado, pontilhado ou nenhum.", + "marginTip": "Define a margem externa ao redor de um elemento. Exemplo: 10px, 2em ou auto. Pode ser combinado: 0px 20px ou separado para 4 direções: 0px 1px 5px 2px.", + "directionTip": "Especifica a direção do layout. Exemplo: row, column ou row-reverse.", + "detailSizeTip": "Define o tamanho de detalhes específicos no layout. Exemplo: 10px, 2em ou 80%.", + "chartOpacityTip": "Especifica a opacidade do gráfico. Exemplo: 1 (opaco), 0.5 (50% transparente).", + "chartBoxShadowTip": "Define a sombra projetada pelo gráfico. Exemplo: 0px 4px 8px rgba(0, 0, 0, 0.3).", + "chartBorderStyleTip": "Define o estilo da borda do gráfico. Exemplo: sólido, tracejado ou pontilhado.", + "chartBorderRadiusTip": "Especifica o raio dos cantos da borda do gráfico. Exemplo: 10px, 20%.", + "chartBorderWidthTip": "Especifica a largura da borda do gráfico. Exemplo: 2px, 0.5em.", + "chartTextSizeTip": "Especifica o tamanho da fonte do texto do gráfico. Exemplo: 16px, 1em, 120%.", + "chartTextWeightTip": "Especifica o peso da fonte do texto do gráfico. Exemplo: normal, negrito, ou 700.", + "chartFontFamilyTip": "Especifica a família da fonte para o texto do gráfico. Exemplo: Arial, Helvetica ou 'Times New Roman'.", + "chartFontStyleTip": "Especifica o estilo da fonte do texto do gráfico. Exemplo: normal, itálico ou oblíquo.", + "animationIterationCountTip": "Define quantas vezes uma animação deve ser executada. Exemplo: infinito, 1 ou 3.", + "opacityTip": "Define o nível de transparência do elemento. Exemplo: 1 (opaco), 0.5 (50% transparente), 0 (invisível).", + "boxShadowColorTip": "Define a cor da sombra da caixa. Exemplo: rgba(0, 0, 0, 0.3), #FF5733.", + "chartBackgroundColorTip": "Define a cor de fundo do gráfico. Exemplo: #FFFFFF, rgba(255, 255, 255, 0.8).", + "chartGradientColorTip": "Especifica as cores do gradiente para o fundo do gráfico. Exemplo: linear-gradient(to right, #ff7e5f, #feb47b).", + "chartShadowColorTip": "Especifica a cor da sombra do gráfico. Exemplo: rgba(0, 0, 0, 0.2), #333333.", + "chartBorderColorTip": "Define a cor da borda do gráfico. Exemplo: #000000, rgba(0, 0, 0, 0.5).", + "chartTextColorTip": "Define a cor do texto do gráfico. Exemplo: #333333, rgba(51, 51, 51, 1).", + "boxShadowTip": "Define a sombra projetada por um elemento. Exemplo: 0px 4px 8px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(255, 255, 255, 0.5).", + "animationDelayTip": "Especifica o atraso antes do início da animação. Exemplo: 1s, 500ms, 0.", + "animationDurationTip": "Define a duração da animação. Exemplo: 2s, 3s, 500ms.", + "paddingTip": "Define o espaço interno dentro de um elemento. Exemplo: 10px, 2em, 5%. Pode ser combinado: 0px 20px ou separado para todas as 4 direções: 10px 21px 5px 20px.", + "containerHeaderPaddingTip": "Define o espaço interno para o cabeçalho do contêiner. Exemplo: 10px, 1rem.", + "containerSiderPaddingTip": "Define o espaço interno para a barra lateral do contêiner. Exemplo: 8px, 1em.", + "containerFooterPaddingTip": "Define o espaço interno para o rodapé do contêiner. Exemplo: 12px, 1rem.", + "containerBodyPaddingTip": "Define o espaço interno para o corpo do contêiner. Exemplo: 15px, 2em.", + "textSizeTip": "Especifica o tamanho da fonte do texto. Exemplo: 14px, 1.2em, 110%.", + "textWeightTip": "Define o peso da fonte do texto. Exemplo: normal, negrito, 400.", + "fontFamilyTip": "Especifica a família da fonte do texto. Exemplo: Arial, Verdana, 'Courier New'.", + "textDecorationTip": "Define a decoração do texto. Exemplo: sublinhado, riscado, nenhum.", + "textTransformTip": "Define a capitalização do texto. Exemplo: maiúsculas, minúsculas, capitalizado.", + "fontStyleTip": "Define o estilo da fonte do texto. Exemplo: normal, itálico, oblíquo.", + "backgroundImageTip": "Especifica a imagem de fundo de um elemento. Exemplo: url('image.jpg'), linear-gradient(to right, #ff7e5f, #feb47b).", + "headerBackgroundImageTip": "Especifica a imagem de fundo para o cabeçalho. Exemplo: url('header.jpg').", + "footerBackgroundImageTip": "Especifica a imagem de fundo para o rodapé. Exemplo: url('footer.jpg').", + "backgroundImageRepeatTip": "Define como a imagem de fundo é repetida. Exemplo: no-repeat, repeat-x, repeat-y.", + "headerBackgroundImageRepeatTip": "Define como a imagem de fundo do cabeçalho é repetida. Exemplo: repeat-x, no-repeat.", + "footerBackgroundImageRepeatTip": "Define como a imagem de fundo do rodapé é repetida. Exemplo: repeat-y, no-repeat.", + "backgroundImageSizeTip": "Define o tamanho da imagem de fundo. Exemplo: cover, contain, 50% 50%.", + "backgroundImagePositionTip": "Define a posição da imagem de fundo. Exemplo: center, top right, 10% 20%.", + "backgroundImageOriginTip": "Especifica a área de posicionamento da imagem de fundo. Exemplo: padding-box, border-box, content-box.", + "headerBackgroundImageOriginTip": "Especifica a área de posicionamento da imagem de fundo do cabeçalho. Exemplo: padding-box, border-box, content-box.", + "footerBackgroundImageOriginTip": "Especifica a área de posicionamento da imagem de fundo do rodapé. Exemplo: padding-box, border-box, content-box.", + "rotationTip": "Especifica o ângulo de rotação do elemento. Exemplo: 45deg, 90deg, -180deg.", + "lineHeightTip": "Define a altura de uma linha de texto. Exemplo: 1.5, 2, 120%." + }, "export": { ...en.export, @@ -682,10 +736,14 @@ export const pt = { "executeJSCode": "Executar Código JavaScript", "importFromQueryLibrary": "Importar da Biblioteca de Consultas", "importFromFile": "Importar de Arquivo", - "triggerType": "Acionado quando...", - "triggerTypeAuto": "Alterações de Entrada ou ao Carregar a Página", - "triggerTypePageLoad": "Quando a Aplicação (Página) carrega", - "triggerTypeManual": "Somente quando acionado manualmente", + "triggerType": "Disparado quando...", + "triggerTypeAuto": "Mudança de entradas ou ao carregar a página", + "triggerTypePageLoad": "Quando a aplicação (página) carrega", + "triggerTypeManual": "Somente quando você aciona manualmente", + "triggerTypeInputChange": "Quando as entradas mudam", + "triggerTypeQueryExec": "Após a execução da consulta", + "triggerTypeTimeout": "Após a aplicação (página) carregar e o tempo limite", + "delayTime": "Tempo de atraso", "chooseDataSource": "Escolha uma Fonte de Dados", "method": "Método", "updateExceptionDataSourceTitle": "Atualizar Fonte de Dados com Falha", @@ -1829,6 +1887,7 @@ export const pt = { "onlyMenu": "Exibir Apenas com Rótulo", "textDesc": "Texto Atualmente Exibido no Botão", + "triggerMode": "Modo de disparo" }, "textShow": { ...en.textShow, @@ -1935,6 +1994,7 @@ export const pt = { "type": "Tipo", "tableSize": "Tamanho da Tabela", "hideHeader": "Ocultar Cabeçalho da Tabela", + "hideToolbar": "Ocultar barra de ferramentas", "fixedHeader": "Cabeçalho da Tabela Fixo", "fixedHeaderTooltip": "O cabeçalho será fixado para tabelas com rolagem vertical", "fixedToolbar": "Barra de Ferramentas Fixa", @@ -2660,7 +2720,9 @@ export const pt = { "gridColumnsDesc": "Número padrão de colunas normalmente usado para a maioria dos contêineres", "loadingIndicators": "Indicadores de carga", "showComponentLoadingIndicators": "Mostrar indicadores de carregamento quando o componente é carregado", - "showDataLoadingIndicators": "Mostrar indicadores de carregamento quando os dados são carregados", + "showDataLoadingIndicators": "Mostrar indicadores de carregamento durante o carregamento dos dados", + "showIndicatorsDuringDataLoading": "Mostrar indicadores durante o carregamento de dados", + "dataLoadingIndicator": "Indicador de carregamento de dados" }, "pluginSetting": { ...en.pluginSetting, diff --git a/client/packages/lowcoder/src/i18n/locales/ru.ts b/client/packages/lowcoder/src/i18n/locales/ru.ts index a2206edc8..3029a5553 100644 --- a/client/packages/lowcoder/src/i18n/locales/ru.ts +++ b/client/packages/lowcoder/src/i18n/locales/ru.ts @@ -585,6 +585,60 @@ export const ru = { "siderBackgroundImageOrigin": "Происхождение фонового изображения Sider", "activeBackground": "Активный цвет фона", "labelBackground": "Цвет фона этикетки", + + "radiusTip": "Указывает радиус углов элемента. Пример: 5px, 50% или 1em.", + "gapTip": "Указывает расстояние между строками и столбцами в сетке или flex-контейнере. Пример: 10px, 1rem или 5%.", + "cardRadiusTip": "Определяет радиус углов для карточных компонентов. Пример: 10px, 15px.", + "borderWidthTip": "Указывает ширину границы элемента. Пример: 1px, 0.5em или тонкая.", + "borderStyleTip": "Определяет стиль границы. Пример: solid, dashed, dotted или none.", + "marginTip": "Определяет внешний отступ вокруг элемента. Пример: 10px, 2em или auto. Можно комбинировать: 0px 20px или указать для всех 4 сторон: 0px 1px 5px 2px.", + "directionTip": "Указывает направление макета. Пример: row, column или row-reverse.", + "detailSizeTip": "Указывает размер определенных элементов в макете. Пример: 10px, 2em или 80%.", + "chartOpacityTip": "Указывает прозрачность диаграммы. Пример: 1 (непрозрачный), 0.5 (50% прозрачный).", + "chartBoxShadowTip": "Определяет тень, отбрасываемую диаграммой. Пример: 0px 4px 8px rgba(0, 0, 0, 0.3).", + "chartBorderStyleTip": "Определяет стиль границы диаграммы. Пример: solid, dashed, dotted.", + "chartBorderRadiusTip": "Указывает радиус углов границы диаграммы. Пример: 10px, 20%.", + "chartBorderWidthTip": "Указывает ширину границы диаграммы. Пример: 2px, 0.5em.", + "chartTextSizeTip": "Указывает размер шрифта текста диаграммы. Пример: 16px, 1em, 120%.", + "chartTextWeightTip": "Указывает насыщенность текста диаграммы. Пример: normal, bold или 700.", + "chartFontFamilyTip": "Указывает семейство шрифтов для текста диаграммы. Пример: Arial, Helvetica или 'Times New Roman'.", + "chartFontStyleTip": "Указывает стиль шрифта текста диаграммы. Пример: normal, italic или oblique.", + "animationIterationCountTip": "Указывает, сколько раз должна выполняться анимация. Пример: infinite, 1 или 3.", + "opacityTip": "Указывает уровень прозрачности элемента. Пример: 1 (непрозрачный), 0.5 (50% прозрачный), 0 (невидимый).", + "boxShadowColorTip": "Указывает цвет тени. Пример: rgba(0, 0, 0, 0.3), #FF5733.", + "chartBackgroundColorTip": "Указывает цвет фона диаграммы. Пример: #FFFFFF, rgba(255, 255, 255, 0.8).", + "chartGradientColorTip": "Указывает цвета градиента для фона диаграммы. Пример: linear-gradient(to right, #ff7e5f, #feb47b).", + "chartShadowColorTip": "Указывает цвет тени диаграммы. Пример: rgba(0, 0, 0, 0.2), #333333.", + "chartBorderColorTip": "Указывает цвет границы диаграммы. Пример: #000000, rgba(0, 0, 0, 0.5).", + "chartTextColorTip": "Указывает цвет текста диаграммы. Пример: #333333, rgba(51, 51, 51, 1).", + "boxShadowTip": "Определяет тень, отбрасываемую элементом. Пример: 0px 4px 8px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(255, 255, 255, 0.5).", + "animationDelayTip": "Указывает задержку перед началом анимации. Пример: 1s, 500ms, 0.", + "animationDurationTip": "Указывает продолжительность анимации. Пример: 2s, 3s, 500ms.", + "paddingTip": "Определяет внутренний отступ элемента. Пример: 10px, 2em, 5%. Можно комбинировать: 0px 20px или указать для всех 4 сторон: 10px 21px 5px 20px.", + "containerHeaderPaddingTip": "Указывает внутренний отступ для заголовка контейнера. Пример: 10px, 1rem.", + "containerSiderPaddingTip": "Указывает внутренний отступ для боковой панели контейнера. Пример: 8px, 1em.", + "containerFooterPaddingTip": "Указывает внутренний отступ для нижнего колонтитула контейнера. Пример: 12px, 1rem.", + "containerBodyPaddingTip": "Указывает внутренний отступ для содержимого контейнера. Пример: 15px, 2em.", + "textSizeTip": "Указывает размер текста. Пример: 14px, 1.2em, 110%.", + "textWeightTip": "Указывает насыщенность текста. Пример: normal, bold, 400.", + "fontFamilyTip": "Указывает семейство шрифтов текста. Пример: Arial, Verdana, 'Courier New'.", + "textDecorationTip": "Определяет оформление текста. Пример: underline, line-through, none.", + "textTransformTip": "Указывает регистр текста. Пример: uppercase, lowercase, capitalize.", + "fontStyleTip": "Указывает стиль шрифта текста. Пример: normal, italic, oblique.", + "backgroundImageTip": "Указывает фоновое изображение элемента. Пример: url('image.jpg'), linear-gradient(to right, #ff7e5f, #feb47b).", + "headerBackgroundImageTip": "Указывает фоновое изображение для заголовка. Пример: url('header.jpg').", + "footerBackgroundImageTip": "Указывает фоновое изображение для нижнего колонтитула. Пример: url('footer.jpg').", + "backgroundImageRepeatTip": "Указывает, как повторяется фоновое изображение. Пример: no-repeat, repeat-x, repeat-y.", + "headerBackgroundImageRepeatTip": "Указывает, как повторяется фоновое изображение заголовка. Пример: repeat-x, no-repeat.", + "footerBackgroundImageRepeatTip": "Указывает, как повторяется фоновое изображение нижнего колонтитула. Пример: repeat-y, no-repeat.", + "backgroundImageSizeTip": "Указывает размер фонового изображения. Пример: cover, contain, 50% 50%.", + "backgroundImagePositionTip": "Указывает позицию фонового изображения. Пример: center, top right, 10% 20%.", + "backgroundImageOriginTip": "Указывает область размещения фонового изображения. Пример: padding-box, border-box, content-box.", + "headerBackgroundImageOriginTip": "Указывает область размещения фонового изображения заголовка. Пример: padding-box, border-box, content-box.", + "footerBackgroundImageOriginTip": "Указывает область размещения фонового изображения нижнего колонтитула. Пример: padding-box, border-box, content-box.", + "rotationTip": "Указывает угол поворота элемента. Пример: 45deg, 90deg, -180deg.", + "lineHeightTip": "Указывает высоту строки текста. Пример: 1.5, 2, 120%." + }, "export": { ...en.export, @@ -683,9 +737,13 @@ export const ru = { "importFromQueryLibrary": "Импорт из библиотеки запросов", "importFromFile": "Импорт из файла", "triggerType": "Срабатывает, когда...", - "triggerTypeAuto": "Изменение входов или загрузка страницы", + "triggerTypeAuto": "Изменяются входные данные или при загрузке страницы", "triggerTypePageLoad": "Когда загружается приложение (страница)", - "triggerTypeManual": "Только когда вы запускаете его вручную", + "triggerTypeManual": "Только при ручном запуске", + "triggerTypeInputChange": "Когда изменяются входные данные", + "triggerTypeQueryExec": "После выполнения запроса", + "triggerTypeTimeout": "После загрузки приложения (страницы) и таймаута", + "delayTime": "Время задержки", "chooseDataSource": "Выберите источник данных", "method": "Метод", "updateExceptionDataSourceTitle": "Обновление неработающего источника данных", @@ -1829,6 +1887,7 @@ export const ru = { "onlyMenu": "Дисплей только с этикеткой", "textDesc": "Текст, отображаемый в данный момент на кнопке", + "triggerMode": "Режим триггера" }, "textShow": { ...en.textShow, @@ -1935,6 +1994,7 @@ export const ru = { "type": "Тип", "tableSize": "Размер стола", "hideHeader": "Скрыть заголовок таблицы", + "hideToolbar": "Скрыть нижний колонтитул", "fixedHeader": "Фиксированный заголовок таблицы", "fixedHeaderTooltip": "Заголовок будет фиксированным для вертикально прокручиваемой таблицы", "fixedToolbar": "Исправленная панель инструментов", @@ -2661,6 +2721,8 @@ export const ru = { "loadingIndicators": "Индикаторы загрузки", "showComponentLoadingIndicators": "Показывайте индикаторы загрузки при загрузке компонента", "showDataLoadingIndicators": "Показывайте индикаторы загрузки при загрузке данных", + "showIndicatorsDuringDataLoading": "Показывать индикаторы во время загрузки данных", + "dataLoadingIndicator": "Индикатор загрузки данных" }, "pluginSetting": { ...en.pluginSetting, diff --git a/client/packages/lowcoder/src/i18n/locales/zh.ts b/client/packages/lowcoder/src/i18n/locales/zh.ts index 260f4e1da..e361bfc1b 100644 --- a/client/packages/lowcoder/src/i18n/locales/zh.ts +++ b/client/packages/lowcoder/src/i18n/locales/zh.ts @@ -400,30 +400,66 @@ export const zh: typeof en = { themeDetail: { ...en.themeDetail, - primary: "颜色主题", - primaryDesc: "大多数组件使用默认的颜色主题", - textDark: "深色文本颜色", - textDarkDesc: "当应用背景颜色为浅色时", - textLight: "浅色文本颜色", - textLightDesc: "当应用背景颜色为深色时", - canvas: "画布颜色", - canvasDesc: "应用的默认背景颜色", - primarySurface: "容器颜色", - primarySurfaceDesc: "用于诸如表格之类的组件的默认背景颜色", - borderRadius: "边框半径", - borderRadiusDesc: "大多数组件使用默认的边框半径", - chart: "图表样式", - chartDesc: "Echarts", - echartsJson: "主题配置", - margin: "外边距", - marginDesc: "默认外边距通常用于大多数组件", - padding: "内边距", - paddingDesc: "默认内边距通常用于大多数组件", - containerHeaderPadding: "头部边距", - containerheaderpaddingDesc: "默认头部边距通常用于大多数组件", - gridColumns: "网格列", - gridColumnsDesc: - "默认列数通常用于大多数容器", + + "primary": "品牌颜色", + "primaryDesc": "大多数组件使用的默认主颜色", + "textDark": "深色文本颜色", + "textDarkDesc": "当背景颜色较浅时使用", + "textLight": "浅色文本颜色", + "textLightDesc": "当背景颜色较深时使用", + "canvas": "画布颜色", + "canvasDesc": "应用的默认背景颜色", + "primarySurface": "容器颜色", + "primarySurfaceDesc": "组件（如表格）的默认背景颜色", + "borders": "边框样式", + "spacing": "间距样式", + "font": "字体样式", + "fonts": "字体", + "borderRadius": "边框圆角", + "borderRadiusDesc": "大多数组件使用的默认边框圆角", + "borderColor": "边框颜色", + "borderColorDesc": "大多数组件使用的默认边框颜色", + "borderWidth": "边框宽度", + "borderWidthDesc": "大多数组件使用的默认边框宽度", + "borderStyle": "边框样式", + "borderStyleDesc": "大多数组件使用的默认边框样式", + "fontFamily": "字体系列", + "fontFamilyDesc": "大多数组件使用的默认字体系列", + "chart": "图表样式", + "chartDesc": "在此处放置 eCharts 的主题 JSON，以定义所有详细信息中图表的样式。", + "echartsJson": "您可以使用主题 JSON 生成器。将生成器中的 JSON 复制并粘贴到这里。", + "margin": "外边距", + "marginDesc": "大多数组件通常使用的默认外边距", + "padding": "内边距", + "paddingDesc": "大多数组件通常使用的默认内边距", + "containerHeaderPadding": "标题内边距", + "containerheaderpaddingDesc": "大多数组件通常使用的默认标题内边距", + "gridColumns": "网格列", + "gridColumnsDesc": "大多数容器通常使用的默认列数", + "loadingIndicators": "加载指示器", + "showComponentLoadingIndicators": "当组件加载时显示加载指示器", + "showDataLoadingIndicators": "在数据加载期间显示指示器", + "dataLoadingIndicator": "数据加载指示器", + "background": "背景样式", + "gridSettings": "网格设置", + "gridRowHeight": "网格行高", + "gridRowHeightDesc": "网格中每行的高度", + "gridRowCount": "网格行数", + "gridRowCountDesc": "网格中的最大行数", + "gridPaddingX": "水平内边距", + "gridPaddingXDesc": "画布的水平内边距", + "gridPaddingY": "垂直内边距", + "gridPaddingYDesc": "画布的垂直内边距", + "gridBgImage": "背景图片", + "gridBgImageDesc": "画布的背景图片", + "gridBgImageRepeat": "背景图片重复", + "gridBgImageRepeatDesc": "画布背景图片的重复方式", + "gridBgImageSize": "背景图片大小", + "gridBgImageSizeDesc": "画布背景图片的大小", + "gridBgImagePosition": "背景图片位置", + "gridBgImagePositionDesc": "画布背景图片的位置", + "gridBgImageOrigin": "背景图片起点", + "gridBgImageOriginDesc": "画布背景图片的起点" }, style: { ...en.style, @@ -505,6 +541,60 @@ export const zh: typeof en = { "footerBackgroundImageSize" : "底部背景图片大小", "footerBackgroundImagePosition" : "底部背景图片位置", "footerBackgroundImageOrigin": "底部背景图片原点", + + "radiusTip": "指定元素角的半径。例如：5px，50%，或1em。", + "gapTip": "指定网格或弹性容器中行和列之间的间距。例如：10px，1rem，或5%。", + "cardRadiusTip": "定义卡片组件的角半径。例如：10px，15px。", + "borderWidthTip": "指定元素边框的宽度。例如：1px，0.5em，或thin。", + "borderStyleTip": "设置边框的样式。例如：solid，dashed，dotted或none。", + "marginTip": "定义元素周围的外边距。例如：10px，2em或auto。您还可以组合使用，例如：0px 20px，或为四个方向分别指定：0px 1px 5px 2px。", + "directionTip": "指定布局的方向。例如：row，column或row-reverse。", + "detailSizeTip": "定义布局中特定细节的大小。例如：10px，2em，或80%。", + "chartOpacityTip": "指定图表的透明度。例如：1（不透明），0.5（50%透明）。", + "chartBoxShadowTip": "定义图表框投下的阴影。例如：0px 4px 8px rgba(0, 0, 0, 0.3)。", + "chartBorderStyleTip": "设置图表边框的样式。例如：solid，dashed或dotted。", + "chartBorderRadiusTip": "指定图表边框的角半径。例如：10px，20%。", + "chartBorderWidthTip": "指定图表边框的宽度。例如：2px，0.5em。", + "chartTextSizeTip": "指定图表文字的字体大小。例如：16px，1em或120%。", + "chartTextWeightTip": "指定图表文字的字体粗细。例如：normal，bold或700。", + "chartFontFamilyTip": "指定图表文字的字体系列。例如：Arial，Helvetica或'Times New Roman'。", + "chartFontStyleTip": "指定图表文字的字体样式。例如：normal，italic或oblique。", + "animationIterationCountTip": "定义动画运行的次数。例如：infinite，1或3。", + "opacityTip": "设置元素的透明度级别。例如：1（不透明），0.5（50%透明），0（不可见）。", + "boxShadowColorTip": "定义盒子阴影的颜色。例如：rgba(0, 0, 0, 0.3)，#FF5733。", + "chartBackgroundColorTip": "设置图表的背景颜色。例如：#FFFFFF，rgba(255, 255, 255, 0.8)。", + "chartGradientColorTip": "指定图表背景的渐变颜色。例如：linear-gradient(to right, #ff7e5f, #feb47b)。", + "chartShadowColorTip": "定义图表阴影的颜色。例如：rgba(0, 0, 0, 0.2)，#333333。", + "chartBorderColorTip": "指定图表边框的颜色。例如：#000000，rgba(0, 0, 0, 0.5)。", + "chartTextColorTip": "设置图表文字的颜色。例如：#333333，rgba(51, 51, 51, 1)。", + "boxShadowTip": "定义元素的投影阴影。例如：0px 4px 8px rgba(0, 0, 0, 0.3)，inset 0px 2px 5px rgba(255, 255, 255, 0.5)。", + "animationDelayTip": "指定动画开始前的延迟时间。例如：1s，500ms，0。", + "animationDurationTip": "设置动画的持续时间。例如：2s，3s，500ms。", + "paddingTip": "定义元素内部的填充空间。例如：10px，2em，5%。您还可以组合使用，例如：0px 20px，或为四个方向分别指定：10px 21px 5px 20px。", + "containerHeaderPaddingTip": "定义容器标题的填充空间。例如：10px，1rem。", + "containerSiderPaddingTip": "定义容器侧边的填充空间。例如：8px，1em。", + "containerFooterPaddingTip": "定义容器底部的填充空间。例如：12px，1rem。", + "containerBodyPaddingTip": "定义容器主体的填充空间。例如：15px，2em。", + "textSizeTip": "指定文字的字体大小。例如：14px，1.2em，110%。", + "textWeightTip": "指定文字的字体粗细。例如：normal，bold，400。", + "fontFamilyTip": "指定文字的字体系列。例如：Arial，Verdana，'Courier New'。", + "textDecorationTip": "定义文字的装饰。例如：underline，line-through，none。", + "textTransformTip": "指定文字的大小写格式。例如：uppercase，lowercase，capitalize。", + "fontStyleTip": "定义文字的字体样式。例如：normal，italic，oblique。", + "backgroundImageTip": "指定元素的背景图像。例如：url('image.jpg')，linear-gradient(to right, #ff7e5f, #feb47b)。", + "headerBackgroundImageTip": "指定标题的背景图像。例如：url('header.jpg')。", + "footerBackgroundImageTip": "指定页脚的背景图像。例如：url('footer.jpg')。", + "backgroundImageRepeatTip": "定义背景图像的重复方式。例如：no-repeat，repeat-x，repeat-y。", + "headerBackgroundImageRepeatTip": "定义标题背景图像的重复方式。例如：repeat-x，no-repeat。", + "footerBackgroundImageRepeatTip": "定义页脚背景图像的重复方式。例如：repeat-y，no-repeat。", + "backgroundImageSizeTip": "定义背景图像的大小。例如：cover，contain，50% 50%。", + "backgroundImagePositionTip": "定义背景图像的位置。例如：center，top right，10% 20%。", + "backgroundImageOriginTip": "指定背景图像的定位区域。例如：padding-box，border-box，content-box。", + "headerBackgroundImageOriginTip": "指定标题背景图像的定位区域。例如：padding-box，border-box，content-box。", + "footerBackgroundImageOriginTip": "指定页脚背景图像的定位区域。例如：padding-box，border-box，content-box。", + "rotationTip": "指定元素的旋转角度。例如：45deg，90deg，-180deg。", + "lineHeightTip": "定义文字行高。例如：1.5，2，120%。" + }, export: { @@ -598,10 +688,14 @@ export const zh: typeof en = { executeJSCode: "运行JavaScript代码", importFromQueryLibrary: "从查询库导入", importFromFile: "从文件导入", - triggerType: "触发方式", - triggerTypeAuto: "输入更改或页面加载时触发", - triggerTypePageLoad: "页面加载时触发", - triggerTypeManual: "手动触发", + "triggerType": "触发条件...", + "triggerTypeAuto": "输入更改或页面加载时", + "triggerTypePageLoad": "当应用程序（页面）加载时", + "triggerTypeManual": "仅当您手动触发时", + "triggerTypeInputChange": "当输入更改时", + "triggerTypeQueryExec": "查询执行后", + "triggerTypeTimeout": "应用程序（页面）加载后和超时", + "delayTime": "延迟时间", chooseDataSource: "选择数据源", method: "方法", updateExceptionDataSourceTitle: "更新失败的数据源", @@ -1400,6 +1494,7 @@ export const zh: typeof en = { dropdown: { onlyMenu: "仅菜单", textDesc: "当前显示在按钮上的文本", + triggerMode: "触发方式" }, textShow: { // eslint-disable-next-line only-ascii/only-ascii @@ -1502,6 +1597,7 @@ export const zh: typeof en = { type: "类型", tableSize: "表格尺寸", hideHeader: "隐藏表头", + hideToolbar: "隐藏表工具栏（页脚）", fixedHeader: "固定表头", fixedHeaderTooltip: "垂直滚动表格的标题将被固定", fixedToolbar: "固定工具栏", diff --git a/client/packages/lowcoder/src/index.sdk.ts b/client/packages/lowcoder/src/index.sdk.ts index ffea3d32b..4d9f9bcf6 100644 --- a/client/packages/lowcoder/src/index.sdk.ts +++ b/client/packages/lowcoder/src/index.sdk.ts @@ -2,6 +2,7 @@ import numbro from "numbro"; import Papa from "papaparse"; import * as uuid from "uuid"; import * as supabase from "@supabase/supabase-js"; +import * as alasql from "alasql"; import * as styledNameExports from "styled-components"; import styledDefault from "styled-components"; @@ -136,3 +137,4 @@ window.numbro = numbro; window.Papa = Papa; window.uuid = uuid; window.supabase = supabase; +window.alasql = alasql; diff --git a/client/packages/lowcoder/src/index.ts b/client/packages/lowcoder/src/index.ts index 55906f99c..310ff61c7 100644 --- a/client/packages/lowcoder/src/index.ts +++ b/client/packages/lowcoder/src/index.ts @@ -3,6 +3,7 @@ import ResizeObserver from "resize-observer-polyfill"; import numbro from "numbro"; import Papa from "papaparse"; import * as supabase from "@supabase/supabase-js"; +import * as alasql from "alasql"; import * as uuid from "uuid"; import "regenerator-runtime/runtime"; @@ -18,6 +19,7 @@ window.numbro = numbro; window.Papa = Papa; window.uuid = uuid; window.supabase = supabase; +window.alasql = alasql; // for chrome 63 if (!window.ResizeObserver) { diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/common/Example.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/common/Example.tsx index 1a6d6c571..968fde342 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/common/Example.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/common/Example.tsx @@ -90,6 +90,7 @@ interface IBoundProps { const Bound = styled.div` padding: 5px; border: ${({ show }) => `1px dashed ${show ? "rgb(51, 119, 255)" : "transparent"}`}; + transform: translate(0); `; const StyledBorderIcon = styled(ShowBorderIcon)` diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/FloatButton.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/FloatButton.tsx index 3e94f40db..252e3d782 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/FloatButton.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/FloatButton.tsx @@ -3,54 +3,72 @@ import { trans } from "i18n"; import Example from "../../common/Example"; import ExampleGroup from "../../common/ExampleGroup"; +const buttons = { + "manual": [ + { + "id": 0, + "label": "Option 1", + "badge": "1", + "description": "", + "icon": "/icon:antd/filetextoutlined" + }, + { + "id": 1, + "label": "Option 2", + "badge": "0", + "description": "", + "icon": "/icon:antd/filetextoutlined" + } + ] +}; + export default function FloatButtonExample() { return ( <> + + diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/IconButton.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/IconButton.tsx index 666e1ab68..67a3fad0d 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/IconButton.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/IconButton.tsx @@ -1,4 +1,4 @@ -import { IconComp } from "comps/comps/iconComp"; +import { ControlButton } from "comps/comps/meetingComp/controlButton"; import { trans } from "i18n"; import Example from "../../common/Example"; import ExampleGroup from "../../common/ExampleGroup"; @@ -8,59 +8,110 @@ export default function IconButtonExample() { <> + - + + + diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/CalendarInputComp/Calendar.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/CalendarInputComp/Calendar.tsx new file mode 100644 index 000000000..6370df675 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/CalendarInputComp/Calendar.tsx @@ -0,0 +1,25 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const ChartCompWithDefault = uiCompRegistry["calendar"].comp; + +export default function CalendarExample() { + return ( + <> + + + + + ); +} \ No newline at end of file diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/BasicChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/BasicChart.tsx new file mode 100644 index 000000000..75a9e7de9 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/BasicChart.tsx @@ -0,0 +1,360 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const ChartCompWithDefault = uiCompRegistry["basicChart"].comp; + +const defaultDataSource = [ + { + date: "2021-09", + department: "Administration", + spending: 9003, + budget: 8000, + }, + { + date: "2021-09", + department: "Finance", + spending: 3033, + budget: 4000, + }, + { + date: "2021-09", + department: "Sales", + spending: 9230, + budget: 8000, + }, + { + date: "2021-10", + department: "Administration", + spending: 13032, + budget: 15000, + }, + { + date: "2021-10", + department: "Finance", + spending: 2300, + budget: 5000, + }, + { + date: "2021-10", + department: "Sales", + spending: 7323.5, + budget: 8000, + }, + { + date: "2021-11", + department: "Administration", + spending: 13000, + budget: 16023, + }, + { + date: "2021-11", + department: "Finance", + spending: 3569.5, + budget: 3000, + }, + { + date: "2021-11", + department: "Sales", + spending: 10000, + budget: 9932, + }, + { + date: "2021-12", + department: "Administration", + spending: 18033, + budget: 20000, + }, + { + date: "2021-12", + department: "Finance", + spending: 4890, + budget: 4500, + }, + { + date: "2021-12", + department: "Sales", + spending: 9322, + budget: 8000, + }, +]; + +const defaultEchartsJsonOption = { + title: { + text: "Funnel Chart", + left: "center", + }, + backgroundColor: "#ffffff", + color: chartColorPalette, + tooltip: { + trigger: "item", + formatter: "{a}
{b} : {c}%", + }, + legend: { + data: ["Show", "Click", "Visit", "Query", "Buy"], + top: "bottom", + }, + series: [ + { + name: "Funnel", + type: "funnel", + left: "10%", + top: 60, + bottom: 60, + width: "80%", + min: 0, + max: 100, + gap: 2, + label: { + show: true, + position: "inside", + }, + data: [ + { value: 100, name: "Show" }, + { value: 80, name: "Click" }, + { value: 60, name: "Visit" }, + { value: 40, name: "Query" }, + { value: 20, name: "Buy" }, + ], + }, + ], +}; + +const data = JSON.stringify(defaultDataSource); +const echartsOption = JSON.stringify(defaultEchartsJsonOption); + +export default function ChartExample() { + const blackListConfig: string[] = ["data", "echartsOption", "series"]; + const series = [ + { + columnName: "spending", + seriesName: "Spending", + hide: false, + dataIndex: "b498129d", + }, + { + columnName: "budget", + seriesName: "Budget", + hide: false, + dataIndex: "663942bf", + }, + ]; + return ( + <> + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/BasicChartLegacy.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/BasicChartLegacy.tsx new file mode 100644 index 000000000..1e771dc5e --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/BasicChartLegacy.tsx @@ -0,0 +1,380 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const ChartCompWithDefault = uiCompRegistry["basicChart"].comp; + +const defaultDataSource = [ + { + date: "2021-09", + department: "Administration", + spending: 9003, + budget: 8000, + }, + { + date: "2021-09", + department: "Finance", + spending: 3033, + budget: 4000, + }, + { + date: "2021-09", + department: "Sales", + spending: 9230, + budget: 8000, + }, + { + date: "2021-10", + department: "Administration", + spending: 13032, + budget: 15000, + }, + { + date: "2021-10", + department: "Finance", + spending: 2300, + budget: 5000, + }, + { + date: "2021-10", + department: "Sales", + spending: 7323.5, + budget: 8000, + }, + { + date: "2021-11", + department: "Administration", + spending: 13000, + budget: 16023, + }, + { + date: "2021-11", + department: "Finance", + spending: 3569.5, + budget: 3000, + }, + { + date: "2021-11", + department: "Sales", + spending: 10000, + budget: 9932, + }, + { + date: "2021-12", + department: "Administration", + spending: 18033, + budget: 20000, + }, + { + date: "2021-12", + department: "Finance", + spending: 4890, + budget: 4500, + }, + { + date: "2021-12", + department: "Sales", + spending: 9322, + budget: 8000, + }, +]; + +const defaultEchartsJsonOption = { + title: { + text: "Funnel Chart", + left: "center", + }, + backgroundColor: "#ffffff", + color: chartColorPalette, + tooltip: { + trigger: "item", + formatter: "{a}
{b} : {c}%", + }, + legend: { + data: ["Show", "Click", "Visit", "Query", "Buy"], + top: "bottom", + }, + series: [ + { + name: "Funnel", + type: "funnel", + left: "10%", + top: 60, + bottom: 60, + width: "80%", + min: 0, + max: 100, + gap: 2, + label: { + show: true, + position: "inside", + }, + data: [ + { value: 100, name: "Show" }, + { value: 80, name: "Click" }, + { value: 60, name: "Visit" }, + { value: 40, name: "Query" }, + { value: 20, name: "Buy" }, + ], + }, + ], +}; + +const data = JSON.stringify(defaultDataSource); +const echartsOption = JSON.stringify(defaultEchartsJsonOption); + +export default function ChartExample() { + const blackListConfig: string[] = ["data", "echartsOption", "series"]; + const series = [ + { + columnName: "spending", + seriesName: "Spending", + hide: false, + dataIndex: "b498129d", + }, + { + columnName: "budget", + seriesName: "Budget", + hide: false, + dataIndex: "663942bf", + }, + ]; + return ( + <> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/CandleStickChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/CandleStickChart.tsx new file mode 100644 index 000000000..544055abe --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/CandleStickChart.tsx @@ -0,0 +1,170 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const ChartCompWithDefault = uiCompRegistry["candleStickChart"].comp; + +const defaultEchartsJsonOption = { + "xAxis": { + "data": [ + "Day 1", + "Day 2", + "Day 3", + "Day 4", + "Day 5" + ] + }, + "data": [ + [ + 150, + 100, + 50, + 200 + ], + [ + 120, + 220, + 80, + 180 + ], + [ + 80, + 150, + 60, + 130 + ], + [ + 230, + 130, + 110, + 190 + ], + [ + 90, + 180, + 70, + 160 + ] + ] +}; + +const echartsOption = JSON.stringify(defaultEchartsJsonOption); + +export default function CandleStickChartExample() { + const blackListConfig: string[] = ["echartsOption"]; + return ( + <> + + + + + + + + + + + + + + + + + + ); +} diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/Drawer.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/Drawer.tsx new file mode 100644 index 000000000..e6d9806ef --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/Drawer.tsx @@ -0,0 +1,116 @@ +import { DrawerComp } from "comps/hooks/drawerComp"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const container= { + "layout": { + "66becc94": { + "i": "66becc94", + "h": 6, + "w": 19, + "x": 2, + "y": 0, + "pos": 0 + }, + "735d7cd0": { + "i": "735d7cd0", + "h": 6, + "w": 4, + "x": 12, + "y": 6, + "pos": 1 + }, + "97e5bad5": { + "i": "97e5bad5", + "h": 6, + "w": 4, + "x": 16, + "y": 6, + "pos": 1 + } + }, + "items": { + "66becc94": { + "compType": "text", + "comp": { + "text": "### Would you like to save the changes?", + "autoHeight": "auto", + "type": "markdown", + "horizontalAlignment": "left", + "contentScrollBar": true, + "verticalAlignment": "center", + "margin": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "padding": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "text1" + }, + "97e5bad5": { + "compType": "button", + "comp": { + "text": "No", + "type": "", + "form": "", + "style": { + "background": "#E60202" + }, + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "button1" + }, + "735d7cd0": { + "compType": "button", + "comp": { + "text": "Yes", + "type": "", + "form": "", + "style": { + "background": "#1C8701" + }, + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "button2" + } + } +}; + +export default function DrawerExample() { + return ( + <> + + + + + ); +} diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/FunnelChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/FunnelChart.tsx new file mode 100644 index 000000000..424b8a102 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/FunnelChart.tsx @@ -0,0 +1,306 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const ChartCompWithDefault = uiCompRegistry["funnelChart"].comp; + +export default function FunnelChartExample() { + return ( + <> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GanttChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GanttChart.tsx new file mode 100644 index 000000000..5107be785 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GanttChart.tsx @@ -0,0 +1,25 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const ChartCompWithDefault = uiCompRegistry["ganttChart"].comp; + +export default function GanttChartExample() { + return ( + <> + + + + + ); +} \ No newline at end of file diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GaugeChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GaugeChart.tsx new file mode 100644 index 000000000..7a57ee549 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GaugeChart.tsx @@ -0,0 +1,72 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const ChartCompWithDefault = uiCompRegistry["gaugeChart"].comp; + +export default function GaugeChartExample() { + return ( + <> + + + + + + + + + + ); +} diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GeoMapChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GeoMapChart.tsx new file mode 100644 index 000000000..dd6bf3fb5 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GeoMapChart.tsx @@ -0,0 +1,51 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const ChartCompWithDefault = uiCompRegistry["chartsGeoMap"].comp; + +const defaultDataSource = "[\n {\n \"date\": \"2021-09\",\n \"department\": \"Administration\",\n \"spending\": 9003,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Finance\",\n \"spending\": 3033,\n \"budget\": 4000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Sales\",\n \"spending\": 9230,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Administration\",\n \"spending\": 13032,\n \"budget\": 15000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Finance\",\n \"spending\": 2300,\n \"budget\": 5000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Sales\",\n \"spending\": 7323.5,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Administration\",\n \"spending\": 13000,\n \"budget\": 16023\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Finance\",\n \"spending\": 3569.5,\n \"budget\": 3000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Sales\",\n \"spending\": 10000,\n \"budget\": 9932\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Administration\",\n \"spending\": 18033,\n \"budget\": 20000\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Finance\",\n \"spending\": 4890,\n \"budget\": 4500\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Sales\",\n \"spending\": 9322,\n \"budget\": 8000\n }\n]"; + +const defaultEchartsJsonOption = "{\n \"xAxis\": {\n \"data\": [\n \"Day 1\",\n \"Day 2\",\n \"Day 3\",\n \"Day 4\",\n \"Day 5\"\n ]\n },\n \"data\": [\n [\n 100,\n 200,\n 50,\n 150\n ],\n [\n 120,\n 220,\n 80,\n 180\n ],\n [\n 80,\n 150,\n 60,\n 130\n ],\n [\n 130,\n 230,\n 110,\n 190\n ],\n [\n 90,\n 180,\n 70,\n 160\n ]\n ]\n}"; + +const data = JSON.stringify(defaultDataSource); +const echartsOption = JSON.stringify(defaultEchartsJsonOption); + +export default function GeoMapChartExample() { + const blackListConfig: string[] = ["data", "echartsOption", "series"]; + const series = [ + { + "columnName": "spending", + "seriesName": "Spending", + "dataIndex": "f011b34c" + }, + { + "columnName": "budget", + "seriesName": "Budget", + "dataIndex": "30e02269" + } +]; + return ( + <> + + + + + ); +} diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GraphChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GraphChart.tsx new file mode 100644 index 000000000..3024a613b --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GraphChart.tsx @@ -0,0 +1,51 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const ChartCompWithDefault = uiCompRegistry["graphChart"].comp; + +const defaultDataSource = "[\n {\n \"date\": \"2021-09\",\n \"department\": \"Administration\",\n \"spending\": 9003,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Finance\",\n \"spending\": 3033,\n \"budget\": 4000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Sales\",\n \"spending\": 9230,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Administration\",\n \"spending\": 13032,\n \"budget\": 15000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Finance\",\n \"spending\": 2300,\n \"budget\": 5000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Sales\",\n \"spending\": 7323.5,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Administration\",\n \"spending\": 13000,\n \"budget\": 16023\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Finance\",\n \"spending\": 3569.5,\n \"budget\": 3000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Sales\",\n \"spending\": 10000,\n \"budget\": 9932\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Administration\",\n \"spending\": 18033,\n \"budget\": 20000\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Finance\",\n \"spending\": 4890,\n \"budget\": 4500\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Sales\",\n \"spending\": 9322,\n \"budget\": 8000\n }\n]"; + +const defaultEchartsJsonOption = "{\n \"xAxis\": {\n \"data\": [\n \"Day 1\",\n \"Day 2\",\n \"Day 3\",\n \"Day 4\",\n \"Day 5\"\n ]\n },\n \"data\": [\n [\n 100,\n 200,\n 50,\n 150\n ],\n [\n 120,\n 220,\n 80,\n 180\n ],\n [\n 80,\n 150,\n 60,\n 130\n ],\n [\n 130,\n 230,\n 110,\n 190\n ],\n [\n 90,\n 180,\n 70,\n 160\n ]\n ]\n}"; + +const data = JSON.stringify(defaultDataSource); +const echartsOption = JSON.stringify(defaultEchartsJsonOption); + +export default function GraphChartExample() { + const blackListConfig: string[] = ["data", "echartsOption", "series"]; + const series = [ + { + "columnName": "spending", + "seriesName": "Spending", + "dataIndex": "f011b34c" + }, + { + "columnName": "budget", + "seriesName": "Budget", + "dataIndex": "30e02269" + } +]; + return ( + <> + + + + + ); +} diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/HeatmapChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/HeatmapChart.tsx new file mode 100644 index 000000000..c2a60b7eb --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/HeatmapChart.tsx @@ -0,0 +1,51 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const ChartCompWithDefault = uiCompRegistry["heatmapChart"].comp; + +const defaultDataSource = "[\n {\n \"date\": \"2021-09\",\n \"department\": \"Administration\",\n \"spending\": 9003,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Finance\",\n \"spending\": 3033,\n \"budget\": 4000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Sales\",\n \"spending\": 9230,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Administration\",\n \"spending\": 13032,\n \"budget\": 15000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Finance\",\n \"spending\": 2300,\n \"budget\": 5000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Sales\",\n \"spending\": 7323.5,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Administration\",\n \"spending\": 13000,\n \"budget\": 16023\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Finance\",\n \"spending\": 3569.5,\n \"budget\": 3000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Sales\",\n \"spending\": 10000,\n \"budget\": 9932\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Administration\",\n \"spending\": 18033,\n \"budget\": 20000\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Finance\",\n \"spending\": 4890,\n \"budget\": 4500\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Sales\",\n \"spending\": 9322,\n \"budget\": 8000\n }\n]"; + +const defaultEchartsJsonOption = "{\n \"xAxis\": {\n \"data\": [\n \"Day 1\",\n \"Day 2\",\n \"Day 3\",\n \"Day 4\",\n \"Day 5\"\n ]\n },\n \"data\": [\n [\n 100,\n 200,\n 50,\n 150\n ],\n [\n 120,\n 220,\n 80,\n 180\n ],\n [\n 80,\n 150,\n 60,\n 130\n ],\n [\n 130,\n 230,\n 110,\n 190\n ],\n [\n 90,\n 180,\n 70,\n 160\n ]\n ]\n}"; + +const data = JSON.stringify(defaultDataSource); +const echartsOption = JSON.stringify(defaultEchartsJsonOption); + +export default function HeatmapChartExample() { + const blackListConfig: string[] = ["data", "echartsOption", "series"]; + const series = [ + { + "columnName": "spending", + "seriesName": "Spending", + "dataIndex": "f011b34c" + }, + { + "columnName": "budget", + "seriesName": "Budget", + "dataIndex": "30e02269" + } +]; + return ( + <> + + + + + ); +} diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/HillChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/HillChart.tsx new file mode 100644 index 000000000..09d371666 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/HillChart.tsx @@ -0,0 +1,25 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const ChartCompWithDefault = uiCompRegistry["hillchart"].comp; + +export default function HillChartExample() { + return ( + <> + + + + + ); +} \ No newline at end of file diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/MermaidChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/MermaidChart.tsx new file mode 100644 index 000000000..e27c85d4d --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/MermaidChart.tsx @@ -0,0 +1,51 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const ChartCompWithDefault = uiCompRegistry["mermaid"].comp; + +const defaultDataSource = "[\n {\n \"date\": \"2021-09\",\n \"department\": \"Administration\",\n \"spending\": 9003,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Finance\",\n \"spending\": 3033,\n \"budget\": 4000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Sales\",\n \"spending\": 9230,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Administration\",\n \"spending\": 13032,\n \"budget\": 15000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Finance\",\n \"spending\": 2300,\n \"budget\": 5000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Sales\",\n \"spending\": 7323.5,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Administration\",\n \"spending\": 13000,\n \"budget\": 16023\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Finance\",\n \"spending\": 3569.5,\n \"budget\": 3000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Sales\",\n \"spending\": 10000,\n \"budget\": 9932\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Administration\",\n \"spending\": 18033,\n \"budget\": 20000\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Finance\",\n \"spending\": 4890,\n \"budget\": 4500\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Sales\",\n \"spending\": 9322,\n \"budget\": 8000\n }\n]"; + +const defaultEchartsJsonOption = "{\n \"xAxis\": {\n \"data\": [\n \"Day 1\",\n \"Day 2\",\n \"Day 3\",\n \"Day 4\",\n \"Day 5\"\n ]\n },\n \"data\": [\n [\n 100,\n 200,\n 50,\n 150\n ],\n [\n 120,\n 220,\n 80,\n 180\n ],\n [\n 80,\n 150,\n 60,\n 130\n ],\n [\n 130,\n 230,\n 110,\n 190\n ],\n [\n 90,\n 180,\n 70,\n 160\n ]\n ]\n}"; + +const data = JSON.stringify(defaultDataSource); +const echartsOption = JSON.stringify(defaultEchartsJsonOption); + +export default function MermaidChartExample() { + const blackListConfig: string[] = ["data", "echartsOption", "series"]; + const series = [ + { + "columnName": "spending", + "seriesName": "Spending", + "dataIndex": "f011b34c" + }, + { + "columnName": "budget", + "seriesName": "Budget", + "dataIndex": "30e02269" + } +]; + return ( + <> + + + + + ); +} diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/Modal.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/Modal.tsx new file mode 100644 index 000000000..dfc05897e --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/Modal.tsx @@ -0,0 +1,116 @@ +import { ModalComp } from "comps/hooks/modalComp"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const container= { + "layout": { + "66becc94": { + "i": "66becc94", + "h": 6, + "w": 19, + "x": 2, + "y": 0, + "pos": 0 + }, + "735d7cd0": { + "i": "735d7cd0", + "h": 6, + "w": 4, + "x": 12, + "y": 6, + "pos": 1 + }, + "97e5bad5": { + "i": "97e5bad5", + "h": 6, + "w": 4, + "x": 16, + "y": 6, + "pos": 1 + } + }, + "items": { + "66becc94": { + "compType": "text", + "comp": { + "text": "### Would you like to save the changes?", + "autoHeight": "auto", + "type": "markdown", + "horizontalAlignment": "left", + "contentScrollBar": true, + "verticalAlignment": "center", + "margin": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "padding": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "text1" + }, + "97e5bad5": { + "compType": "button", + "comp": { + "text": "No", + "type": "", + "form": "", + "style": { + "background": "#E60202" + }, + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "button1" + }, + "735d7cd0": { + "compType": "button", + "comp": { + "text": "Yes", + "type": "", + "form": "", + "style": { + "background": "#1C8701" + }, + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "button2" + } + } +}; + +export default function ModalExample() { + return ( + <> + + + + + ); +} diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/OpenLayersGeoMap.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/OpenLayersGeoMap.tsx new file mode 100644 index 000000000..306871822 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/OpenLayersGeoMap.tsx @@ -0,0 +1,51 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const ChartCompWithDefault = uiCompRegistry["openLayersGeoMap"].comp; + +const defaultDataSource = "[\n {\n \"date\": \"2021-09\",\n \"department\": \"Administration\",\n \"spending\": 9003,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Finance\",\n \"spending\": 3033,\n \"budget\": 4000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Sales\",\n \"spending\": 9230,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Administration\",\n \"spending\": 13032,\n \"budget\": 15000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Finance\",\n \"spending\": 2300,\n \"budget\": 5000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Sales\",\n \"spending\": 7323.5,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Administration\",\n \"spending\": 13000,\n \"budget\": 16023\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Finance\",\n \"spending\": 3569.5,\n \"budget\": 3000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Sales\",\n \"spending\": 10000,\n \"budget\": 9932\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Administration\",\n \"spending\": 18033,\n \"budget\": 20000\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Finance\",\n \"spending\": 4890,\n \"budget\": 4500\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Sales\",\n \"spending\": 9322,\n \"budget\": 8000\n }\n]"; + +const defaultEchartsJsonOption = "{\n \"xAxis\": {\n \"data\": [\n \"Day 1\",\n \"Day 2\",\n \"Day 3\",\n \"Day 4\",\n \"Day 5\"\n ]\n },\n \"data\": [\n [\n 100,\n 200,\n 50,\n 150\n ],\n [\n 120,\n 220,\n 80,\n 180\n ],\n [\n 80,\n 150,\n 60,\n 130\n ],\n [\n 130,\n 230,\n 110,\n 190\n ],\n [\n 90,\n 180,\n 70,\n 160\n ]\n ]\n}"; + +const data = JSON.stringify(defaultDataSource); +const echartsOption = JSON.stringify(defaultEchartsJsonOption); + +export default function OpenLayersGeoMapChartExample() { + const blackListConfig: string[] = ["data", "echartsOption", "series"]; + const series = [ + { + "columnName": "spending", + "seriesName": "Spending", + "dataIndex": "f011b34c" + }, + { + "columnName": "budget", + "seriesName": "Budget", + "dataIndex": "30e02269" + } +]; + return ( + <> + + + + + ); +} diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/RadarChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/RadarChart.tsx new file mode 100644 index 000000000..662ece815 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/RadarChart.tsx @@ -0,0 +1,51 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const ChartCompWithDefault = uiCompRegistry["radarChart"].comp; + +const defaultDataSource = "[\n {\n \"date\": \"2021-09\",\n \"department\": \"Administration\",\n \"spending\": 9003,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Finance\",\n \"spending\": 3033,\n \"budget\": 4000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Sales\",\n \"spending\": 9230,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Administration\",\n \"spending\": 13032,\n \"budget\": 15000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Finance\",\n \"spending\": 2300,\n \"budget\": 5000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Sales\",\n \"spending\": 7323.5,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Administration\",\n \"spending\": 13000,\n \"budget\": 16023\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Finance\",\n \"spending\": 3569.5,\n \"budget\": 3000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Sales\",\n \"spending\": 10000,\n \"budget\": 9932\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Administration\",\n \"spending\": 18033,\n \"budget\": 20000\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Finance\",\n \"spending\": 4890,\n \"budget\": 4500\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Sales\",\n \"spending\": 9322,\n \"budget\": 8000\n }\n]"; + +const defaultEchartsJsonOption = "{\n \"xAxis\": {\n \"data\": [\n \"Day 1\",\n \"Day 2\",\n \"Day 3\",\n \"Day 4\",\n \"Day 5\"\n ]\n },\n \"data\": [\n [\n 100,\n 200,\n 50,\n 150\n ],\n [\n 120,\n 220,\n 80,\n 180\n ],\n [\n 80,\n 150,\n 60,\n 130\n ],\n [\n 130,\n 230,\n 110,\n 190\n ],\n [\n 90,\n 180,\n 70,\n 160\n ]\n ]\n}"; + +const data = JSON.stringify(defaultDataSource); +const echartsOption = JSON.stringify(defaultEchartsJsonOption); + +export default function RadarChartExample() { + const blackListConfig: string[] = ["data", "echartsOption", "series"]; + const series = [ + { + "columnName": "spending", + "seriesName": "Spending", + "dataIndex": "f011b34c" + }, + { + "columnName": "budget", + "seriesName": "Budget", + "dataIndex": "30e02269" + } +]; + return ( + <> + + + + + ); +} diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/SankeyChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/SankeyChart.tsx new file mode 100644 index 000000000..c169e7b37 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/SankeyChart.tsx @@ -0,0 +1,51 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const ChartCompWithDefault = uiCompRegistry["sankeyChart"].comp; + +const defaultDataSource = "[\n {\n \"date\": \"2021-09\",\n \"department\": \"Administration\",\n \"spending\": 9003,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Finance\",\n \"spending\": 3033,\n \"budget\": 4000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Sales\",\n \"spending\": 9230,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Administration\",\n \"spending\": 13032,\n \"budget\": 15000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Finance\",\n \"spending\": 2300,\n \"budget\": 5000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Sales\",\n \"spending\": 7323.5,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Administration\",\n \"spending\": 13000,\n \"budget\": 16023\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Finance\",\n \"spending\": 3569.5,\n \"budget\": 3000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Sales\",\n \"spending\": 10000,\n \"budget\": 9932\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Administration\",\n \"spending\": 18033,\n \"budget\": 20000\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Finance\",\n \"spending\": 4890,\n \"budget\": 4500\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Sales\",\n \"spending\": 9322,\n \"budget\": 8000\n }\n]"; + +const defaultEchartsJsonOption = "{\n \"xAxis\": {\n \"data\": [\n \"Day 1\",\n \"Day 2\",\n \"Day 3\",\n \"Day 4\",\n \"Day 5\"\n ]\n },\n \"data\": [\n [\n 100,\n 200,\n 50,\n 150\n ],\n [\n 120,\n 220,\n 80,\n 180\n ],\n [\n 80,\n 150,\n 60,\n 130\n ],\n [\n 130,\n 230,\n 110,\n 190\n ],\n [\n 90,\n 180,\n 70,\n 160\n ]\n ]\n}"; + +const data = JSON.stringify(defaultDataSource); +const echartsOption = JSON.stringify(defaultEchartsJsonOption); + +export default function SankeyChartExample() { + const blackListConfig: string[] = ["data", "echartsOption", "series"]; + const series = [ + { + "columnName": "spending", + "seriesName": "Spending", + "dataIndex": "f011b34c" + }, + { + "columnName": "budget", + "seriesName": "Budget", + "dataIndex": "30e02269" + } +]; + return ( + <> + + + + + ); +} diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/SunburstChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/SunburstChart.tsx new file mode 100644 index 000000000..c04aec9d4 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/SunburstChart.tsx @@ -0,0 +1,51 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const ChartCompWithDefault = uiCompRegistry["sunburstChart"].comp; + +const defaultDataSource = "[\n {\n \"date\": \"2021-09\",\n \"department\": \"Administration\",\n \"spending\": 9003,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Finance\",\n \"spending\": 3033,\n \"budget\": 4000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Sales\",\n \"spending\": 9230,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Administration\",\n \"spending\": 13032,\n \"budget\": 15000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Finance\",\n \"spending\": 2300,\n \"budget\": 5000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Sales\",\n \"spending\": 7323.5,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Administration\",\n \"spending\": 13000,\n \"budget\": 16023\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Finance\",\n \"spending\": 3569.5,\n \"budget\": 3000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Sales\",\n \"spending\": 10000,\n \"budget\": 9932\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Administration\",\n \"spending\": 18033,\n \"budget\": 20000\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Finance\",\n \"spending\": 4890,\n \"budget\": 4500\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Sales\",\n \"spending\": 9322,\n \"budget\": 8000\n }\n]"; + +const defaultEchartsJsonOption = "{\n \"xAxis\": {\n \"data\": [\n \"Day 1\",\n \"Day 2\",\n \"Day 3\",\n \"Day 4\",\n \"Day 5\"\n ]\n },\n \"data\": [\n [\n 100,\n 200,\n 50,\n 150\n ],\n [\n 120,\n 220,\n 80,\n 180\n ],\n [\n 80,\n 150,\n 60,\n 130\n ],\n [\n 130,\n 230,\n 110,\n 190\n ],\n [\n 90,\n 180,\n 70,\n 160\n ]\n ]\n}"; + +const data = JSON.stringify(defaultDataSource); +const echartsOption = JSON.stringify(defaultEchartsJsonOption); + +export default function SunburstChartExample() { + const blackListConfig: string[] = ["data", "echartsOption", "series"]; + const series = [ + { + "columnName": "spending", + "seriesName": "Spending", + "dataIndex": "f011b34c" + }, + { + "columnName": "budget", + "seriesName": "Budget", + "dataIndex": "30e02269" + } +]; + return ( + <> + + + + + ); +} diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/ThemeRiverChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/ThemeRiverChart.tsx new file mode 100644 index 000000000..b8dbe29d8 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/ThemeRiverChart.tsx @@ -0,0 +1,51 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const ChartCompWithDefault = uiCompRegistry["themeriverChart"].comp; + +const defaultDataSource = "[\n {\n \"date\": \"2021-09\",\n \"department\": \"Administration\",\n \"spending\": 9003,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Finance\",\n \"spending\": 3033,\n \"budget\": 4000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Sales\",\n \"spending\": 9230,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Administration\",\n \"spending\": 13032,\n \"budget\": 15000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Finance\",\n \"spending\": 2300,\n \"budget\": 5000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Sales\",\n \"spending\": 7323.5,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Administration\",\n \"spending\": 13000,\n \"budget\": 16023\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Finance\",\n \"spending\": 3569.5,\n \"budget\": 3000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Sales\",\n \"spending\": 10000,\n \"budget\": 9932\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Administration\",\n \"spending\": 18033,\n \"budget\": 20000\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Finance\",\n \"spending\": 4890,\n \"budget\": 4500\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Sales\",\n \"spending\": 9322,\n \"budget\": 8000\n }\n]"; + +const defaultEchartsJsonOption = "{\n \"xAxis\": {\n \"data\": [\n \"Day 1\",\n \"Day 2\",\n \"Day 3\",\n \"Day 4\",\n \"Day 5\"\n ]\n },\n \"data\": [\n [\n 100,\n 200,\n 50,\n 150\n ],\n [\n 120,\n 220,\n 80,\n 180\n ],\n [\n 80,\n 150,\n 60,\n 130\n ],\n [\n 130,\n 230,\n 110,\n 190\n ],\n [\n 90,\n 180,\n 70,\n 160\n ]\n ]\n}"; + +const data = JSON.stringify(defaultDataSource); +const echartsOption = JSON.stringify(defaultEchartsJsonOption); + +export default function ThemeRiverChartExample() { + const blackListConfig: string[] = ["data", "echartsOption", "series"]; + const series = [ + { + "columnName": "spending", + "seriesName": "Spending", + "dataIndex": "f011b34c" + }, + { + "columnName": "budget", + "seriesName": "Budget", + "dataIndex": "30e02269" + } +]; + return ( + <> + + + + + ); +} diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/TreeChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/TreeChart.tsx new file mode 100644 index 000000000..b0d10650f --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/TreeChart.tsx @@ -0,0 +1,51 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const ChartCompWithDefault = uiCompRegistry["treeChart"].comp; + +const defaultDataSource = "[\n {\n \"date\": \"2021-09\",\n \"department\": \"Administration\",\n \"spending\": 9003,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Finance\",\n \"spending\": 3033,\n \"budget\": 4000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Sales\",\n \"spending\": 9230,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Administration\",\n \"spending\": 13032,\n \"budget\": 15000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Finance\",\n \"spending\": 2300,\n \"budget\": 5000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Sales\",\n \"spending\": 7323.5,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Administration\",\n \"spending\": 13000,\n \"budget\": 16023\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Finance\",\n \"spending\": 3569.5,\n \"budget\": 3000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Sales\",\n \"spending\": 10000,\n \"budget\": 9932\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Administration\",\n \"spending\": 18033,\n \"budget\": 20000\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Finance\",\n \"spending\": 4890,\n \"budget\": 4500\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Sales\",\n \"spending\": 9322,\n \"budget\": 8000\n }\n]"; + +const defaultEchartsJsonOption = "{\n \"xAxis\": {\n \"data\": [\n \"Day 1\",\n \"Day 2\",\n \"Day 3\",\n \"Day 4\",\n \"Day 5\"\n ]\n },\n \"data\": [\n [\n 100,\n 200,\n 50,\n 150\n ],\n [\n 120,\n 220,\n 80,\n 180\n ],\n [\n 80,\n 150,\n 60,\n 130\n ],\n [\n 130,\n 230,\n 110,\n 190\n ],\n [\n 90,\n 180,\n 70,\n 160\n ]\n ]\n}"; + +const data = JSON.stringify(defaultDataSource); +const echartsOption = JSON.stringify(defaultEchartsJsonOption); + +export default function TreeChartExample() { + const blackListConfig: string[] = ["data", "echartsOption", "series"]; + const series = [ + { + "columnName": "spending", + "seriesName": "Spending", + "dataIndex": "f011b34c" + }, + { + "columnName": "budget", + "seriesName": "Budget", + "dataIndex": "30e02269" + } +]; + return ( + <> + + + + + ); +} diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/TreemapChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/TreemapChart.tsx new file mode 100644 index 000000000..35fdc1804 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/TreemapChart.tsx @@ -0,0 +1,51 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const ChartCompWithDefault = uiCompRegistry["treemapChart"].comp; + +const defaultDataSource = "[\n {\n \"date\": \"2021-09\",\n \"department\": \"Administration\",\n \"spending\": 9003,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Finance\",\n \"spending\": 3033,\n \"budget\": 4000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Sales\",\n \"spending\": 9230,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Administration\",\n \"spending\": 13032,\n \"budget\": 15000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Finance\",\n \"spending\": 2300,\n \"budget\": 5000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Sales\",\n \"spending\": 7323.5,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Administration\",\n \"spending\": 13000,\n \"budget\": 16023\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Finance\",\n \"spending\": 3569.5,\n \"budget\": 3000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Sales\",\n \"spending\": 10000,\n \"budget\": 9932\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Administration\",\n \"spending\": 18033,\n \"budget\": 20000\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Finance\",\n \"spending\": 4890,\n \"budget\": 4500\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Sales\",\n \"spending\": 9322,\n \"budget\": 8000\n }\n]"; + +const defaultEchartsJsonOption = "{\n \"xAxis\": {\n \"data\": [\n \"Day 1\",\n \"Day 2\",\n \"Day 3\",\n \"Day 4\",\n \"Day 5\"\n ]\n },\n \"data\": [\n [\n 100,\n 200,\n 50,\n 150\n ],\n [\n 120,\n 220,\n 80,\n 180\n ],\n [\n 80,\n 150,\n 60,\n 130\n ],\n [\n 130,\n 230,\n 110,\n 190\n ],\n [\n 90,\n 180,\n 70,\n 160\n ]\n ]\n}"; + +const data = JSON.stringify(defaultDataSource); +const echartsOption = JSON.stringify(defaultEchartsJsonOption); + +export default function TreemapChartExample() { + const blackListConfig: string[] = ["data", "echartsOption", "series"]; + const series = [ + { + "columnName": "spending", + "seriesName": "Spending", + "dataIndex": "f011b34c" + }, + { + "columnName": "budget", + "seriesName": "Budget", + "dataIndex": "30e02269" + } +]; + return ( + <> + + + + + ); +} diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/ColumnLayout.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/ColumnLayout.tsx index 7aaec0c2e..e6a59383c 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/ColumnLayout.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/ColumnLayout.tsx @@ -2,6 +2,269 @@ import { ColumnLayoutComp } from "comps/comps/columnLayout/columnLayout"; import Example from "../../common/Example"; import ExampleGroup from "../../common/ExampleGroup"; +const columns={ + "manual": [ + { + "id": 0, + "label": "Column1", + "key": "Column1", + "minWidth": "", + "background": "", + "backgroundImage": "", + "border": "", + "radius": "", + "margin": "", + "padding": "" + }, + { + "id": 1, + "label": "Column2", + "key": "Column2", + "minWidth": "", + "background": "", + "backgroundImage": "", + "border": "", + "radius": "", + "margin": "", + "padding": "" + }, + { + "id": 2, + "label": "Add Column1", + "key": "Add Column1", + "minWidth": "", + "background": "", + "backgroundImage": "", + "border": "", + "radius": "", + "margin": "", + "padding": "" + }, + { + "id": 3, + "label": "Add Column2", + "key": "Add Column2", + "minWidth": "", + "background": "", + "backgroundImage": "", + "border": "", + "radius": "", + "margin": "", + "padding": "" + }, + { + "id": 4, + "label": "Add Column3", + "key": "Add Column3", + "minWidth": "", + "background": "", + "backgroundImage": "", + "border": "", + "radius": "", + "margin": "", + "padding": "" + }, + { + "id": 5, + "label": "Add Column4", + "key": "Add Column4", + "minWidth": "", + "background": "", + "backgroundImage": "", + "border": "", + "radius": "", + "margin": "", + "padding": "" + } + ] +}; + +const container={ + "0": { + "layout": { + "d131aa12": { + "i": "d131aa12", + "h": 6, + "w": 17, + "x": 4, + "y": 5, + "pos": 1 + } + }, + "items": { + "d131aa12": { + "compType": "progress", + "comp": { + "value": "60", + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "progress1" + } + } + }, + "1": { + "layout": { + "e193cd76": { + "i": "e193cd76", + "h": 6, + "w": 24, + "x": 0, + "y": 5, + "pos": 0 + } + }, + "items": { + "e193cd76": { + "compType": "button", + "comp": { + "text": "Button", + "type": "", + "form": "", + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "button1" + } + } + }, + "2": { + "layout": { + "1d3eac41": { + "i": "1d3eac41", + "h": 7, + "w": 21, + "x": 1, + "y": 5, + "pos": 0 + } + }, + "items": { + "1d3eac41": { + "compType": "switch", + "comp": { + "defaultValue": "", + "value": "", + "label": { + "text": "Switch", + "width": "33", + "widthUnit": "%", + "position": "row", + "align": "left" + }, + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "switch1" + } + } + }, + "3": { + "layout": { + "5853c1f5": { + "i": "5853c1f5", + "h": 20, + "w": 15, + "x": 5, + "y": 0, + "pos": 0 + } + }, + "items": { + "5853c1f5": { + "compType": "progressCircle", + "comp": { + "value": "60", + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "progressCircle1" + } + } + }, + "4": { + "layout": { + "68b3d00f": { + "i": "68b3d00f", + "h": 6, + "w": 23, + "x": 1, + "y": 7, + "pos": 0 + } + }, + "items": { + "68b3d00f": { + "compType": "button", + "comp": { + "text": "Button", + "type": "", + "form": "", + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "button2" + } + } + }, + "5": { + "layout": { + "307f8e6b": { + "i": "307f8e6b", + "h": 10, + "w": 24, + "x": 0, + "y": 6, + "pos": 0 + } + }, + "items": { + "307f8e6b": { + "compType": "checkbox", + "comp": { + "defaultValue": "", + "value": "", + "label": { + "text": "Check box", + "width": "33", + "widthUnit": "%", + "position": "row", + "align": "left" + }, + "options": { + "optionType": "manual", + "manual": { + "manual": [ + { + "value": "1", + "label": "Option 1" + }, + { + "value": "2", + "label": "Option 2" + } + ] + }, + "mapData": { + "data": "[]" + } + }, + "layout": "horizontal", + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "checkbox1" + } + } + } +}; + export default function ColumnLayoutExample() { return ( <> @@ -11,37 +274,21 @@ export default function ColumnLayoutExample() { > - @@ -53,22 +300,47 @@ export default function ColumnLayoutExample() { > + diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/Container.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/Container.tsx index 84e0dd6ab..cc90bdf6e 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/Container.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/Container.tsx @@ -2,6 +2,150 @@ import { ContainerComp } from "comps/comps/containerComp/containerComp"; import Example from "../../common/Example"; import ExampleGroup from "../../common/ExampleGroup"; +const container={ + "header": { + "layout": { + "a6083c0a": { + "i": "a6083c0a", + "h": 5, + "w": 24, + "x": 0, + "y": 0 + } + }, + "items": { + "a6083c0a": { + "compType": "text", + "comp": { + "text": "### Welcome Back!", + "autoHeight": "auto", + "type": "markdown", + "horizontalAlignment": "center", + "contentScrollBar": true, + "verticalAlignment": "center", + "margin": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "padding": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "formTitle1" + } + } + }, + "body": { + "0": { + "view": { + "layout": { + "a6f7c0e4": { + "i": "a6f7c0e4", + "h": 7, + "w": 14, + "x": 0, + "y": 0, + "pos": 0 + }, + "c5b32ee6": { + "i": "c5b32ee6", + "h": 7, + "w": 14, + "x": 0, + "y": 7, + "pos": 1 + } + }, + "items": { + "a6f7c0e4": { + "compType": "input", + "comp": { + "defaultValue": "", + "value": "", + "label": { + "text": "Email", + "width": "33", + "widthUnit": "%", + "position": "row", + "align": "left" + }, + "validationType": "Email", + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "input1" + }, + "c5b32ee6": { + "compType": "password", + "comp": { + "defaultValue": "", + "value": "", + "label": { + "text": "Password", + "width": "33", + "widthUnit": "%", + "position": "row", + "align": "left" + }, + "validationType": "Regex", + "visibilityToggle": true, + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "password1" + } + } + } + } + }, + "footer": { + "layout": { + "95ccf34e": { + "i": "95ccf34e", + "h": 5, + "w": 10, + "x": 14, + "y": 0 + } + }, + "items": { + "95ccf34e": { + "compType": "button", + "comp": { + "text": "Login", + "type": "submit", + "form": "form1", + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "formButton1" + } + } + }, + "showHeader": true, + "showBody": true, + "showFooter": true, + "autoHeight": "auto", + "showVerticalScrollbar": false, + "horizontalGridCells": 24, + "scrollbars": false, + "style": { + "borderWidth": "1px" + }, + "appliedThemeId": "" +}; + export default function ContainerExample() { return ( <> @@ -10,37 +154,490 @@ export default function ContainerExample() { description="The Following Examples Show the Basic Usage of the Container Component." > - - - + + + + + + + + ); } \ No newline at end of file diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/PageLayout.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/PageLayout.tsx index 7cc6a9113..a80ce5f57 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/PageLayout.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/PageLayout.tsx @@ -2,24 +2,656 @@ import { PageLayoutComp } from "comps/comps/containerComp/pageLayoutComp"; import Example from "../../common/Example"; import ExampleGroup from "../../common/ExampleGroup"; +const container={ + "header": { + "layout": { + "f7820dbc": { + "i": "f7820dbc", + "h": 6, + "w": 24, + "x": 0, + "y": 0, + "pos": 0 + } + }, + "items": { + "f7820dbc": { + "compType": "text", + "comp": { + "text": "### Page Layout Header", + "autoHeight": "auto", + "type": "markdown", + "horizontalAlignment": "center", + "contentScrollBar": true, + "verticalAlignment": "center", + "margin": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "padding": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "text1" + } + } + }, + "sider": { + "layout": { + "a9d16086": { + "i": "a9d16086", + "h": 6, + "w": 22, + "x": 0, + "y": 0, + "pos": 0 + } + }, + "items": { + "a9d16086": { + "compType": "dropdown", + "comp": { + "text": "Menu", + "options": { + "optionType": "manual", + "manual": { + "manual": [ + { + "label": "Option 1" + }, + { + "label": "Option 2" + } + ] + }, + "mapData": { + "data": "[]" + } + }, + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "dropdown1" + } + } + }, + "body": { + "0": { + "view": { + "layout": { + "163bc2f3": { + "i": "163bc2f3", + "h": 45, + "w": 21, + "x": 3, + "y": 0, + "pos": 0 + } + }, + "items": { + "163bc2f3": { + "compType": "table", + "comp": { + "showRowGridBorder": true, + "showHRowGridBorder": true, + "autoHeight": "auto", + "data": "[\n {\n \"id\": 1,\n \"name\": \"Reagen Gilberthorpe\",\n \"date\": \"7/5/2022\",\n \"department\": \"Marketing\"\n },\n {\n \"id\": 2,\n \"name\": \"Haroun Lortzing\",\n \"date\": \"11/6/2022\",\n \"department\": \"Human Resources\"\n },\n {\n \"id\": 3,\n \"name\": \"Garret Kilmaster\",\n \"date\": \"11/14/2021\",\n \"department\": \"Research and Development\"\n },\n {\n \"id\": 4,\n \"name\": \"Israel Harrowsmith\",\n \"date\": \"4/3/2022\",\n \"department\": \"Training\"\n },\n {\n \"id\": 5,\n \"name\": \"Loren O'Lagen\",\n \"date\": \"9/10/2022\",\n \"department\": \"Services\"\n },\n {\n \"id\": 6,\n \"name\": \"Wallis Hothersall\",\n \"date\": \"4/18/2022\",\n \"department\": \"Accounting\"\n },\n {\n \"id\": 7,\n \"name\": \"Kaia Biskup\",\n \"date\": \"3/4/2022\",\n \"department\": \"Sales\"\n },\n {\n \"id\": 8,\n \"name\": \"Travers Saterweyte\",\n \"date\": \"1/9/2022\",\n \"department\": \"Human Resources\"\n },\n {\n \"id\": 9,\n \"name\": \"Mikey Niemetz\",\n \"date\": \"1/4/2022\",\n \"department\": \"Marketing\"\n },\n {\n \"id\": 10,\n \"name\": \"Mano Meckiff\",\n \"date\": \"2/19/2022\",\n \"department\": \"Research and Development\"\n }\n]", + "showDataLoadSpinner": true, + "columns": [ + { + "title": "ID", + "showTitle": true, + "isCustom": false, + "dataIndex": "id", + "width": "55", + "autoWidth": "fixed", + "render": { + "compType": "text", + "comp": { + "text": "{{currentCell}}" + } + }, + "align": "left", + "fixed": "close", + "background": "", + "margin": "", + "text": "", + "border": "", + "borderWidth": "", + "radius": "", + "textSize": "", + "textWeight": "normal", + "fontFamily": "sans-serif", + "fontStyle": "normal", + "textOverflow": "ellipsis", + "linkColor": "#3377ff", + "linkHoverColor": "", + "linkActiveColor": "", + "summaryColumns": [ + { + "isCustom": false, + "dataIndex": "", + "render": { + "compType": "text", + "comp": {} + }, + "align": "left", + "background": "", + "margin": "", + "text": "", + "border": "", + "radius": "", + "textSize": "", + "textWeight": "normal", + "fontFamily": "sans-serif", + "fontStyle": "normal", + "textOverflow": "ellipsis", + "linkColor": "#3377ff", + "linkHoverColor": "", + "linkActiveColor": "" + }, + { + "isCustom": false, + "dataIndex": "", + "render": { + "compType": "text", + "comp": {} + }, + "align": "left", + "background": "", + "margin": "", + "text": "", + "border": "", + "radius": "", + "textSize": "", + "textWeight": "normal", + "fontFamily": "sans-serif", + "fontStyle": "normal", + "textOverflow": "ellipsis", + "linkColor": "#3377ff", + "linkHoverColor": "", + "linkActiveColor": "" + }, + { + "isCustom": false, + "dataIndex": "", + "render": { + "compType": "text", + "comp": {} + }, + "align": "left", + "background": "", + "margin": "", + "text": "", + "border": "", + "radius": "", + "textSize": "", + "textWeight": "normal", + "fontFamily": "sans-serif", + "fontStyle": "normal", + "textOverflow": "ellipsis", + "linkColor": "#3377ff", + "linkHoverColor": "", + "linkActiveColor": "" + } + ] + }, + { + "title": "Name", + "showTitle": true, + "isCustom": false, + "dataIndex": "name", + "width": "200", + "autoWidth": "fixed", + "render": { + "compType": "text", + "comp": { + "text": "{{currentCell}}" + } + }, + "align": "left", + "fixed": "close", + "background": "", + "margin": "", + "text": "", + "border": "", + "borderWidth": "", + "radius": "", + "textSize": "", + "textWeight": "normal", + "fontFamily": "sans-serif", + "fontStyle": "normal", + "textOverflow": "ellipsis", + "linkColor": "#3377ff", + "linkHoverColor": "", + "linkActiveColor": "", + "summaryColumns": [ + { + "isCustom": false, + "dataIndex": "", + "render": { + "compType": "text", + "comp": {} + }, + "align": "left", + "background": "", + "margin": "", + "text": "", + "border": "", + "radius": "", + "textSize": "", + "textWeight": "normal", + "fontFamily": "sans-serif", + "fontStyle": "normal", + "textOverflow": "ellipsis", + "linkColor": "#3377ff", + "linkHoverColor": "", + "linkActiveColor": "" + }, + { + "isCustom": false, + "dataIndex": "", + "render": { + "compType": "text", + "comp": {} + }, + "align": "left", + "background": "", + "margin": "", + "text": "", + "border": "", + "radius": "", + "textSize": "", + "textWeight": "normal", + "fontFamily": "sans-serif", + "fontStyle": "normal", + "textOverflow": "ellipsis", + "linkColor": "#3377ff", + "linkHoverColor": "", + "linkActiveColor": "" + }, + { + "isCustom": false, + "dataIndex": "", + "render": { + "compType": "text", + "comp": {} + }, + "align": "left", + "background": "", + "margin": "", + "text": "", + "border": "", + "radius": "", + "textSize": "", + "textWeight": "normal", + "fontFamily": "sans-serif", + "fontStyle": "normal", + "textOverflow": "ellipsis", + "linkColor": "#3377ff", + "linkHoverColor": "", + "linkActiveColor": "" + } + ] + }, + { + "title": "Date", + "showTitle": true, + "isCustom": false, + "dataIndex": "date", + "width": "110", + "autoWidth": "fixed", + "render": { + "compType": "text", + "comp": { + "text": "{{currentCell}}" + } + }, + "align": "left", + "fixed": "close", + "background": "", + "margin": "", + "text": "", + "border": "", + "borderWidth": "", + "radius": "", + "textSize": "", + "textWeight": "normal", + "fontFamily": "sans-serif", + "fontStyle": "normal", + "textOverflow": "ellipsis", + "linkColor": "#3377ff", + "linkHoverColor": "", + "linkActiveColor": "", + "summaryColumns": [ + { + "isCustom": false, + "dataIndex": "", + "render": { + "compType": "text", + "comp": {} + }, + "align": "left", + "background": "", + "margin": "", + "text": "", + "border": "", + "radius": "", + "textSize": "", + "textWeight": "normal", + "fontFamily": "sans-serif", + "fontStyle": "normal", + "textOverflow": "ellipsis", + "linkColor": "#3377ff", + "linkHoverColor": "", + "linkActiveColor": "" + }, + { + "isCustom": false, + "dataIndex": "", + "render": { + "compType": "text", + "comp": {} + }, + "align": "left", + "background": "", + "margin": "", + "text": "", + "border": "", + "radius": "", + "textSize": "", + "textWeight": "normal", + "fontFamily": "sans-serif", + "fontStyle": "normal", + "textOverflow": "ellipsis", + "linkColor": "#3377ff", + "linkHoverColor": "", + "linkActiveColor": "" + }, + { + "isCustom": false, + "dataIndex": "", + "render": { + "compType": "text", + "comp": {} + }, + "align": "left", + "background": "", + "margin": "", + "text": "", + "border": "", + "radius": "", + "textSize": "", + "textWeight": "normal", + "fontFamily": "sans-serif", + "fontStyle": "normal", + "textOverflow": "ellipsis", + "linkColor": "#3377ff", + "linkHoverColor": "", + "linkActiveColor": "" + } + ] + }, + { + "title": "Department", + "showTitle": true, + "isCustom": false, + "dataIndex": "department", + "width": "250", + "autoWidth": "fixed", + "render": { + "compType": "tag", + "comp": { + "text": "{{currentCell}}", + "tagColors": { + "optionType": "manual", + "manual": { + "manual": [ + { + "label": "Tag1", + "icon": "/icon:solid/tag", + "color": "#f50" + }, + { + "label": "Tag2", + "icon": "/icon:solid/tag", + "color": "#2db7f5" + } + ] + }, + "mapData": { + "data": "[]", + "mapData": { + "color": "" + } + } + } + } + }, + "align": "left", + "fixed": "close", + "background": "", + "margin": "", + "text": "", + "border": "", + "borderWidth": "", + "radius": "", + "textSize": "", + "textWeight": "normal", + "fontFamily": "sans-serif", + "fontStyle": "normal", + "textOverflow": "ellipsis", + "linkColor": "#3377ff", + "linkHoverColor": "", + "linkActiveColor": "", + "summaryColumns": [ + { + "isCustom": false, + "dataIndex": "", + "render": { + "compType": "text", + "comp": {} + }, + "align": "left", + "background": "", + "margin": "", + "text": "", + "border": "", + "radius": "", + "textSize": "", + "textWeight": "normal", + "fontFamily": "sans-serif", + "fontStyle": "normal", + "textOverflow": "ellipsis", + "linkColor": "#3377ff", + "linkHoverColor": "", + "linkActiveColor": "" + }, + { + "isCustom": false, + "dataIndex": "", + "render": { + "compType": "text", + "comp": {} + }, + "align": "left", + "background": "", + "margin": "", + "text": "", + "border": "", + "radius": "", + "textSize": "", + "textWeight": "normal", + "fontFamily": "sans-serif", + "fontStyle": "normal", + "textOverflow": "ellipsis", + "linkColor": "#3377ff", + "linkHoverColor": "", + "linkActiveColor": "" + }, + { + "isCustom": false, + "dataIndex": "", + "render": { + "compType": "text", + "comp": {} + }, + "align": "left", + "background": "", + "margin": "", + "text": "", + "border": "", + "radius": "", + "textSize": "", + "textWeight": "normal", + "fontFamily": "sans-serif", + "fontStyle": "normal", + "textOverflow": "ellipsis", + "linkColor": "#3377ff", + "linkHoverColor": "", + "linkActiveColor": "" + } + ] + } + ], + "size": "middle", + "selection": { + "mode": "single" + }, + "pagination": { + "changeablePageSize": null, + "pageSizeOptions": "[5, 10, 20, 50]" + }, + "sort": [], + "toolbar": { + "showRefresh": true, + "showDownload": true, + "showFilter": true, + "position": "below", + "columnSeparator": ",", + "showUpdateButtons": true + }, + "summaryRows": "1", + "rowAutoHeight": "auto", + "tableAutoHeight": "auto", + "expansion": { + "slot": { + "container": { + "layout": {} + } + } + }, + "editModeClicks": "single", + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "table1" + } + } + } + } + }, + "footer": { + "layout": { + "3a74e36e": { + "i": "3a74e36e", + "h": 6, + "w": 24, + "x": 0, + "y": 2, + "pos": 0 + } + }, + "items": { + "3a74e36e": { + "compType": "text", + "comp": { + "text": "### Page Layout Footer", + "autoHeight": "auto", + "type": "markdown", + "horizontalAlignment": "center", + "contentScrollBar": true, + "verticalAlignment": "center", + "style": { + "background": "#fff" + }, + "margin": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "padding": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "text2" + } + } + }, + "showHeader": true, + "showSider": true, + "innerSider": true, + "siderCollapsible": true, + "siderCollapsed": true, + "siderRight": false, + "siderWidth": "20%", + "siderCollapsedWidth": "0", + "showFooter": true, + "horizontalGridCells": 24, + "autoHeight": "auto", + "siderScrollbars": false, + "contentScrollbars": false, + "mainScrollbars": false, + "appliedThemeId": "" +}; + export default function PageLayoutExample() { return ( <> + @@ -30,29 +662,4389 @@ export default function PageLayoutExample() { description="The Following Examples Show the Layout options on Component." > + + + + + + + + + diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/TabbedContainer.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/TabbedContainer.tsx index 4f51f953c..599157687 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/TabbedContainer.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/TabbedContainer.tsx @@ -2,24 +2,273 @@ import { TabbedContainerComp } from "comps/comps/tabs/tabbedContainerComp"; import Example from "../../common/Example"; import ExampleGroup from "../../common/ExampleGroup"; +const container={ + "0": { + "layout": { + "acf186c7": { + "i": "acf186c7", + "h": 24, + "w": 7, + "x": 6, + "y": 0, + "pos": 0 + } + }, + "items": { + "acf186c7": { + "compType": "text", + "comp": { + "text": "### This is Tab # 1", + "autoHeight": "auto", + "type": "markdown", + "horizontalAlignment": "left", + "contentScrollBar": true, + "verticalAlignment": "center", + "margin": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "padding": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "text1" + } + } + }, + "1": { + "layout": { + "e7160f3d": { + "i": "e7160f3d", + "h": 6, + "w": 7, + "x": 7, + "y": 2, + "pos": 0 + } + }, + "items": { + "e7160f3d": { + "compType": "text", + "comp": { + "text": "### This is Tab # 2", + "autoHeight": "auto", + "type": "markdown", + "horizontalAlignment": "left", + "contentScrollBar": true, + "verticalAlignment": "center", + "margin": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "padding": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "text2" + } + } + }, + "2": { + "layout": { + "480e1038": { + "i": "480e1038", + "h": 6, + "w": 7, + "x": 7, + "y": 1, + "pos": 0 + } + }, + "items": { + "480e1038": { + "compType": "text", + "comp": { + "text": "### This is Tab # 3", + "autoHeight": "auto", + "type": "markdown", + "horizontalAlignment": "left", + "contentScrollBar": true, + "verticalAlignment": "center", + "margin": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "padding": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "text3" + } + } + }, + "3": { + "layout": { + "69edd323": { + "i": "69edd323", + "h": 6, + "w": 7, + "x": 7, + "y": 1, + "pos": 0 + } + }, + "items": { + "69edd323": { + "compType": "text", + "comp": { + "text": "### This is Tab # 4", + "autoHeight": "auto", + "type": "markdown", + "horizontalAlignment": "left", + "contentScrollBar": true, + "verticalAlignment": "center", + "margin": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "padding": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "text4" + } + } + }, + "4": { + "layout": { + "2038ea0e": { + "i": "2038ea0e", + "h": 6, + "w": 7, + "x": 8, + "y": 1, + "pos": 0 + } + }, + "items": { + "2038ea0e": { + "compType": "text", + "comp": { + "text": "### This is Tab # 5", + "autoHeight": "auto", + "type": "markdown", + "horizontalAlignment": "left", + "contentScrollBar": true, + "verticalAlignment": "center", + "margin": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "padding": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "text5" + } + } + } +}; + +const tab={ + "manual": [ + { + "id": 0, + "label": "Tab1", + "key": "Tab1", + "iconPosition": "left" + }, + { + "id": 1, + "label": "Tab2", + "key": "Tab2", + "iconPosition": "left" + }, + { + "id": 2, + "label": "Tab3", + "key": "Tab3", + "iconPosition": "left" + }, + { + "id": 3, + "label": "Tab4", + "key": "Tab4", + "iconPosition": "left" + }, + { + "id": 4, + "label": "Tab5", + "key": "Tab5", + "iconPosition": "left" + } + ] +}; + export default function TabbedContainerExample() { return ( <> @@ -31,45 +280,21 @@ export default function TabbedContainerExample() { > @@ -81,43 +306,61 @@ export default function TabbedContainerExample() { > diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/IFrame.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/IFrame.tsx index ba562b36d..49b1fd0db 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/IFrame.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/IFrame.tsx @@ -7,15 +7,22 @@ export default function IFrameExample() { return ( <> + diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/BPMNEditor.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/BPMNEditor.tsx new file mode 100644 index 000000000..a32d10c91 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/BPMNEditor.tsx @@ -0,0 +1,25 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const ChartCompWithDefault = uiCompRegistry["bpmnEditor"].comp; + +export default function BPMNEditorExample() { + return ( + <> + + + + + ); +} \ No newline at end of file diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Icons.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Icons.tsx new file mode 100644 index 000000000..3e6190a15 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Icons.tsx @@ -0,0 +1,65 @@ +import { IconComp } from "comps/comps/iconComp"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +export default function IconExample() { + return ( + <> + + + + + + + + + ); + } \ No newline at end of file diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/LottieAnimation.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/LottieAnimation.tsx new file mode 100644 index 000000000..1f0dfa614 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/LottieAnimation.tsx @@ -0,0 +1,88 @@ +import { JsonLottieComp } from "comps/comps/jsonComp/jsonLottieComp"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +export default function JsonLottieAnimationExample() { + return ( + <> + + + + + + + + + + + + + + + + ); + } \ No newline at end of file diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Mention.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Mention.tsx new file mode 100644 index 000000000..9edbeb2ab --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Mention.tsx @@ -0,0 +1,22 @@ +import { MentionComp } from "comps/comps/textInputComp/mentionComp"; +import { trans } from "i18n"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +export default function MentionCompExample() { + return ( + <> + + + + + ); +} diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/QRCode.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/QRCode.tsx new file mode 100644 index 000000000..e56cda509 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/QRCode.tsx @@ -0,0 +1,35 @@ +import { QRCodeComp } from "comps/comps/qrCodeComp"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +export default function QRCodeExample() { + return ( + <> + + + + + + + ); + } \ No newline at end of file diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Scanner.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Scanner.tsx new file mode 100644 index 000000000..6cd6ef8ef --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Scanner.tsx @@ -0,0 +1,52 @@ +import { ScannerComp } from "comps/comps/buttonComp/scannerComp"; +import { trans } from "i18n"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +export default function ScannerExample() { + return ( + <> + + + + + + + + + ); +} diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Shape.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Shape.tsx new file mode 100644 index 000000000..1b5259742 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Shape.tsx @@ -0,0 +1,36 @@ +import { ShapeComp } from "comps/comps/shapeComp/shapeComp"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +export default function ShapeExample() { + return ( + <> + + + + + + + ); + } \ No newline at end of file diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Tour.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Tour.tsx new file mode 100644 index 000000000..bc4875426 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Tour.tsx @@ -0,0 +1,20 @@ +import { TourComp } from "comps/comps/tourComp/tourComp"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +export default function TourExample() { + return ( + <> + + + + + ); + } \ No newline at end of file diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Transfer.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Transfer.tsx index ec2236124..4b7564fac 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Transfer.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Transfer.tsx @@ -1,4 +1,4 @@ -import { TransferComp } from "comps/comps/transferComp"; +import { transferComp } from "comps/comps/transferComp"; import Example from "../../common/Example"; import ExampleGroup from "../../common/ExampleGroup"; @@ -12,7 +12,7 @@ export default function TransferExample() { title="Default Audio Component" config={{ }} - compFactory={TransferComp} + compFactory={transferComp} /> diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/TurnstileCaptcha.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/TurnstileCaptcha.tsx new file mode 100644 index 000000000..fecbc3281 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/TurnstileCaptcha.tsx @@ -0,0 +1,25 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const ChartCompWithDefault = uiCompRegistry["turnstileCaptcha"].comp; + +export default function TurnstileCaptchaExample() { + return ( + <> + + + + + ); +} \ No newline at end of file diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/Form.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/Form.tsx new file mode 100644 index 000000000..eaa8ddada --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/Form.tsx @@ -0,0 +1,664 @@ +import { FormComp } from "comps/comps/formComp/formComp"; +import { trans } from "i18n"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const container={ + "header": { + "layout": { + "a6083c0a": { + "i": "a6083c0a", + "h": 5, + "w": 24, + "x": 0, + "y": 0 + } + }, + "items": { + "a6083c0a": { + "compType": "text", + "comp": { + "text": "### Welcome Back!", + "autoHeight": "auto", + "type": "markdown", + "horizontalAlignment": "center", + "contentScrollBar": true, + "verticalAlignment": "center", + "margin": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "padding": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "formTitle1" + } + } + }, + "body": { + "0": { + "view": { + "layout": { + "a6f7c0e4": { + "i": "a6f7c0e4", + "h": 7, + "w": 14, + "x": 0, + "y": 0, + "pos": 0 + }, + "c5b32ee6": { + "i": "c5b32ee6", + "h": 7, + "w": 14, + "x": 0, + "y": 7, + "pos": 1 + } + }, + "items": { + "a6f7c0e4": { + "compType": "input", + "comp": { + "defaultValue": "", + "value": "", + "label": { + "text": "Email", + "width": "33", + "widthUnit": "%", + "position": "row", + "align": "left" + }, + "validationType": "Email", + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "input1" + }, + "c5b32ee6": { + "compType": "password", + "comp": { + "defaultValue": "", + "value": "", + "label": { + "text": "Password", + "width": "33", + "widthUnit": "%", + "position": "row", + "align": "left" + }, + "validationType": "Regex", + "visibilityToggle": true, + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "password1" + } + } + } + } + }, + "footer": { + "layout": { + "95ccf34e": { + "i": "95ccf34e", + "h": 5, + "w": 10, + "x": 14, + "y": 0 + } + }, + "items": { + "95ccf34e": { + "compType": "button", + "comp": { + "text": "Login", + "type": "submit", + "form": "form1", + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "formButton1" + } + } + }, + "showHeader": true, + "showBody": true, + "showFooter": true, + "autoHeight": "auto", + "showVerticalScrollbar": false, + "horizontalGridCells": 24, + "scrollbars": false, + "style": { + "borderWidth": "1px" + }, + "appliedThemeId": "" +}; + +export default function FormExample() { + return ( + <> + + + + + + + + + + + + + + + + + + + ); +} diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONEditor.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONEditor.tsx new file mode 100644 index 000000000..dc1b3db1f --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONEditor.tsx @@ -0,0 +1,132 @@ +import { JsonEditorComp } from "comps/comps/jsonComp/jsonEditorComp"; +import { trans } from "i18n"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const schema='{\n "title": "User profile",\n "description": "form example",\n "type": "object",\n "required": [\n "name",\n "phone"\n ],\n "properties": {\n "name": {\n "type": "string",\n "title": "Name"\n },\n "phone": {\n "type": "string",\n "title": "Phone",\n "minLength": 11\n },\n "birthday": {\n "type": "string",\n "title": "Birthday"\n }\n }\n}'; +const uiSchema='{\n "name": {\n "ui:autofocus": true,\n "ui:emptyValue": ""\n },\n "phone": {\n "ui:help": "Please input a 11 digits number"\n },\n "birthday": {\n "ui:widget": "date"\n }\n}'; +const data='{\n "name": "Tom",\n "phone": "13488886666",\n "birthday": "1980-03-16"\n}'; + +export default function JsonEditorExample() { + return ( + <> + + + + + + + + + + + + + + + ); +} diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONExplorer.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONExplorer.tsx new file mode 100644 index 000000000..022c55088 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONExplorer.tsx @@ -0,0 +1,73 @@ +import { JsonExplorerComp } from "comps/comps/jsonComp/jsonExplorerComp"; +import { trans } from "i18n"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const schema='{\n "title": "User profile",\n "description": "form example",\n "type": "object",\n "required": [\n "name",\n "phone"\n ],\n "properties": {\n "name": {\n "type": "string",\n "title": "Name"\n },\n "phone": {\n "type": "string",\n "title": "Phone",\n "minLength": 11\n },\n "birthday": {\n "type": "string",\n "title": "Birthday"\n }\n }\n}'; +const uiSchema='{\n "name": {\n "ui:autofocus": true,\n "ui:emptyValue": ""\n },\n "phone": {\n "ui:help": "Please input a 11 digits number"\n },\n "birthday": {\n "ui:widget": "date"\n }\n}'; +const data='{\n "name": "Tom",\n "phone": "13488886666",\n "birthday": "1980-03-16"\n}'; +export default function JsonExplorerExample() { + return ( + <> + + + + + + + + + ); +} diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONSchemaform.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONSchemaform.tsx index 587ee3cf4..61b2fa22a 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONSchemaform.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONSchemaform.tsx @@ -8,10 +8,10 @@ export default function jsonSchemaFormExample() { <> + ); diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/index.ts b/client/packages/lowcoder/src/pages/ComponentDoc/examples/index.ts index 1a8e04233..007750d93 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/index.ts +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/index.ts @@ -56,7 +56,44 @@ import ColumnLayoutExample from "./ContainersComp/ColumnLayout"; import TabbedContainerExample from "./ContainersComp/TabbedContainer"; import ContainerExample from "./ContainersComp/Container"; import ContentCardExample from "./MediaComp/ContentCard"; - +import ImageCarouselExample from "./presentationComp/imageCarousel"; +import FormExample from "./formComp/Form"; +import JsonEditorExample from "./formComp/JSONEditor"; +import JsonExplorerExample from "./formComp/JSONExplorer"; +import ShapeExample from "./MediaComp/Shape"; +import JsonLottieAnimationExample from "./MediaComp/LottieAnimation"; +import IconExample from "./MediaComp/Icons"; +import TourExample from "./MediaComp/Tour"; +import QRCodeExample from "./MediaComp/QRCode"; +import StepControlExample from "./selectInputComp/StepControl"; +import CustomCompExample from "./presentationComp/customComponent"; +import ScannerExample from "./MediaComp/Scanner"; +import CandleStickChartExample from "./ChartsComp/CandleStickChart"; +import GridViewExample from "./presentationComp/gridView"; +import ModalExample from "./ChartsComp/Modal"; +import FunnelChartExample from "./ChartsComp/FunnelChart"; +import GaugeChartExample from "./ChartsComp/GaugeChart"; +import GraphChartExample from "./ChartsComp/GraphChart"; +import HeatmapChartExample from "./ChartsComp/HeatmapChart"; +import RadarChartExample from "./ChartsComp/RadarChart"; +import SankeyChartExample from "./ChartsComp/SankeyChart"; +import SunburstChartExample from "./ChartsComp/SunburstChart"; +import ThemeRiverChartExample from "./ChartsComp/ThemeRiverChart"; +import TreeChartExample from "./ChartsComp/TreeChart"; +import TreemapChartExample from "./ChartsComp/TreemapChart"; +import OpenLayersGeoMapChartExample from "./ChartsComp/OpenLayersGeoMap"; +import GeoMapChartExample from "./ChartsComp/GeoMapChart"; +import MermaidChartExample from "./ChartsComp/MermaidChart"; +import MentionCompExample from "./MediaComp/Mention"; +import CalendarExample from "./CalendarInputComp/Calendar"; +import PivotTableExample from "./presentationComp/pivotTable"; +import TurnstileCaptchaExample from "./MediaComp/TurnstileCaptcha"; +import GanttChartExample from "./ChartsComp/GanttChart"; +import KanbanExample from "./presentationComp/Kanban"; +import HillChartExample from "./ChartsComp/HillChart"; +import BPMNEditorExample from "./MediaComp/BPMNEditor"; +import ImageEditorExample from "./presentationComp/imageEditor"; +import DrawerExample from "./ChartsComp/Drawer"; const examples: { [key in UICompType]?: React.FunctionComponent } = { button: ButtonExample, @@ -116,6 +153,44 @@ const examples: { [key in UICompType]?: React.FunctionComponent } = { tabbedContainer: TabbedContainerExample, container: ContainerExample, card: ContentCardExample, + carousel: ImageCarouselExample, + form: FormExample, + jsonEditor: JsonEditorExample, + jsonExplorer: JsonExplorerExample, + shape: ShapeExample, + jsonLottie: JsonLottieAnimationExample, + icon: IconExample, + tour: TourExample, + qrCode: QRCodeExample, + step: StepControlExample, + custom: CustomCompExample, + scanner: ScannerExample, + candleStickChart: CandleStickChartExample, + grid: GridViewExample, + modal: ModalExample, + funnelChart: FunnelChartExample, + gaugeChart: GaugeChartExample, + graphChart: GraphChartExample, + heatmapChart: HeatmapChartExample, + radarChart: RadarChartExample, + sankeyChart: SankeyChartExample, + sunburstChart: SunburstChartExample, + themeriverChart: ThemeRiverChartExample, + treeChart: TreeChartExample, + treemapChart: TreemapChartExample, + openLayersGeoMap: OpenLayersGeoMapChartExample, + chartsGeoMap: GeoMapChartExample, + mermaid: MermaidChartExample, + mention: MentionCompExample, + calendar: CalendarExample, + pivotTable: PivotTableExample, + turnstileCaptcha: TurnstileCaptchaExample, + ganttChart: GanttChartExample, + kanban: KanbanExample, + hillchart: HillChartExample, + bpmnEditor: BPMNEditorExample, + imageEditor: ImageEditorExample, + drawer: DrawerExample, }; export default examples; diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/Kanban.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/Kanban.tsx new file mode 100644 index 000000000..a811f8412 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/Kanban.tsx @@ -0,0 +1,25 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const ChartCompWithDefault = uiCompRegistry["kanban"].comp; + +export default function KanbanExample() { + return ( + <> + + + + + ); +} \ No newline at end of file diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/chart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/chart.tsx index b7c85bfe1..fe540f332 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/chart.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/chart.tsx @@ -4,7 +4,7 @@ import { chartColorPalette } from "lowcoder-design"; import Example from "../../common/Example"; import ExampleGroup from "../../common/ExampleGroup"; -const ChartCompWithDefault = uiCompRegistry["chart"].comp; +const ChartCompWithDefault = uiCompRegistry["basicChart"].comp; const defaultDataSource = [ { diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/customComponent.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/customComponent.tsx new file mode 100644 index 000000000..c405d1128 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/customComponent.tsx @@ -0,0 +1,24 @@ +import { CustomComp } from "comps/comps/customComp/customComp"; +import { trans } from "i18n"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +export default function CustomCompExample() { + return ( + <> + + + + + ); +} diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/gridView.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/gridView.tsx new file mode 100644 index 000000000..31eaea4cc --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/gridView.tsx @@ -0,0 +1,242 @@ +import { GridComp } from "comps/comps/listViewComp/gridComp"; +import { trans } from "i18n"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const container={ + "layout": { + "9bb47110": { + "i": "9bb47110", + "w": 6, + "h": 14, + "x": 0, + "y": 0 + }, + "aad8227a": { + "i": "aad8227a", + "h": 5, + "w": 17, + "x": 7, + "y": 0 + }, + "68e1f6b2": { + "i": "68e1f6b2", + "h": 5, + "w": 17, + "x": 7, + "y": 9 + } + }, + "items": { + "9bb47110": { + "compType": "image", + "comp": { + "src": "{{currentItem.cover}}", + "autoHeight": "fixed", + "restrictPaddingOnRotation": "image", + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "image1" + }, + "aad8227a": { + "compType": "link", + "comp": { + "text": "{{i+1}}. {{currentItem.title}}", + "onEvent": [ + { + "name": "click", + "handler": { + "compType": "goToURL", + "comp": { + "url": "{{currentItem.url}}", + "query": [ + {} + ], + "hash": [ + {} + ], + "inNewTab": true + }, + "condition": "", + "slowdown": "debounce", + "delay": "" + } + } + ], + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "link1" + }, + "68e1f6b2": { + "compType": "rating", + "comp": { + "defaultValue": "{{currentItem.rate / 2}}", + "value": "", + "max": "5", + "label": { + "text": "", + "width": "33", + "widthUnit": "%", + "position": "row", + "align": "right" + }, + "allowHalf": true, + "disabled": "true", + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "rating1" + } + } +}; + +export default function GridViewExample() { + + const blackListConfig: string[] = [ + "container" + ]; + return ( + <> + + + + + + + + + + + + + + + + + + ); +} diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/imageCarousel.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/imageCarousel.tsx new file mode 100644 index 000000000..a90e5e3f1 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/imageCarousel.tsx @@ -0,0 +1,81 @@ +import { CarouselComp } from "comps/comps/carouselComp"; +import { trans } from "i18n"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +export default function ImageCarouselExample() { + return ( + <> + + + + + + + + + + + + + ); +} diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/imageEditor.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/imageEditor.tsx new file mode 100644 index 000000000..62981a0f4 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/imageEditor.tsx @@ -0,0 +1,25 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const ChartCompWithDefault = uiCompRegistry["imageEditor"].comp; + +export default function ImageEditorExample() { + return ( + <> + + + + + ); +} \ No newline at end of file diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/listView.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/listView.tsx index d11cd2d82..51d5704e5 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/listView.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/listView.tsx @@ -3,17 +3,229 @@ import { trans } from "i18n"; import Example from "../../common/Example"; import ExampleGroup from "../../common/ExampleGroup"; +const container={ + "layout": { + "9bb47110": { + "i": "9bb47110", + "w": 6, + "h": 14, + "x": 0, + "y": 0 + }, + "aad8227a": { + "i": "aad8227a", + "h": 5, + "w": 17, + "x": 7, + "y": 0 + }, + "68e1f6b2": { + "i": "68e1f6b2", + "h": 5, + "w": 17, + "x": 7, + "y": 9 + } + }, + "items": { + "9bb47110": { + "compType": "image", + "comp": { + "src": "{{currentItem.cover}}", + "autoHeight": "fixed", + "restrictPaddingOnRotation": "image", + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "image1" + }, + "aad8227a": { + "compType": "link", + "comp": { + "text": "{{i+1}}. {{currentItem.title}}", + "onEvent": [ + { + "name": "click", + "handler": { + "compType": "goToURL", + "comp": { + "url": "{{currentItem.url}}", + "query": [ + {} + ], + "hash": [ + {} + ], + "inNewTab": true + }, + "condition": "", + "slowdown": "debounce", + "delay": "" + } + } + ], + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "link1" + }, + "68e1f6b2": { + "compType": "rating", + "comp": { + "defaultValue": "{{currentItem.rate / 2}}", + "value": "", + "max": "5", + "label": { + "text": "", + "width": "33", + "widthUnit": "%", + "position": "row", + "align": "right" + }, + "allowHalf": true, + "disabled": "true", + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "rating1" + } + } +}; + export default function ListViewExample() { + + const blackListConfig: string[] = [ + "container" + ]; return ( <> + + + + + + + + + + + + + diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/pivotTable.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/pivotTable.tsx new file mode 100644 index 000000000..c567b228d --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/pivotTable.tsx @@ -0,0 +1,25 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const ChartCompWithDefault = uiCompRegistry["pivotTable"].comp; + +export default function PivotTableExample() { + return ( + <> + + + + + ); +} \ No newline at end of file diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/AutoComplete.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/AutoComplete.tsx index 5e05cf20f..65e3a7f72 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/AutoComplete.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/AutoComplete.tsx @@ -3,18 +3,93 @@ import { trans } from "i18n"; import Example from "../../common/Example"; import ExampleGroup from "../../common/ExampleGroup"; +const items= "[\n {\n \"value\": \"1-BeiJing\",\n \"label\": \"Beijing\"\n },\n {\n \"value\": \"2-ShangHai\",\n \"label\": \"Shanghai\"\n },\n {\n \"value\": \"3-GuangDong\",\n \"label\": \"Guandong\"\n },\n {\n \"value\": \"4-ShenZhen\",\n \"label\": \"Shenzhen\"\n }\n]"; + export default function AutoCompleteExample() { return ( <> + + + + + + + + + diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/StepControl.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/StepControl.tsx new file mode 100644 index 000000000..d2e51248a --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/StepControl.tsx @@ -0,0 +1,112 @@ +import { StepComp } from "comps/comps/selectInputComp/stepControl"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +export default function StepControlExample() { + return ( + <> + + + + + + + + + + + + + + + + + + + + + ); + } \ No newline at end of file diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/Tree.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/Tree.tsx index b81253b57..556cb637d 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/Tree.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/Tree.tsx @@ -49,7 +49,7 @@ export default function TreeExample() { description={trans("componentDoc.basicDemoDescription")} > {/* Display a hint about who is editing the app */} - {blockEditing && ( + {blockEditing && Boolean(applicationId) && ( <> )} - {applicationId && ( + {Boolean(applicationId) && !isPublicApp && ( void, isViewMarketpl const showAppSnapshot = useSelector(showAppSnapshotSelector); const applicationId = useApplicationId(); const application = useSelector(currentApplication); + const isPublicApp = useSelector(isPublicApplication); const [showCopyModal, setShowCopyModal] = useState(false); const dispatch = useDispatch(); - const { appType } = useContext(ExternalEditorContext); + const { appType, exportPublicAppToJson } = useContext(ExternalEditorContext); const isModule = appType === AppTypeEnum.Module; const isEditable = canEditApp(user, application); @@ -137,6 +138,9 @@ export function HeaderStartDropdown(props: { setEdit: () => void, isViewMarketpl if (e.key === "edit") { props.setEdit(); } else if (e.key === "export") { + if (isPublicApp && exportPublicAppToJson) { + return exportPublicAppToJson?.(); + } exportApplicationAsJSONFile(applicationId); } else if (e.key === "duplicate") { setShowCopyModal(true); diff --git a/client/packages/lowcoder/src/pages/common/help.tsx b/client/packages/lowcoder/src/pages/common/help.tsx index 64a99eca8..776dc86b3 100644 --- a/client/packages/lowcoder/src/pages/common/help.tsx +++ b/client/packages/lowcoder/src/pages/common/help.tsx @@ -27,6 +27,7 @@ import { ShortcutListPopup } from "./shortcutListPopup"; import { QuestionIcon, UpgradeIcon } from "lowcoder-design"; import { trans } from "i18n"; import { localEnv } from "util/envUtils"; +import { isPublicApplication } from "@lowcoder-ee/redux/selectors/applicationSelector"; const StyledMenu = styled(DropdownMenu)<{ $edit: boolean | string }>` ${(props) => @@ -189,6 +190,8 @@ function HelpDropdownComp(props: HelpDropdownProps) { const [videoVisible, setVideoVisible] = useState(false); const [toolTipContent, setToolTipContent] = useState(null); const [showDropdown, setShowDropdown] = useState(false); + const isPublicApp = useSelector(isPublicApplication); + const closeTooltip = () => { // turn of tooltip setToolTipContent(null); @@ -238,6 +241,7 @@ function HelpDropdownComp(props: HelpDropdownProps) { !props.isEdit && setShowHelp(false); return; case "editorTutorial": + if (isPublicApp) return; dispatch( createApplication({ applicationName: trans("help.appName"), diff --git a/client/packages/lowcoder/src/pages/common/previewHeader.tsx b/client/packages/lowcoder/src/pages/common/previewHeader.tsx index 10afb9817..769d3c8fc 100644 --- a/client/packages/lowcoder/src/pages/common/previewHeader.tsx +++ b/client/packages/lowcoder/src/pages/common/previewHeader.tsx @@ -5,7 +5,7 @@ import { ALL_APPLICATIONS_URL, APPLICATION_VIEW_URL, AUTH_LOGIN_URL } from "cons import { User } from "constants/userConstants"; import { EllipsisTextCss, isDarkColor, TacoButton, TextEditIcon } from "lowcoder-design"; import { useSelector } from "react-redux"; -import { currentApplication, getTemplateId } from "redux/selectors/applicationSelector"; +import { currentApplication, getTemplateId, isPublicApplication } from "redux/selectors/applicationSelector"; import { getUser, isFetchingUser } from "redux/selectors/usersSelectors"; import styled from "styled-components"; import history from "util/history"; @@ -15,7 +15,7 @@ import ProfileDropdown from "./profileDropdown"; import { trans } from "i18n"; import { Logo } from "@lowcoder-ee/assets/images"; import { AppPermissionDialog } from "../../components/PermissionDialog/AppPermissionDialog"; -import { useState } from "react"; +import { useMemo, useState } from "react"; import { getBrandingConfig } from "../../redux/selectors/configSelectors"; import { HeaderStartDropdown } from "./headerStartDropdown"; import { useParams } from "react-router"; @@ -132,11 +132,12 @@ const PreviewHeaderComp = () => { const params = useParams(); const user = useSelector(getUser); const application = useSelector(currentApplication); + const isPublicApp = useSelector(isPublicApplication); const applicationId = useApplicationId(); const templateId = useSelector(getTemplateId); const brandingConfig = useSelector(getBrandingConfig); const [permissionDialogVisible, setPermissionDialogVisible] = useState(false); - const isViewMarketplaceMode = params.viewMode === 'view_marketplace'; + const isViewMarketplaceMode = params.viewMode === 'view_marketplace' || isPublicApp; const headerStart = ( <> @@ -159,17 +160,17 @@ const PreviewHeaderComp = () => { const headerEnd = ( - {canManageApp(user, application) && ( + {canManageApp(user, application) && !isPublicApp && ( !visible && setPermissionDialogVisible(false)} /> )} - {canManageApp(user, application) && ( + {canManageApp(user, application) && !isPublicApp && ( setPermissionDialogVisible(true)}>{SHARE_TITLE} )} - {canEditApp(user, application) && ( + {canEditApp(user, application) && !isPublicApp && ( diff --git a/client/packages/lowcoder/src/pages/datasource/pluginPanel.tsx b/client/packages/lowcoder/src/pages/datasource/pluginPanel.tsx index 38bd41c06..01a538154 100644 --- a/client/packages/lowcoder/src/pages/datasource/pluginPanel.tsx +++ b/client/packages/lowcoder/src/pages/datasource/pluginPanel.tsx @@ -14,6 +14,10 @@ import { import { Search } from "components/Search"; import { CreateDropdown } from "@lowcoder-ee/pages/ApplicationV2/CreateDropdown"; import React, { useState } from "react"; +import { isPublicApplication } from "@lowcoder-ee/redux/selectors/applicationSelector"; +import Alert from "antd/es/alert"; +import Flex from "antd/es/flex"; +import { Link } from "react-router-dom"; export const DataSourceButton = styled(AntdButton)` &&& { @@ -115,6 +119,7 @@ interface SectionProps { datasourceTypes: DataSourceTypeInfo[]; searchValue: string; onSelect: (t: DataSourceTypeInfo) => void; + isPublicApp: boolean; } const categories: Category[] = [ @@ -135,7 +140,7 @@ const categories: Category[] = [ ]; // Section component -const Section: React.FC = ({ label, filter, datasourceTypes, searchValue, onSelect }) => ( +const Section: React.FC = ({ label, filter, datasourceTypes, searchValue, onSelect, isPublicApp }) => ( {label} @@ -143,7 +148,7 @@ const Section: React.FC = ({ label, filter, datasourceTypes, searc .filter(filter) .filter((t) => localeContains(t.name, searchValue)) .map((t) => ( - onSelect(t)}> + onSelect(t)}> {t.id && getBottomResIcon(t.id, "large", t.definition?.icon)} {t.name} @@ -157,6 +162,7 @@ export const PluginPanel = (props: { onSelect: (t: DataSourceTypeInfo) => void } const currentPage = useCurrentPage(); const [searchValue, setSearchValue] = useState(""); const apiList = currentPage === "queryLibrary" ? apiPluginsForQueryLibrary : apiPlugins; + const isPublicApp = useSelector(isPublicApplication); return ( @@ -168,6 +174,19 @@ export const PluginPanel = (props: { onSelect: (t: DataSourceTypeInfo) => void } style={{ width: "192px", height: "32px", margin: "0" }} /> + {isPublicApp && ( + + You're currently in preview mode.  + Sign up +  now to unlock the full experience! + + } + /> + )} {categories.map(({ label, filter }) => (
void } datasourceTypes={datasourceTypes} searchValue={searchValue} onSelect={props.onSelect} + isPublicApp={isPublicApp} /> ))} diff --git a/client/packages/lowcoder/src/pages/editor/AppEditorPublic.tsx b/client/packages/lowcoder/src/pages/editor/AppEditorPublic.tsx new file mode 100644 index 000000000..2afc07e9b --- /dev/null +++ b/client/packages/lowcoder/src/pages/editor/AppEditorPublic.tsx @@ -0,0 +1,234 @@ +import { AppPathParams, AppTypeEnum } from "constants/applicationConstants"; +import { Suspense, lazy, useCallback, useEffect, useMemo, useRef, useState } from "react"; +import { useDispatch, useSelector } from "react-redux"; +import { useParams } from "react-router"; +import { AppSummaryInfo, fetchApplicationInfo } from "redux/reduxActions/applicationActions"; +import { fetchDataSourceTypes } from "redux/reduxActions/datasourceActions"; +import { getUser } from "redux/selectors/usersSelectors"; +import { useUserViewMode } from "util/hooks"; +import "comps/uiCompRegistry"; +import { showAppSnapshotSelector } from "redux/selectors/appSnapshotSelector"; +import { setShowAppSnapshot } from "redux/reduxActions/appSnapshotActions"; +import { fetchGroupsAction } from "redux/reduxActions/orgActions"; +import { getFetchOrgGroupsFinished } from "redux/selectors/orgSelectors"; +import { getIsCommonSettingFetching } from "redux/selectors/commonSettingSelectors"; +import { + MarkAppDSLLoaded, + MarkAppEditorFirstRender, + MarkAppEditorMounted, + perfClear, + perfMark, +} from "util/perfUtils"; +import { useMount, useUnmount } from "react-use"; +import { clearGlobalSettings, setGlobalSettings } from "comps/utils/globalSettings"; +import { fetchFolderElements } from "redux/reduxActions/folderActions"; +import { registryDataSourcePlugin } from "constants/queryConstants"; +import { useRootCompInstance } from "./useRootCompInstance"; +import EditorSkeletonView from "./editorSkeletonView"; +import {ErrorBoundary} from 'react-error-boundary'; +import { ALL_APPLICATIONS_URL } from "@lowcoder-ee/constants/routesURL"; +import history from "util/history"; +import Flex from "antd/es/flex"; +import React from "react"; +import { currentApplication } from "@lowcoder-ee/redux/selectors/applicationSelector"; +import { AppState } from "@lowcoder-ee/redux/reducers"; +import { resetIconDictionary } from "@lowcoder-ee/constants/iconConstants"; +import {fetchJsDSPaginationByApp} from "@lowcoder-ee/util/pagination/axios"; +import { PUBLIC_APP_ID, PUBLIC_APP_ORG_ID } from "@lowcoder-ee/constants/publicApp"; + +const AppEditorInternalView = lazy( + () => import("pages/editor/appEditorInternal") + .then(moduleExports => ({default: moduleExports.AppEditorInternalView})) +); + +const AppEditorPublic = React.memo(() => { + const dispatch = useDispatch(); + const params = useParams(); + const isUserViewModeCheck = useUserViewMode(); + const showAppSnapshot = useSelector(showAppSnapshotSelector); + const currentUser = useSelector(getUser); + const fetchOrgGroupsFinished = useSelector(getFetchOrgGroupsFinished); + const isCommonSettingsFetching = useSelector(getIsCommonSettingFetching); + const application = useSelector(currentApplication); + const [currentPage, setCurrentPage] = useState(1); + const [pageSize, setPageSize] = useState(10); + const [elements, setElements] = useState({ elements: [], total: 1 }) + const isLowcoderCompLoading = useSelector((state: AppState) => state.npmPlugin.loading.lowcoderComps); + + const isUserViewMode = useMemo( + () => params.viewMode ? isUserViewModeCheck : true, + [params.viewMode, isUserViewModeCheck] + ); + const applicationId = useMemo( + () => { + const appId = params.applicationId || window.location.pathname.split("/")[2]; + return appId === 'public' ? PUBLIC_APP_ID : appId; + }, [params.applicationId, window.location.pathname] + ); + const paramViewMode = useMemo( + () => params.viewMode || window.location.pathname.split("/")[3], + [params.viewMode, window.location.pathname] + ); + const viewMode = useMemo( + () => (paramViewMode === "view" || paramViewMode === "admin") + ? "published" + : paramViewMode === "view_marketplace" ? "view_marketplace" : "editing", + [paramViewMode] + ); + + const firstRendered = useRef(false); + const orgId = PUBLIC_APP_ORG_ID; + const [isDataSourcePluginRegistered, setIsDataSourcePluginRegistered] = useState(false); + const [appError, setAppError] = useState(''); + const [blockEditing, setBlockEditing] = useState(true); + const [fetchingAppDetails, setFetchingAppDetails] = useState(false); + + setGlobalSettings({ applicationId, isViewMode: paramViewMode === "view" }); + + if (!firstRendered.current) { + perfClear(); + perfMark(MarkAppEditorFirstRender); + firstRendered.current = true; + } + + useMount(() => { + perfMark(MarkAppEditorMounted); + }); + + useUnmount(() => { + clearGlobalSettings(); + }); + + // fetch dsl + const [appInfo, setAppInfo] = useState({ + id: "", + appType: AppTypeEnum.Application, + }); + + const readOnly = applicationId === PUBLIC_APP_ID ? false : isUserViewMode; + + const compInstance = useRootCompInstance( + appInfo, + readOnly, + isDataSourcePluginRegistered, + blockEditing, + ); + + // fetch dataSource and plugin + useEffect(() => { + dispatch(fetchDataSourceTypes({ organizationId: orgId })); + }, [dispatch]); + + + const fetchJSDataSourceByApp = useCallback(() => { + fetchJsDSPaginationByApp({ + appId: applicationId, + pageNum: currentPage, + pageSize: pageSize + }).then((res) => { + setElements({elements: [], total: res.total || 1}) + res.data!.forEach((i: any) => { + registryDataSourcePlugin(i.type, i.id, i.pluginDefinition); + }); + setIsDataSourcePluginRegistered(true); + }); + dispatch(setShowAppSnapshot(false)); + }, [ + applicationId, + registryDataSourcePlugin, + setIsDataSourcePluginRegistered, + setShowAppSnapshot, + dispatch, + currentPage, + pageSize + ]); + + useEffect(() => { + if (!fetchOrgGroupsFinished) { + dispatch(fetchGroupsAction(orgId)); + } + }, [dispatch, fetchOrgGroupsFinished, orgId]); + + const fetchApplication = useCallback(() => { + setFetchingAppDetails(true); + dispatch( + fetchApplicationInfo({ + type: viewMode, + applicationId: applicationId, + onSuccess: (info) => { + perfMark(MarkAppDSLLoaded); + const runJsInHost = + info.orgCommonSettings?.runJavaScriptInHost ?? !!REACT_APP_DISABLE_JS_SANDBOX; + setGlobalSettings({ + orgCommonSettings: { + ...info.orgCommonSettings, + runJavaScriptInHost: runJsInHost, + }, + }); + setAppInfo(info); + fetchJSDataSourceByApp(); + setFetchingAppDetails(false); + }, + onError: (errorMessage) => { + setAppError(errorMessage); + setFetchingAppDetails(false); + } + }) + ); + }, [viewMode, applicationId, dispatch, fetchJSDataSourceByApp]); + + useEffect(() => { + if(!isLowcoderCompLoading) { + fetchApplication(); + resetIconDictionary(); + } + }, [isLowcoderCompLoading, fetchApplication]); + + const fallbackUI = useMemo(() => ( + +

Something went wrong while displaying this webpage

+ + + ), []); + + if (Boolean(appError)) { + return ( + +

{appError}

+ + + ) + } + + return ( + + }> + {fetchingAppDetails + ? + : ( + + ) + } + + + ); +}); + +export default AppEditorPublic; diff --git a/client/packages/lowcoder/src/pages/editor/appEditorInternal.tsx b/client/packages/lowcoder/src/pages/editor/appEditorInternal.tsx index c699c5712..8b006a504 100644 --- a/client/packages/lowcoder/src/pages/editor/appEditorInternal.tsx +++ b/client/packages/lowcoder/src/pages/editor/appEditorInternal.tsx @@ -1,7 +1,7 @@ import { AppSummaryInfo, updateApplication } from "redux/reduxActions/applicationActions"; import { useDispatch, useSelector } from "react-redux"; import { getExternalEditorState } from "redux/selectors/configSelectors"; -import { useEffect, useMemo, useState } from "react"; +import { useCallback, useEffect, useMemo, useState } from "react"; import { ExternalEditorContext, ExternalEditorContextState, @@ -26,6 +26,7 @@ import { RootCompInstanceType } from "./useRootCompInstance"; import { getCurrentUser } from "redux/selectors/usersSelectors"; import React from "react"; import { isEqual } from "lodash"; +import { isPublicApplication } from "@lowcoder-ee/redux/selectors/applicationSelector"; /** * FIXME: optimize the logic of saving comps @@ -53,10 +54,10 @@ function useSaveComp( if (!comp || comp === prevComp) { return; } + const curJson = comp.toJsonValue(); const curJsonStr = JSON.stringify(curJson); - if (!Boolean(prevAppId) && Boolean(applicationId)) { return setPrevAppId(applicationId); } @@ -64,6 +65,7 @@ function useSaveComp( return setPrevAppId(applicationId); } if (!Boolean(prevJsonStr) && Boolean(curJsonStr)) { + setPrevComp(comp) return setPrevJsonStr(curJsonStr); } if (prevJsonStr === curJsonStr) { @@ -84,7 +86,41 @@ function useSaveComp( setPrevComp(comp); setPrevJsonStr(curJsonStr); setPrevAppId(applicationId); - }, [comp, prevAppId, applicationId, prevComp, prevJsonStr, readOnly, dispatch]); + }, [comp, applicationId, readOnly, dispatch]); +} + +const exportAppToJson = (appDSL?: any) => { + if (!appDSL) return; + + const id = `t--export-app-link`; + const existingLink = document.getElementById(id); + existingLink && existingLink.remove(); + const link = document.createElement("a"); + const time = new Date().getTime(); + + const applicationName = `test_app_${time}`; + const exportObj = { + applicationInfo: { + name: 'Test App', + createAt: time, + createBy: '', + applicationId: '', + applicationType: AppTypeEnum.Application, + }, + applicationDSL: appDSL, + }; + const blob = new Blob([JSON.stringify(exportObj)], { + type: "application/json", + }); + const url = URL.createObjectURL(blob); + link.href = url; + link.download = applicationName + ".json"; + link.id = id; + document.body.appendChild(link); + link.click(); + link.remove(); + URL.revokeObjectURL(url); + return; } interface AppEditorInternalViewProps { @@ -99,6 +135,7 @@ interface AppEditorInternalViewProps { export const AppEditorInternalView = React.memo((props: AppEditorInternalViewProps) => { const isUserViewMode = useUserViewMode(); const extraExternalEditorState = useSelector(getExternalEditorState); + const isPublicApp = useSelector(isPublicApplication); const dispatch = useDispatch(); const { readOnly, blockEditing, appInfo, compInstance, fetchApplication } = props; @@ -110,6 +147,11 @@ export const AppEditorInternalView = React.memo((props: AppEditorInternalViewPro appType: AppTypeEnum.Application, }); + const exportPublicAppToJson = useCallback(() => { + const appDsl = compInstance.comp?.toJsonValue(); + exportAppToJson(appDsl); + }, [compInstance.comp]) + useEffect(() => { setExternalEditorState((s) => ({ ...s, @@ -120,9 +162,11 @@ export const AppEditorInternalView = React.memo((props: AppEditorInternalViewPro hideHeader: window.location.pathname.split("/")[3] === "admin", blockEditing, fetchApplication: fetchApplication, + exportPublicAppToJson: isPublicApp ? exportPublicAppToJson : undefined, ...extraExternalEditorState, })); }, [ + exportPublicAppToJson, compInstance?.history, extraExternalEditorState, readOnly, diff --git a/client/packages/lowcoder/src/pages/editor/editorView.tsx b/client/packages/lowcoder/src/pages/editor/editorView.tsx index d7521f2c2..bbdbfcb99 100644 --- a/client/packages/lowcoder/src/pages/editor/editorView.tsx +++ b/client/packages/lowcoder/src/pages/editor/editorView.tsx @@ -42,7 +42,7 @@ import { Helmet } from "react-helmet"; import { useDispatch, useSelector } from "react-redux"; import { useLocation, useParams } from "react-router-dom"; import { setEditorExternalStateAction } from "redux/reduxActions/configActions"; -import { currentApplication } from "redux/selectors/applicationSelector"; +import { currentApplication, isPublicApplication } from "redux/selectors/applicationSelector"; import { showAppSnapshotSelector } from "redux/selectors/appSnapshotSelector"; import styled from "styled-components"; import { ExternalEditorContext } from "util/context/ExternalEditorContext"; @@ -304,6 +304,7 @@ function EditorView(props: EditorViewProps) { const editorState = useContext(EditorContext); const { readOnly, hideHeader } = useContext(ExternalEditorContext); const application = useSelector(currentApplication); + const isPublicApp = useSelector(isPublicApplication); const commonSettings = useSelector(getCommonSettings); const locationState = useLocation().state; const showNewUserGuide = locationState?.showNewUserGuide; @@ -506,11 +507,17 @@ function EditorView(props: EditorViewProps) { draggingUtils.clearData(); } } > -
+ {isPublicApp + ? + : ( +
+ ) + } {showNewUserGuide && } >): NodeType { - const elements = elementRecord[""]; + const elements = elementRecord[""] || []; const elementMap: Record = {}; let rootNode: NodeType = { name: "root", @@ -366,24 +367,6 @@ interface ModuleSidebarItemProps extends DraggableTreeNodeItemRenderProps { setSelectedType: (id: boolean) => void; } -const empty = ( - -

{trans("rightPanel.emptyModules")}

- { - const appId = app.applicationInfoView.applicationId; - const url = APPLICATION_VIEW_URL(appId, "edit"); - window.open(url); - }} - /> - - } - /> -); - function ModuleSidebarItem(props: ModuleSidebarItemProps) { const dispatch = useDispatch(); const { @@ -499,6 +482,7 @@ function ModuleSidebarItem(props: ModuleSidebarItemProps) { export default function ModulePanel() { const dispatch = useDispatch(); let elements = useSelector(folderElementsSelector); + const isPublicApp = useSelector(isPublicApplication); const { searchValue } = useContext(RightContext); const [selectedID, setSelectedID] = useState(""); const [selectedType, setSelectedType] = useState(false); @@ -510,8 +494,10 @@ export default function ModulePanel() { let popedItemSourceId = ""; useEffect(() => { + if (isPublicApp) return; + dispatch(fetchAllModules({})); - }, [dispatch]); + }, [dispatch, isPublicApp]); const moveModule = () => { try{ @@ -740,7 +726,25 @@ export default function ModulePanel() { /> ); }} - /> : empty} + /> : ( + +

{trans("rightPanel.emptyModules")}

+ {!isPublicApp && ( + { + const appId = app.applicationInfoView.applicationId; + const url = APPLICATION_VIEW_URL(appId, "edit"); + window.open(url); + }} + /> + )} + + } + /> + )} ); } diff --git a/client/packages/lowcoder/src/pages/editor/right/PluginPanel/PluginItem.tsx b/client/packages/lowcoder/src/pages/editor/right/PluginPanel/PluginItem.tsx index b9a8cfb66..88635a638 100644 --- a/client/packages/lowcoder/src/pages/editor/right/PluginPanel/PluginItem.tsx +++ b/client/packages/lowcoder/src/pages/editor/right/PluginPanel/PluginItem.tsx @@ -68,7 +68,7 @@ export function PluginItem(props: PluginViewProps) { useEffect(() => { setLoading(true); - axios.get(`${NPM_REGISTRY_URL}/${appId}/${name}`).then((res) => { + axios.get(`${NPM_REGISTRY_URL}/${appId || 'none'}/${name}`).then((res) => { if (res.status >= 400) { return; } diff --git a/client/packages/lowcoder/src/pages/editor/right/PluginPanel/index.tsx b/client/packages/lowcoder/src/pages/editor/right/PluginPanel/index.tsx index ba408f92f..ea4781c75 100644 --- a/client/packages/lowcoder/src/pages/editor/right/PluginPanel/index.tsx +++ b/client/packages/lowcoder/src/pages/editor/right/PluginPanel/index.tsx @@ -11,6 +11,7 @@ import { getNpmPackageMeta, normalizeNpmPackage, validateNpmPackage } from "comp import { ComListTitle, ExtensionContentWrapper } from "../styledComponent"; import { EmptyContent } from "components/EmptyContent"; import { messageInstance } from "lowcoder-design/src/components/GlobalInstances"; +import { isPublicApplication } from "@lowcoder-ee/redux/selectors/applicationSelector"; const Footer = styled.div` display: flex; @@ -25,6 +26,7 @@ export default function PluginPanel() { const [newPluginName, setNewPluginName] = useState(""); const user = useSelector(getUser); const commonSettings = useSelector(getCommonSettings); + const isPublicApp = useSelector(isPublicApplication); const plugins = useMemo( () => @@ -40,6 +42,7 @@ export default function PluginPanel() { dispatch( setCommonSettings({ orgId: user.currentOrgId, + isPublicApp, data: { key: "npmPlugins", value: nextNpmPlugins, diff --git a/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx b/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx index a6e66f5e7..f2ba2dfee 100644 --- a/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx +++ b/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx @@ -45,7 +45,6 @@ import { Card, Collapse, CollapseProps, Divider, Flex, List, Tooltip } from 'ant import { ThemeCompPanel } from "pages/setting/theme/ThemeCompPanel"; import { JSONObject } from "@lowcoder-ee/util/jsonTypes"; -import Switch from "antd/es/switch"; const ThemeSettingsView = styled.div` font-size: 14px; @@ -174,7 +173,7 @@ class ThemeDetailPage extends React.Component } + {layoutSettingsItem.type == "dataLoadingIndicator" && + { + this.configChange(params); + }} + showVarName={false} + /> + } ))} diff --git a/client/packages/lowcoder/src/pages/setting/theme/themeConstant.tsx b/client/packages/lowcoder/src/pages/setting/theme/themeConstant.tsx index e0fbab429..b0a15315a 100644 --- a/client/packages/lowcoder/src/pages/setting/theme/themeConstant.tsx +++ b/client/packages/lowcoder/src/pages/setting/theme/themeConstant.tsx @@ -34,6 +34,7 @@ export const themeTemplateList = [ padding: "3px", showComponentLoadingIndicators: true, showDataLoadingIndicators: true, + dataLoadingIndicator: 'spinner', }, }, { @@ -53,6 +54,7 @@ export const themeTemplateList = [ padding: "3px", showComponentLoadingIndicators: true, showDataLoadingIndicators: true, + dataLoadingIndicator: 'spinner', }, }, { @@ -72,6 +74,7 @@ export const themeTemplateList = [ padding: "3px", showComponentLoadingIndicators: true, showDataLoadingIndicators: true, + dataLoadingIndicator: 'spinner', }, }, ]; diff --git a/client/packages/lowcoder/src/pages/userAuth/authComponents.tsx b/client/packages/lowcoder/src/pages/userAuth/authComponents.tsx index 456d89124..9c2b8eb34 100644 --- a/client/packages/lowcoder/src/pages/userAuth/authComponents.tsx +++ b/client/packages/lowcoder/src/pages/userAuth/authComponents.tsx @@ -219,7 +219,7 @@ export const TermsAndPrivacyInfo = (props: { onCheckChange: (e: CheckboxChangeEv } return ( - props.onCheckChange(e)} /> + props.onCheckChange(e)} /> {trans("userAuth.registerHint")}{`: `} diff --git a/client/packages/lowcoder/src/pages/userAuth/formLoginSteps.tsx b/client/packages/lowcoder/src/pages/userAuth/formLoginSteps.tsx index 2504ca3f4..aced446bd 100644 --- a/client/packages/lowcoder/src/pages/userAuth/formLoginSteps.tsx +++ b/client/packages/lowcoder/src/pages/userAuth/formLoginSteps.tsx @@ -66,7 +66,7 @@ const StepHeader = (props : { title: string, }) => ( -

{props.title}

+

{props.title}

 ) @@ -258,7 +258,7 @@ export default function FormLoginSteps(props: FormLoginProps) { {org.orgName} ))} - {orgList.length > 10 ? + {elements.total > 10 ? ) { try { @@ -203,10 +204,16 @@ export function* publishApplicationSaga(action: ReduxAction) { try { - const response: AxiosResponse = yield call( - ApplicationApi.getApplicationDetail, - action.payload - ); + + let response: AxiosResponse; + if (action.payload.applicationId === PUBLIC_APP_ID) { + response = publicAppResponse as AxiosResponse; + } else { + response = yield call( + ApplicationApi.getApplicationDetail, + action.payload + ); + } const isValidResponse: boolean = doValidResponse(response); if (isValidResponse && action.payload) { const { diff --git a/client/packages/lowcoder/src/redux/sagas/commonSettingsSagas.ts b/client/packages/lowcoder/src/redux/sagas/commonSettingsSagas.ts index 599c2b6bf..5e05367f4 100644 --- a/client/packages/lowcoder/src/redux/sagas/commonSettingsSagas.ts +++ b/client/packages/lowcoder/src/redux/sagas/commonSettingsSagas.ts @@ -39,6 +39,17 @@ export function* fetchCommonSettingsSaga(action: ReduxAction) { try { + // in case of public application, add data without sending request to BE + if (action.payload.isPublicApp) { + yield put({ + type: ReduxActionTypes.SET_COMMON_SETTING_SUCCESS, + payload: { + [action.payload.data.key]: action.payload.data.value, + }, + }); + return; + } + const response: AxiosResponse = yield call( CommonSettingApi.setCommonSetting, action.payload diff --git a/client/packages/lowcoder/src/redux/selectors/applicationSelector.ts b/client/packages/lowcoder/src/redux/selectors/applicationSelector.ts index 308543d5e..b33049e49 100644 --- a/client/packages/lowcoder/src/redux/selectors/applicationSelector.ts +++ b/client/packages/lowcoder/src/redux/selectors/applicationSelector.ts @@ -1,5 +1,6 @@ import { AppState } from "redux/reducers"; import { ApplicationMeta, AppPermissionInfo } from "constants/applicationConstants"; +import { PUBLIC_APP_ID } from "@lowcoder-ee/constants/publicApp"; export const normalAppListSelector = (state: AppState): ApplicationMeta[] => state.ui.application.applicationList.filter((app) => app.applicationStatus === "NORMAL"); @@ -47,3 +48,8 @@ export const getTemplateId = (state: AppState): any => { export const getServerSettings = (state: AppState): Record => { return state.ui.application.serverSettings || {}; } + +// an app to work on public editor +export const isPublicApplication = (state: AppState): boolean => { + return state.ui.application.currentApplication?.applicationId === PUBLIC_APP_ID +}; diff --git a/client/packages/lowcoder/src/util/bottomResUtils.tsx b/client/packages/lowcoder/src/util/bottomResUtils.tsx index 328bac7be..da1084e84 100644 --- a/client/packages/lowcoder/src/util/bottomResUtils.tsx +++ b/client/packages/lowcoder/src/util/bottomResUtils.tsx @@ -15,7 +15,6 @@ import { MongoIcon, MSSQLIcon, MysqlIcon, - LowcoderQueryIcon, OptionsApiIcon, OracleIcon, PatchApiIcon, @@ -131,8 +130,6 @@ export const getBottomResIcon = ( return ; case "graphql": return ; - case "lowcoderApi": - return ; case "snowflake": return ; case "mariadb": diff --git a/client/packages/lowcoder/src/util/context/ExternalEditorContext.ts b/client/packages/lowcoder/src/util/context/ExternalEditorContext.ts index ab1ad3a5c..94ade722f 100644 --- a/client/packages/lowcoder/src/util/context/ExternalEditorContext.ts +++ b/client/packages/lowcoder/src/util/context/ExternalEditorContext.ts @@ -47,6 +47,8 @@ export interface ExternalEditorContextState { */ fetchApplication?: () => void; + exportPublicAppToJson?: () => void; + changeExternalState?: (state: Partial) => void; } diff --git a/client/packages/lowcoder/src/util/pagination/axios.ts b/client/packages/lowcoder/src/util/pagination/axios.ts index 42c0de270..d03bf1800 100644 --- a/client/packages/lowcoder/src/util/pagination/axios.ts +++ b/client/packages/lowcoder/src/util/pagination/axios.ts @@ -6,11 +6,14 @@ import { fetchFolderRequestType, fetchGroupUserRequestType, fetchOrgsByEmailRequestType, fetchOrgUserRequestType, fetchQueryLibraryPaginationRequestType, + GenericApiPaginationResponse, orgGroupRequestType } from "@lowcoder-ee/util/pagination/type"; import OrgApi from "@lowcoder-ee/api/orgApi"; -import { DatasourceApi } from "@lowcoder-ee/api/datasourceApi"; +import { DatasourceApi, NodePluginDatasourceInfo } from "@lowcoder-ee/api/datasourceApi"; import {QueryLibraryApi} from "@lowcoder-ee/api/queryLibraryApi"; +import { AxiosResponse } from "axios"; +import { PUBLIC_APP_ID, publicAppJSDatasourceResponse } from "@lowcoder-ee/constants/publicApp"; export const fetchFolderElements = async (request: fetchFolderRequestType) => { try { @@ -135,7 +138,12 @@ export const fetchQLPaginationByOrg = async (request: fetchQueryLibraryPaginatio export const fetchJsDSPaginationByApp = async (request: fetchDataSourcePaginationRequestType)=> { try { - const response = await DatasourceApi.fetchJsDatasourcePaginationByApp(request); + let response: AxiosResponse, any>; + if (request.appId === PUBLIC_APP_ID) { + response = publicAppJSDatasourceResponse; + } else { + response = await DatasourceApi.fetchJsDatasourcePaginationByApp(request); + } return { success: true, data: response.data.data, diff --git a/client/yarn.lock b/client/yarn.lock index c55b51a7f..8a81f9328 100644 --- a/client/yarn.lock +++ b/client/yarn.lock @@ -5932,6 +5932,18 @@ __metadata: languageName: node linkType: hard +"alasql@npm:^4.6.2": + version: 4.6.2 + resolution: "alasql@npm:4.6.2" + dependencies: + cross-fetch: 4.1.0 + yargs: 16 + bin: + alasql: bin/alasql-cli.js + checksum: cc68e87eeaa72ddaec5f20c4ca631e2a8ddb45e38d4b7de41cb14661ead657b1afec8d9530160f66fe5253e9724db9ada5fc63ba2c5bcacf5b8f9583c7b0870f + languageName: node + linkType: hard + "animate.css@npm:^4.1.1": version: 4.1.1 resolution: "animate.css@npm:4.1.1" @@ -7309,6 +7321,17 @@ __metadata: languageName: node linkType: hard +"cliui@npm:^7.0.2": + version: 7.0.4 + resolution: "cliui@npm:7.0.4" + dependencies: + string-width: ^4.2.0 + strip-ansi: ^6.0.0 + wrap-ansi: ^7.0.0 + checksum: ce2e8f578a4813806788ac399b9e866297740eecd4ad1823c27fd344d78b22c5f8597d548adbcc46f0573e43e21e751f39446c5a5e804a12aace402b7a315d7f + languageName: node + linkType: hard + "cliui@npm:^8.0.1": version: 8.0.1 resolution: "cliui@npm:8.0.1" @@ -7870,6 +7893,15 @@ coolshapes-react@lowcoder-org/coolshapes-react: languageName: node linkType: hard +"cross-fetch@npm:4.1.0": + version: 4.1.0 + resolution: "cross-fetch@npm:4.1.0" + dependencies: + node-fetch: ^2.7.0 + checksum: c02fa85d59f83e50dbd769ee472c9cc984060c403ee5ec8654659f61a525c1a655eef1c7a35e365c1a107b4e72d76e786718b673d1cb3c97f61d4644cb0a9f9d + languageName: node + linkType: hard + "cross-fetch@npm:^3.1.5": version: 3.1.8 resolution: "cross-fetch@npm:3.1.8" @@ -14090,6 +14122,7 @@ coolshapes-react@lowcoder-org/coolshapes-react: "@types/regenerator-runtime": ^0.13.1 "@types/uuid": ^8.3.4 "@vitejs/plugin-react": ^2.2.0 + alasql: ^4.6.2 animate.css: ^4.1.1 antd: ^5.20.0 axios: ^1.7.7 @@ -15684,7 +15717,7 @@ coolshapes-react@lowcoder-org/coolshapes-react: languageName: node linkType: hard -"node-fetch@npm:^2.6.12": +"node-fetch@npm:^2.6.12, node-fetch@npm:^2.7.0": version: 2.7.0 resolution: "node-fetch@npm:2.7.0" dependencies: @@ -22446,6 +22479,13 @@ coolshapes-react@lowcoder-org/coolshapes-react: languageName: node linkType: hard +"yargs-parser@npm:^20.2.2": + version: 20.2.9 + resolution: "yargs-parser@npm:20.2.9" + checksum: 8bb69015f2b0ff9e17b2c8e6bfe224ab463dd00ca211eece72a4cd8a906224d2703fb8a326d36fdd0e68701e201b2a60ed7cf81ce0fd9b3799f9fe7745977ae3 + languageName: node + linkType: hard + "yargs-parser@npm:^21.1.1": version: 21.1.1 resolution: "yargs-parser@npm:21.1.1" @@ -22453,6 +22493,21 @@ coolshapes-react@lowcoder-org/coolshapes-react: languageName: node linkType: hard +"yargs@npm:16": + version: 16.2.0 + resolution: "yargs@npm:16.2.0" + dependencies: + cliui: ^7.0.2 + escalade: ^3.1.1 + get-caller-file: ^2.0.5 + require-directory: ^2.1.1 + string-width: ^4.2.0 + y18n: ^5.0.5 + yargs-parser: ^20.2.2 + checksum: b14afbb51e3251a204d81937c86a7e9d4bdbf9a2bcee38226c900d00f522969ab675703bee2a6f99f8e20103f608382936034e64d921b74df82b63c07c5e8f59 + languageName: node + linkType: hard + "yargs@npm:^17.3.1, yargs@npm:^17.5.1": version: 17.7.2 resolution: "yargs@npm:17.7.2" diff --git a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/application/model/Application.java b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/application/model/Application.java index a4d649995..978f5c8c6 100644 --- a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/application/model/Application.java +++ b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/application/model/Application.java @@ -141,7 +141,7 @@ public Mono getQueryByViewModeAndQueryId(boolean isViewMode, S @JsonIgnore public Mono> getLiveApplicationDsl(ApplicationRecordService applicationRecordService) { return applicationRecordService.getLatestRecordByApplicationId(this.getId()) - .map(ApplicationRecord::getApplicationDSL) + .map(ApplicationVersion::getApplicationDSL) .switchIfEmpty(Mono.just(editingApplicationDSL)); } @@ -237,7 +237,7 @@ public Mono getLiveContainerSize(ApplicationRecordService applicationRec } public Mono> getPublishedApplicationDSL(ApplicationRecordService applicationRecordService) { - return applicationRecordService.getLatestRecordByApplicationId(this.getId()).map(ApplicationRecord::getApplicationDSL); + return applicationRecordService.getLatestRecordByApplicationId(this.getId()).map(ApplicationVersion::getApplicationDSL); } } diff --git a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/application/model/ApplicationRecord.java b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/application/model/ApplicationVersion.java similarity index 91% rename from server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/application/model/ApplicationRecord.java rename to server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/application/model/ApplicationVersion.java index d6f57893f..fb89e92d0 100644 --- a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/application/model/ApplicationRecord.java +++ b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/application/model/ApplicationVersion.java @@ -14,7 +14,7 @@ @SuperBuilder @Jacksonized @NoArgsConstructor -public class ApplicationRecord extends HasIdAndAuditing { +public class ApplicationVersion extends HasIdAndAuditing { private String applicationId; private String tag; diff --git a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/application/repository/ApplicationRecordRepository.java b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/application/repository/ApplicationRecordRepository.java index dc333f9ed..cb447582b 100644 --- a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/application/repository/ApplicationRecordRepository.java +++ b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/application/repository/ApplicationRecordRepository.java @@ -1,7 +1,7 @@ package org.lowcoder.domain.application.repository; -import org.lowcoder.domain.application.model.ApplicationRecord; +import org.lowcoder.domain.application.model.ApplicationVersion; import org.springframework.data.mongodb.repository.ReactiveMongoRepository; import org.springframework.stereotype.Repository; import reactor.core.publisher.Flux; @@ -10,14 +10,14 @@ import java.util.List; @Repository -public interface ApplicationRecordRepository extends ReactiveMongoRepository { +public interface ApplicationRecordRepository extends ReactiveMongoRepository { Mono deleteByApplicationId(String applicationId); - Flux findByApplicationId(String applicationId); + Flux findByApplicationId(String applicationId); - Flux findByApplicationIdIn(List ids); + Flux findByApplicationIdIn(List ids); - Mono findTop1ByApplicationIdOrderByCreatedAtDesc(String applicationId); + Mono findTop1ByApplicationIdOrderByCreatedAtDesc(String applicationId); } diff --git a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/application/repository/ApplicationRepository.java b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/application/repository/ApplicationRepository.java index 4a984b8da..c320dc0c9 100644 --- a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/application/repository/ApplicationRepository.java +++ b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/application/repository/ApplicationRepository.java @@ -29,6 +29,9 @@ public interface ApplicationRepository extends ReactiveMongoRepository findByGid(@Nonnull String gid); + @Aggregation(pipeline = {"{ $match: { slug: ?0 } }", "{ $project: { 'editingApplicationDSL.settings': 1, _id: 1, gid: 1, organizationId: 1, name: 1, applicationType: 1, applicationStatus: 1, publicToAll: 1, publicToMarketplace: 1, agencyProfile: 1, editingUserId: 1, lastEditedAt: 1, createdAt: 1, updatedAt: 1, createdBy: 1, modifiedBy: 1, _class: 1}}"}) + Flux findBySlug(@Nonnull String slug); + Mono countByOrganizationIdAndApplicationStatus(String organizationId, ApplicationStatus applicationStatus); @Query("{$or : [{'publishedApplicationDSL.queries.datasourceId':?0},{'editingApplicationDSL.queries.datasourceId':?0}]}") @@ -36,9 +39,11 @@ public interface ApplicationRepository extends ReactiveMongoRepository findByIdIn(Collection ids); Flux findByGidIn(Collection ids); + Flux findBySlugIn(Collection slugs); Flux findByCreatedByAndIdIn(String userId, Collection ids); Flux findByCreatedByAndGidIn(String userId, Collection gids); + Flux findByCreatedByAndSlugIn(String userId, Collection slugs); /** * Filter public applications from list of supplied IDs @@ -67,6 +72,8 @@ public interface ApplicationRepository extends ReactiveMongoRepository findByPublicToAllIsTrueAndAgencyProfileIsTrue(); - Mono existsBySlug(String slug); + + @Query("{ 'organizationId': ?0, 'slug': ?1 }") + Mono existsByOrganizationIdAndSlug(String organizationId, String slug); } diff --git a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/application/service/ApplicationRecordService.java b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/application/service/ApplicationRecordService.java index 2afe65d8e..56163e370 100644 --- a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/application/service/ApplicationRecordService.java +++ b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/application/service/ApplicationRecordService.java @@ -1,21 +1,21 @@ package org.lowcoder.domain.application.service; -import org.lowcoder.domain.application.model.ApplicationRecord; +import org.lowcoder.domain.application.model.ApplicationVersion; import reactor.core.publisher.Mono; import java.util.List; import java.util.Map; public interface ApplicationRecordService { - Mono insert(ApplicationRecord applicationRecord); + Mono insert(ApplicationVersion applicationRecord); - Mono> getByApplicationId(String applicationId); + Mono> getByApplicationId(String applicationId); - Mono>> getByApplicationIdIn(List applicationIdList); + Mono>> getByApplicationIdIn(List applicationIdList); - Mono getById(String id); + Mono getById(String id); - Mono getLatestRecordByApplicationId(String applicationId); + Mono getLatestRecordByApplicationId(String applicationId); Mono deleteAllApplicationTagByApplicationId(String applicationId); diff --git a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/application/service/ApplicationRecordServiceImpl.java b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/application/service/ApplicationRecordServiceImpl.java index 9c7bcb482..1e6553ee1 100644 --- a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/application/service/ApplicationRecordServiceImpl.java +++ b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/application/service/ApplicationRecordServiceImpl.java @@ -1,7 +1,7 @@ package org.lowcoder.domain.application.service; import lombok.RequiredArgsConstructor; -import org.lowcoder.domain.application.model.ApplicationRecord; +import org.lowcoder.domain.application.model.ApplicationVersion; import org.lowcoder.domain.application.repository.ApplicationRecordRepository; import org.springframework.stereotype.Service; import reactor.core.publisher.Mono; @@ -21,7 +21,7 @@ public class ApplicationRecordServiceImpl implements ApplicationRecordService { private final ApplicationRecordRepository applicationRecordRepository; @Override - public Mono insert(ApplicationRecord applicationRecord) { + public Mono insert(ApplicationVersion applicationRecord) { return applicationRecordRepository.save(applicationRecord); } @@ -29,23 +29,23 @@ public Mono insert(ApplicationRecord applicationRecord) { * get all published versions */ @Override - public Mono> getByApplicationId(String applicationId) { + public Mono> getByApplicationId(String applicationId) { return applicationRecordRepository.findByApplicationId(applicationId) - .sort(Comparator.comparing(ApplicationRecord::getCreatedAt).reversed()) + .sort(Comparator.comparing(ApplicationVersion::getCreatedAt).reversed()) .collectList(); } @Override - public Mono>> getByApplicationIdIn(List applicationIdList) { + public Mono>> getByApplicationIdIn(List applicationIdList) { return applicationRecordRepository.findByApplicationIdIn(applicationIdList) - .sort(Comparator.comparing(ApplicationRecord::getCreatedAt).reversed()) + .sort(Comparator.comparing(ApplicationVersion::getCreatedAt).reversed()) .collectList() .map(applicationRecords -> applicationRecords.stream() - .collect(Collectors.groupingBy(ApplicationRecord::getApplicationId))); + .collect(Collectors.groupingBy(ApplicationVersion::getApplicationId))); } @Override - public Mono getById(String id) { + public Mono getById(String id) { return applicationRecordRepository.findById(id) .switchIfEmpty(deferredError(APPLICATION_NOT_FOUND, "APPLICATION_NOT_FOUND")); } @@ -54,7 +54,7 @@ public Mono getById(String id) { * get the latest published version */ @Override - public Mono getLatestRecordByApplicationId(String applicationId) { + public Mono getLatestRecordByApplicationId(String applicationId) { return applicationRecordRepository.findTop1ByApplicationIdOrderByCreatedAtDesc(applicationId); } diff --git a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/application/service/ApplicationServiceImpl.java b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/application/service/ApplicationServiceImpl.java index 3b3be763a..7c1ab537d 100644 --- a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/application/service/ApplicationServiceImpl.java +++ b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/application/service/ApplicationServiceImpl.java @@ -10,7 +10,7 @@ import lombok.RequiredArgsConstructor; import org.apache.commons.lang3.StringUtils; import org.lowcoder.domain.application.model.Application; -import org.lowcoder.domain.application.model.ApplicationRecord; +import org.lowcoder.domain.application.model.ApplicationVersion; import org.lowcoder.domain.application.model.ApplicationRequestType; import org.lowcoder.domain.application.model.ApplicationStatus; import org.lowcoder.domain.application.repository.ApplicationRepository; @@ -18,6 +18,7 @@ import org.lowcoder.domain.permission.model.ResourceType; import org.lowcoder.domain.permission.service.ResourcePermissionService; import org.lowcoder.domain.user.repository.UserRepository; +import org.lowcoder.domain.util.SlugUtils; import org.lowcoder.infra.annotation.NonEmptyMono; import org.lowcoder.infra.mongo.MongoUpsertHelper; import org.lowcoder.sdk.constants.FieldName; @@ -60,9 +61,13 @@ public Mono findByIdWithoutDsl(String id) { return Mono.error(new BizException(BizError.INVALID_PARAMETER, "INVALID_PARAMETER", FieldName.ID)); } - if(FieldName.isGID(id)) - return Mono.from(repository.findByGid(id)).switchIfEmpty(Mono.error(new BizException(BizError.NO_RESOURCE_FOUND, "CANT_FIND_APPLICATION", id))); - return repository.findById(id) + return Mono.from(repository.findBySlug(id)) + .switchIfEmpty( + Mono.defer(() -> { + if (FieldName.isGID(id)) + return Mono.from(repository.findByGid(id)); + return repository.findById(id); + })) .switchIfEmpty(Mono.error(new BizException(BizError.NO_RESOURCE_FOUND, "CANT_FIND_APPLICATION", id))); } @@ -123,7 +128,7 @@ public Mono countByOrganizationId(String orgId, ApplicationStatus applicat public Flux findByIdIn(List applicationIds) { if(!applicationIds.isEmpty() && FieldName.isGID(applicationIds.get(0))) return repository.findByGidIn(applicationIds); - return repository.findByIdIn(applicationIds); + return repository.findBySlugIn(applicationIds).switchIfEmpty(repository.findByIdIn(applicationIds)); } @Override @@ -279,7 +284,7 @@ public Mono> getPrivateApplicationIds(Collection application .map(Application::getGid) .collect(Collectors.toSet()); - return repository.findByCreatedByAndIdIn(userId, applicationIds) + return repository.findByCreatedByAndSlugIn(userId, applicationIds).switchIfEmpty(repository.findByCreatedByAndIdIn(userId, applicationIds)) .map(HasIdAndAuditing::getId) .collect(Collectors.toSet()); } @@ -342,22 +347,22 @@ public Mono updateLastEditedAt(String applicationId, Instant time, Stri @Override public Mono> getLiveDSLByApplicationId(String applicationId) { return applicationRecordService.getLatestRecordByApplicationId(applicationId) - .map(ApplicationRecord::getApplicationDSL) + .map(ApplicationVersion::getApplicationDSL) .switchIfEmpty(findById(applicationId) .map(Application::getEditingApplicationDSL)); } @Override public Mono updateSlug(String applicationId, String newSlug) { - return repository.existsBySlug(newSlug).flatMap(exists -> { + return repository.findById(applicationId).flatMap(application -> repository.existsByOrganizationIdAndSlug(application.getOrganizationId(), newSlug).flatMap(exists -> { + if (!SlugUtils.validate(newSlug)) { + return Mono.error(new BizException(BizError.SLUG_INVALID, "SLUG_INVALID")); + } if (exists) { - return Mono.error(new BizException(BizError.DUPLICATE_ENTRY, "Slug already exists")); + return Mono.error(new BizException(BizError.SLUG_DUPLICATE_ENTRY, "SLUG_DUPLICATE_ENTRY")); } - return repository.findById(applicationId) - .flatMap(application -> { - application.setSlug(newSlug); - return repository.save(application); - }); - }); + application.setSlug(newSlug); + return repository.save(application); + })); } } diff --git a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/organization/repository/OrganizationRepository.java b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/organization/repository/OrganizationRepository.java index 13f7d2399..7fceace3e 100644 --- a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/organization/repository/OrganizationRepository.java +++ b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/organization/repository/OrganizationRepository.java @@ -16,11 +16,14 @@ public interface OrganizationRepository extends ReactiveMongoRepository findByIdInAndState(Collection id, OrganizationState state); Flux findByGidInAndState(Collection gid, OrganizationState state); + Flux findBySlugInAndState(Collection slug, OrganizationState state); Flux findByGid(String gid); + Flux findBySlug(String slug); Flux findByState(OrganizationState state); Mono findByIdAndState(String id, OrganizationState state); Mono findByGidAndState(String gid, OrganizationState state); + Mono findBySlugAndState(String slug, OrganizationState state); Mono findBySourceAndThirdPartyCompanyIdAndState(String source, String tpCompanyId, OrganizationState state); diff --git a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/organization/service/OrganizationServiceImpl.java b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/organization/service/OrganizationServiceImpl.java index f1bc1470d..7af165a6b 100644 --- a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/organization/service/OrganizationServiceImpl.java +++ b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/organization/service/OrganizationServiceImpl.java @@ -16,6 +16,7 @@ import org.lowcoder.domain.organization.repository.OrganizationRepository; import org.lowcoder.domain.user.model.User; import org.lowcoder.domain.user.repository.UserRepository; +import org.lowcoder.domain.util.SlugUtils; import org.lowcoder.infra.annotation.PossibleEmptyMono; import org.lowcoder.infra.mongo.MongoUpsertHelper; import org.lowcoder.sdk.config.CommonConfig; @@ -169,7 +170,7 @@ public Mono getById(String id) { if(FieldName.isGID(id)) return repository.findByGidAndState(id, ACTIVE) .switchIfEmpty(deferredError(UNABLE_TO_FIND_VALID_ORG, "INVALID_ORG_ID")); - return repository.findByIdAndState(id, ACTIVE) + return repository.findBySlugAndState(id, ACTIVE).switchIfEmpty(repository.findByIdAndState(id, ACTIVE)) .switchIfEmpty(deferredError(UNABLE_TO_FIND_VALID_ORG, "INVALID_ORG_ID")); } @@ -179,7 +180,7 @@ public Mono getOrgCommonSettings(String orgId) { return repository.findByGidAndState(orgId, ACTIVE) .switchIfEmpty(deferredError(UNABLE_TO_FIND_VALID_ORG, "INVALID_ORG_ID")) .map(Organization::getCommonSettings); - return repository.findByIdAndState(orgId, ACTIVE) + return repository.findBySlugAndState(orgId, ACTIVE).switchIfEmpty(repository.findByIdAndState(orgId, ACTIVE)) .switchIfEmpty(deferredError(UNABLE_TO_FIND_VALID_ORG, "INVALID_ORG_ID")) .map(Organization::getCommonSettings); } @@ -188,7 +189,7 @@ public Mono getOrgCommonSettings(String orgId) { public Flux getByIds(Collection ids) { if(!ids.isEmpty() && FieldName.isGID(ids.stream().findFirst().get())) return repository.findByGidInAndState(ids, ACTIVE); - return repository.findByIdInAndState(ids, ACTIVE); + return repository.findBySlugInAndState(ids, ACTIVE).switchIfEmpty(repository.findByIdInAndState(ids, ACTIVE)); } @Override @@ -221,7 +222,7 @@ public Mono uploadLogo(String organizationId, Part filePart) { public Mono deleteLogo(String organizationId) { Mono organizationMono; if(FieldName.isGID(organizationId)) organizationMono = repository.findByGidAndState(organizationId, ACTIVE); - else organizationMono = repository.findByIdAndState(organizationId, ACTIVE); + else organizationMono = repository.findBySlugAndState(organizationId, ACTIVE).switchIfEmpty(repository.findByIdAndState(organizationId, ACTIVE)); return organizationMono .flatMap(organization -> { // delete from asset repo. @@ -292,8 +293,11 @@ private String buildCommonSettingsUpdateTimeKey(String key) { @Override public Mono updateSlug(String organizationId, String newSlug) { return repository.existsBySlug(newSlug).flatMap(exists -> { + if (!SlugUtils.validate(newSlug)) { + return Mono.error(new BizException(BizError.SLUG_INVALID, "SLUG_INVALID")); + } if (exists) { - return Mono.error(new BizException(BizError.DUPLICATE_ENTRY, "Slug already exists")); + return Mono.error(new BizException(BizError.SLUG_DUPLICATE_ENTRY, "SLUG_DUPLICATE_ENTRY")); } return repository.findById(organizationId) .flatMap(organization -> { diff --git a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/util/SlugUtils.java b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/util/SlugUtils.java new file mode 100644 index 000000000..be7e138f3 --- /dev/null +++ b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/util/SlugUtils.java @@ -0,0 +1,7 @@ +package org.lowcoder.domain.util; + +public class SlugUtils { + public static Boolean validate(String slug) { + return slug.matches("^[a-zA-Z0-9_-]*$"); + } +} diff --git a/server/api-service/lowcoder-infra/src/main/java/org/lowcoder/infra/event/AbstractEvent.java b/server/api-service/lowcoder-infra/src/main/java/org/lowcoder/infra/event/AbstractEvent.java index 44b1ded98..a866d55e6 100644 --- a/server/api-service/lowcoder-infra/src/main/java/org/lowcoder/infra/event/AbstractEvent.java +++ b/server/api-service/lowcoder-infra/src/main/java/org/lowcoder/infra/event/AbstractEvent.java @@ -1,6 +1,7 @@ package org.lowcoder.infra.event; import lombok.Getter; +import lombok.Setter; import lombok.experimental.SuperBuilder; import org.lowcoder.plugin.api.event.LowcoderEvent; @@ -18,6 +19,8 @@ public abstract class AbstractEvent implements LowcoderEvent protected final Boolean isAnonymous; private final String ipAddress; protected Map details; + @Setter + private static String environmentID; public Map details() { @@ -33,6 +36,7 @@ public B detail(String name, String value) details = new HashMap<>(); } this.details.put(name, value); + this.details.put("environmentId", environmentID); return self(); } } @@ -51,5 +55,6 @@ public void populateDetails() { } } + details.put("environmentId", environmentID); } } diff --git a/server/api-service/lowcoder-sdk/src/main/java/org/lowcoder/sdk/exception/BizError.java b/server/api-service/lowcoder-sdk/src/main/java/org/lowcoder/sdk/exception/BizError.java index aac1d9565..af8773c09 100644 --- a/server/api-service/lowcoder-sdk/src/main/java/org/lowcoder/sdk/exception/BizError.java +++ b/server/api-service/lowcoder-sdk/src/main/java/org/lowcoder/sdk/exception/BizError.java @@ -153,8 +153,12 @@ public enum BizError { BUNDLE_NAME_CONFLICT(500, 6403), ILLEGAL_BUNDLE_PERMISSION_ID(500, 6404), - //slug 6501 - 6501 - DUPLICATE_ENTRY(403, 6501); + //slug 6501 - 6502 + SLUG_DUPLICATE_ENTRY(403, 6501), + SLUG_INVALID(403, 6502), + + //flow 6601 - 6601 + FLOW_ERROR(500, 6601); static { checkDuplicates(values(), BizError::getBizErrorCode); diff --git a/server/api-service/lowcoder-sdk/src/main/resources/locale_en.properties b/server/api-service/lowcoder-sdk/src/main/resources/locale_en.properties index 1c24e43d8..32b74f755 100644 --- a/server/api-service/lowcoder-sdk/src/main/resources/locale_en.properties +++ b/server/api-service/lowcoder-sdk/src/main/resources/locale_en.properties @@ -282,4 +282,7 @@ ORG_DELETED_FOR_ENTERPRISE_MODE=Provided enterpriseOrgId workspace has been dele DISABLE_AUTH_CONFIG_FORBIDDEN=Can not disable current administrator''s last identity provider. USER_NOT_EXIST=User not exist. DUPLICATE_AUTH_CONFIG_ADDITION=Provider auth type already added to organization -EMAIL_PROVIDER_DISABLED=Email provider is disabled. \ No newline at end of file +EMAIL_PROVIDER_DISABLED=Email provider is disabled. +SLUG_DUPLICATE_ENTRY=Slug already exists +SLUG_INVALID=Slug format is invalid +FLOW_ERROR=Flow error message: {0} \ No newline at end of file diff --git a/server/api-service/lowcoder-sdk/src/main/resources/locale_zh.properties b/server/api-service/lowcoder-sdk/src/main/resources/locale_zh.properties new file mode 100644 index 000000000..fbb259836 --- /dev/null +++ b/server/api-service/lowcoder-sdk/src/main/resources/locale_zh.properties @@ -0,0 +1,288 @@ +## general +INTERNAL_SERVER_ERROR=哎呀！服务繁忙，请稍后重试。 +NOT_AUTHORIZED=抱歉，您似乎没有权限。 +INVALID_PARAMETER=发现无效参数：{0}，请检查并重试。 +INFRA_REDIS_TIMEOUT=连接超时，请稍后重试。 +INFRA_MONGODB_TIMEOUT=连接超时，请稍后重试。 +INVALID_PERMISSION_OPERATION=资源权限无效：{0} +REQUEST_THROTTLED=抱歉，请求过于频繁，请稍后重试。 +SERVER_NOT_READY=抱歉，服务器尚未准备好。 +INVALID_ORG_ID=非法工作区 ID，它可能已被删除或不存在。 +SWITCH_CURRENT_ORG_ERROR=抱歉，切换工作区失败，请稍后重试。 +LAST_ADMIN_CANNOT_LEAVE_ORG=抱歉，工作区的最后一位管理员无法离开。 +INVALID_GROUP_ID=群组ID无效，请检查并稍后重试。 +CANNOT_REMOVE_MYSELF=抱歉，群组管理员无法删除自己。 +CANNOT_LEAVE_GROUP=抱歉，一个群组应至少包含一名管理员。 +CANNOT_DELETE_SYSTEM_GROUP=系统组无法删除。 +NEED_DEV_TO_CREATE_RESOURCE=无效操作，需要工作区开发人员或管理员。 +UNABLE_TO_FIND_VALID_ORG=无法找到当前用户的有效工作区。 +USER_BANNED=经常账户被冻结。 +SENDING_EMAIL_FAILED=无法发送电子邮件。请检查组织的 smtp 设置。 +TOKEN_EXPIRED=用于重置密码的令牌已过期 +INVALID_TOKEN=收到密码重置请求的无效令牌 +# invitation +INVALID_INVITATION_CODE=未找到邀请码。 +ALREADY_IN_ORGANIZATION=您已经位于此工作区中。 +INVITED_ORG_DELETED=哎呀！邀请的工作区已被删除。 +APPLICATION_NOT_FOUND=找不到应用程序 {0}。 +ILLEGAL_APPLICATION_PERMISSION_ID=抱歉，您似乎没有权限。 +FETCH_HISTORY_SNAPSHOT_FAILURE=获取应用程序历史快照失败，请稍后重试。 +FETCH_HISTORY_SNAPSHOT_COUNT_FAILURE=获取应用历史快照计数失败，请稍后重试。 +INVALID_HISTORY_SNAPSHOT=找不到历史快照 {0}。 +## data source +DATASOURCE_NOT_FOUND=找不到数据源 {0}。 +INVALID_DATASOURCE_CONFIGURATION=数据源配置无效：{0}，请重新检查。 +DATASOURCE_DELETE_FAIL_DUE_TO_REMAINING_QUERIES=删除数据源失败，该数据源仍在查询中使用。 +PLUGIN_CREATE_CONNECTION_FAILED=抱歉，连接数据源失败，错误消息：{0}。 +DATASOURCE_PLUGIN_ID_NOT_GIVEN=数据无效，数据源类型为空。 +INVALID_DATASOURCE_CONFIG_TYPE=抱歉，数据源配置类型不合法：{0}，请重新检查。 +DATASOURCE_CONNECTION_TYPE_ERROR=非法数据源连接类型：{0}，请联系系统管理员。 +DATASOURCE_TYPE_ERROR=非法数据源类型：{0}，请联系系统管理员。 +DUPLICATE_DATABASE_NAME=糟糕，该数据源名称已被使用，请使用新名称。 +DATASOURCE_CLOSE_FAILED=无法关闭数据源连接：{0}。 +DATASOURCE_AND_APP_ORG_NOT_MATCH=非法请求，数据源与应用程序工作区不匹配。 +USER_NOT_SIGNED_IN=未知用户，您必须先登录。 +#auth +FAIL_TO_GET_OIDC_INFO=无法获取 OIDC 信息，错误消息：{0}。 +LOG_IN_SOURCE_NOT_SUPPORTED=抱歉，不支持该登录通道。 +USER_LOGIN_ID_EXIST=当前电子邮件已被其他用户使用。 +INVALID_PASSWORD=抱歉，密码不匹配。 +PASSWORD_NOT_SET_YET=该用户尚未设置密码，无法重置。 +INVALID_EMAIL_OR_PASSWORD=电子邮件或密码无效。 +ALREADY_BIND=抱歉，{0} 已被用户 {1} 绑定。 +NEED_BIND_THIRD_PARTY_CONNECTION=抱歉，需要绑定当前工作区登录通道。 +PAYLOAD_TOO_LARGE=抱歉，最大文件大小为 {0} KB，您的负载已达到限制。 +PLUGIN_EXECUTION_TIMEOUT=查询超时，当前超时设置：{0}ms，请重试或调整超时设置。 +INVALID_DATASOURCE_TYPE=非法数据源类型：{0}。 +PLUGIN_EXECUTION_TIMEOUT_WITHOUT_TIME=抱歉，查询执行超时，请重试或检查相关设置。 +TEMPLATE_NOT_EXIST=抱歉，该模板不存在。 +TEMPLATE_NOT_CORRECT=抱歉，模板有一些错误。 +EXCEED_QUERY_REQUEST_SIZE=抱歉，超出了查询请求大小限制，请联系管理员。 +EXCEED_QUERY_RESPONSE_SIZE=抱歉，超出查询响应大小限制，请联系管理员。 +LIBRARY_QUERY_AND_ORG_NOT_MATCH=查询库与工作区不匹配。 +APPLICATION_AND_ORG_NOT_MATCH=应用程序与工作区不匹配。 +LIBRARY_QUERY_NOT_FOUND=抱歉，查询库没有该查询，请再检查一次。 +INVALID_USER_STATUS=抱歉，用户状态非法：{0}。 +FOLDER_OPERATE_NO_PERMISSION=哎呀！您似乎没有该文件夹的操作权限。 +FOLDER_NOT_EXIST=该文件夹不存在，请重新检查。 +FOLDER_NAME_CONFLICT=抱歉，已有一个文件夹与您指定的文件夹名称相同，请使用其他名称。 +INVALID_PARAMETER_PLZ_CHECK=抱歉，传递的参数无效，请检查：{0}。 +DATASOURCE_CONFIG_ERROR=数据源配置非法：数据源参数配置错误。 +CAS_SSO_TICKET_ERROR=抱歉，cas sso 登录异常：票证验证错误。 +FILE_NOT_EXIST=无效参数：文件不存在。 +FOLDER_NAME_EMPTY=无效参数：文件夹名称为空。 +NO_PERMISSION_TO_MOVE=抱歉，您似乎没有权限，移动应用程序或模块需要管理权限。 +PERMISSION_NOT_EXIST=权限无效，不存在。 +NO_PERMISSION_TO_OPERATE_FOLDER=抱歉，您似乎没有操作此文件夹的权限。 +FILE_ORG_NOT_MATCH=非法请求：文件不属于当前工作区。 +EXCEEDS_FILE_SIZE_LIMIT=非法请求：文件大小不能超过 {0}。 +EXCEEDS_ORG_SIZE_LIMIT=非法请求：超出工作区总大小限制 {0}。 +EXCEEDS_DAILY_SIZE_LIMIT=非法请求：超出工作区每日流量限制大小 {0}。 +DUPLICATE_MATERIAL_NAME=抱歉，该材质名称已存在，请使用其他名称。 +ILLEGAL_PAGE_NUMBER=页码无效。 +CANT_FIND_APPLICATION=哎呀！找不到此应用程序，它可能已被删除或删除。 +FILE_EMPTY=无效参数：文件为空。 +INCORRECT_IMAGE_TYPE=图像类型应为 JPEG 或 PNG。 +IMAGE_PARSE_ERROR=糟糕，无法解析图像。 +CANT_FIND_CONNECTION_POOL=数据源配置非法：找不到对应的数据源连接池。 +FOLDER_NOT_FOUND=抱歉，找不到文件夹{0}。 +MATERIAL_NOT_FOUND=抱歉，找不到材料{0}。 +ASSET_NOT_FOUND=糟糕，找不到资产 {0}，它可能已被移除或删除。 +PLUGIN_NOT_FOUND=糟糕，找不到插件 {0}，它可能已被移除或删除。 +ORG_ID_EMPTY=无效参数：工作区 ID 为空。 +APP_NAME_EMPTY=无效参数：应用名称为空。 +DATASOURCE_CONNECT_ERROR=连接数据源失败，请检查配置。 +INVALID_APP_ID=参数无效：应用ID无效。 +BAD_REQUEST=错误的请求。 +INVALID_USER_ID=无效参数：用户ID无效。 +INVALID_USER_ROLE=参数无效：用户角色无效。 +PASSWORD_EMPTY=无效参数：密码为空。 +INSUFFICIENT_PERMISSION=权限不足：您不在工作区，请联系该工作区管理员。 +NO_PERMISSION_TO_EDIT=您似乎没有编辑权限，请联系应用程序所有者 {0}。 +NO_PERMISSION_TO_VIEW=您似乎没有查看权限，请联系应用程序所有者 {0}。 +INVALID_QUERY_ID=查询 ID 无效。 +INVALID_ES_CONFIG=非法的elasticsearch数据源配置。 +INVALID_CONNECTION_STRING=无法解析连接字符串。 +INVALID_MONGODB_URL=MongoDB URL 格式不合法，请再次检查。 +MONGODB_DATABASE_EMPTY=MongoDB 数据库不能为空。 +DATASOURCE_NAME_EMPTY=数据源配置非法：数据源名称为空。 +INVALID_DATASOURCE_TYPE_0=非法数据源类型。 +INVALID_DATASOURCE_ORG_ID=数据源配置非法：工作区 ID 无效。 +INVALID_SMTP_CONFIG=无法解析 SMTP 配置。 +INVALID_MYSQL_CONFIG=无法解析 MySQL 配置。 +INVALID_MONGODB_CONFIG=无法解析 MongoDB 配置。 +INVALID_SQLSERVER_CONFIG=无法解析 SQL Server 配置。 +INVALID_CLICKHOUSE_CONFIG=解析ClickHouse配置失败。 +INVALID_PG_CONFIG=无法解析 PostgreSQL 配置。 +INVALID_REDIS_CONFIG=解析Redis配置失败。 +INVALID_RESTAPI_CONFIG=解析RestAPI配置失败。 +QUERY_EXECUTION_ERROR=查询执行错误：{0}。 +QUERY_ARGUMENT_ERROR=非法查询配置：{0}。 +QUERY_TIMEOUT_ERROR=查询执行超时：{0}。 +INVALID_QUERY_SETTINGS=无法解析查询配置：{0}。 +DATASOURCE_GET_STRUCTURE_ERROR=无法获取数据源结构：{0}。 +DATASOURCE_ARGUMENT_ERROR=数据源配置无效：{0}。 +DATASOURCE_TEST_GENERIC_ERROR=无法连接数据源：{0}。 +DATASOURCE_TIMEOUT_ERROR=数据源连接超时，请检查其配置。 +DATASOURCE_TEST_TIMEOUT_ERROR=测试数据源连接超时，请检查其配置。 +JSON_PARSE_ERROR=抱歉，解析 JSON 失败，数据：{0}，异常信息：{1}。 +SQL_IN_OPERATOR_PARSE_ERROR=抱歉，解析 SQL 失败，数据：{0}，请联系管理员。 +PREPARED_STATEMENT_BIND_PARAMETERS_ERROR=PreparedStatement 绑定参数错误：{0} +EXCEED_MAX_QUERY_TIMEOUT=抱歉，查询的最大超时不能超过 {0} 秒。 +CONNECTION_ERROR=连接错误：{0}。 +MONGODB_COMMAND_ERROR=非法 MongoDB 查询：{0} +REST_API_EXECUTION_ERROR=REST API 执行错误：{0}。 +REDIS_EXECUTION_ERROR=抱歉，Redis 执行错误：{0}。 +REDIS_URL_ERROR=URL 错误的格式：{0}。正确格式：redis://用户名:password@my-redis.com: 6379 或 redis://:password@my-redis.com: 6379。 +LOWCODER_INTERNAL_REQUEST_ERROR=请求失败：{0}。 +LOWCODER_INTERNAL_INVALID_REQUEST_TYPE=Lowcoder API 请求类型无效，请联系管理员。 +ES_EXECUTION_ERROR=Elasticsearch 查询执行错误：{0}。 +EXECUTION_TIMEOUT=查询执行异常：执行超时。 +FAIL_TO_LOAD_CLICKHOUSE_JDBC=查询执行异常：ClickHouse JDBC加载失败，请联系管理员。 +INVALID_EXECUTION_REQUEST=查询执行异常：执行请求无效。 +INVALID_MONGODB_OPERATION=查询执行异常：MongoDB操作无效。 +BOUND_VALUE_NOT_MATCH=查询执行异常：找不到绑定值：{0}。 +AFFECT_MORE_THAN_ONE_ROWS_FOR_SINGLE_COMMAND=该查询设置为不允许修改多行，但现在实际上影响不止一行。 +FAIL_TO_GET_AFFECTED_ROW_COUNT=无法获取此查询的受影响行数。 +SQL_EMPTY=查询配置无效：SQL 语句为空。 +CLICKHOUSE_PS_ERROR=查询配置无效：ClickHousePreparedStatement设置错误，请检查配置。 +INVALID_ES_QUERY_CONFIG=无效的查询配置：Elasticsearch 查询配置错误。 +INVALID_LIMIT_CONFIG=查询配置无效：限制设置无效。 +INVALID_MONGODB_BSON_ARRAY_FORMAT=无效的查询配置：不是有效的 MongoDB BSON 数组格式。 +INVALID_JSON_ARRAY_FORMAT=无效的查询配置：不是有效的 JSON 数组格式。 +INVALID_JSON_FORMAT=查询配置无效：不是有效的 JSON {0}。 +INVALID_MONGODB_REQUEST=MongoDB 请求 {0} 无效。 +INVALID_PARAM_CONFIG_PLZ_CHECK=查询配置无效，请检查这些参数的配置：{0}。 +GUI_COMMAND_TYPE_EMPTY=抱歉，查询配置无效：GUI 命令类型为空。 +INVALID_GUI_PARAM=GUI 参数无效。 +INVALID_GUI_COMMAND_TYPE=GUI 命令类型 {0} 无效。 +COMMAND_EMPTY=查询配置无效，命令为空或为空。 +INVALID_REDIS_REQUEST=无效的 Redis 请求：{0}。 +INVALID_CONTENT_TYPE=无效内容类型：{0}。 +REQUEST_URL_EMPTY=查询配置无效：请求 URL 为空。 +INVALID_REQUEST_URL=请求 URL 无效：{0}。 +INVALID_TIMEOUT_SETTING=超时设置无效：{0}。 +CLICKHOUSE_CONFIG_EMPTY=ClickHouse 查询配置为空。 +INVALID_CLICKHOUSE=无法解析 ClickHouse 查询配置。 +INVALID_RAW_REQUEST_PARAM=无法解析查询配置：RAW 请求参数无效。 +RAW_REQUEST_PARAM_EMPTY=查询配置无效：RAW请求参数为空。 +INVALID_FORMAT=查询配置无效：{0} 格式错误：{1}，请联系管理员。 +SQLSERVER_QUERY_CONFIG_EMPTY=SQL Server 查询配置为空。 +INVALID_SQLSERVER_CONFIG_0=无法解析 SQL Server 配置。 +MYSQL_QUERY_CONFIG_EMPTY=MySQL 查询配置为空。 +INVALID_MYSQL=无法解析 MySQL 配置。 +LOAD_SQL_JDBC_ERROR=加载 JDBC 库失败，请联系系统管理员。 +INVALID_SQL_QUERY_CONFIG=无法解析 SQL 配置。 +EMPTY_SQL_QUERY_CONFIG=SQL 查询配置为空。 +INVALID_PG_QUERY_CONFIG_EMPTY=PostgreSQL 查询配置为空。 +INVALID_PG=无法解析 PostgreSQL 查询配置。 +INVALID_RESTAPI=无法解析 REST API 查询配置。 +GET_MONGODB_STRUCTURE_ERROR=无法获取 MongoDB 结构。 +MONGODB_URL_EMPTY=MongoDB 的连接 URL 为空。 +MONGODB_URL_EXTRACT_ERROR=无法解析 MongoDB 连接 URL。 +CONTENT_PARSE_ERROR=解决上传数据失败，需要格式{data:base64 string, name:string}或其数组 +MULTIFORM_DATA_IS_NOT_STRING=解决上传数据失败，数据字段不是有效的base64字符串 +MULTIFORM_NAME_IS_NOT_STRING=解决上传数据失败，名称字段不是有效字符串 +FAIL_TO_PARSE_BASE64_STRING=无法解码 Base64 格式的数据：{0} +PS_BIND_ERROR=PreparedStatement 绑定异常：{0}，参数类型{1}。 +MONGODB_EXECUTE_ERROR=MongoDB 查询执行错误，MongoDB 状态代码：{0}。 +REQUEST_ERROR=请求失败：{0} {1}。 +ES_QUERY_ERROR=Elasticsearch 查询执行错误：{0}。 +GUI_FIELD_EMPTY=GUI 参数无效：表字段为空。 +GUI_INVALID_JSON_ARRAY_FORMAT=无效的 GUI 参数：不是有效的 JSON 数组类型。 +GUI_CHANGE_SET_EMPTY=GUI 参数无效：更改数据为空。 +GUI_PRIMARY_KEY_EMPTY=GUI 参数无效：主键为空。 +GUI_OPERATION_DATA_EMPTY=GUI参数无效：操作数据为空。 +GUI_OPERATION_DATA_TYPE_ERROR=GUI 参数无效：操作数据类型错误。 +GUI_INVALID_PARAM=无效的对象参数：{0}。 +GUI_INVALID_DATA_TYPE=无效的操作数据类型：{0}。 +GUI_INVALID_JSON_MAP_TYPE=无效的 GUI 参数：不是有效的 JSON 映射类型。 +GUI_CHANGE_SET_TYPE_ERROR=更改的集数据类型无效：{0}。 +GUI_CHANGE_SET_FIELD_EMPTY=GUI 参数无效：更改数据列为空。 +GUI_INVALID_FILTER_FIELD=过滤器字段无效：{0}。 +GUI_FILTER_FIELD_EMPTY=GUI 参数无效：FilterBy 字段为空。 +GUI_INVALID_FILTER_CONDITION=过滤条件无效。 +INSERT_DATA_EMPTY=插入的数据为空。 +INVALID_INSERT_DATA=插入的数据列需要对齐。 +UPDATE_DATA_EMPTY=更新数据为空。 +BULK_UPDATE_DATA_NOT_CONTAIN_PRIMARY_KEY=并非所有更新数据都包含主键。 +UPSERT_DATA_EMPTY=更新插入数据为空。 +INVALID_IN=无效的 IN/NOT IN 操作数据，它应该是一个数组。 +INVALID_IS=无效的 IS/IS NOT 操作，它应该为 null 或布尔值。 +HOST_EMPTY=主机不能为空。 +HOST_WITH_COLON=主机不能包含“/”或“:”字符。 +INVALID_HOST=无效的主机。 +DATABASE_NAME_EMPTY=数据库名称不能为空。 +CONNECTION_STRING_EMPTY=连接字符串不能为空。 +MONGODB_URL_EMPTY_PLZ_CHECK=连接的 URL 格式无效。 +INVALID_MONGODB_URL_PLZ_CHECK=MongoDB 连接的 URL 格式无效。 +HOST_EMPTY_PLZ_CHECK=连接的主机为空。 +DATABASE_EMPTY=数据库不能为空。 +REDIS_URL_EMPTY=Redis 连接 URL 为空。 +PORT_EMPTY=连接端口为空。 +INVALID_PORT=端口号不能为负数。 +AUTH_ERROR=认证错误，请联系系统管理员。 +NO_USER_FOUND=未找到用户。 +SYSTEM_GROUP_ALL_USER=所有用户 +SYSTEM_GROUP_DEV=开发商 +USER_ORG_SUFFIX=的工作区 +LOWCODER_DATASOURCE_NAME=低编码器API +QUICK_REST_DATASOURCE_NAME=休息查询 +QUICK_GRAPHQL_DATASOURCE_NAME=GraphQL 查询 +## EVENT +EVENT_TYPE_USER_LOGIN=登入 +EVENT_TYPE_USER_LOGOUT=退出 +EVENT_TYPE_VIEW=查看应用程序 +EVENT_TYPE_APPLICATION_CREATE=创建新应用程序 +EVENT_TYPE_APPLICATION_DELETE=删除应用程序 +EVENT_TYPE_APPLICATION_UPDATE=更新应用程序 +EVENT_TYPE_APPLICATION_MOVE=移至文件夹 +EVENT_TYPE_APPLICATION_RECYCLED=移至垃圾箱 +EVENT_TYPE_APPLICATION_RESTORE=恢复应用程序 +EVENT_TYPE_FOLDER_CREATE=创建新文件夹 +EVENT_TYPE_FOLDER_DELETE=删除文件夹 +EVENT_TYPE_FOLDER_UPDATE=更新文件夹 +EVENT_TYPE_QUERY_EXECUTION=执行查询 +EVENT_TYPE_GROUP_CREATE=创建新组 +EVENT_TYPE_GROUP_UPDATE=更新组 +EVENT_TYPE_GROUP_DELETE=删除组 +EVENT_TYPE_GROUP_MEMBER_ADD=添加群组成员 +EVENT_TYPE_GROUP_MEMBER_ROLE_UPDATE=更新群组成员的角色 +EVENT_TYPE_GROUP_MEMBER_LEAVE=离开群组 +EVENT_TYPE_GROUP_MEMBER_REMOVE=删除群组成员 +EVENT_TYPE_SERVER_START_UP=服务器启动 +DATA_SOURCE_CREATE=创建数据源 +DATA_SOURCE_UPDATE=更新数据源 +DATA_SOURCE_DELETE=删除数据源 +DATA_SOURCE_PERMISSION_GRANT=授予数据源权限 +DATA_SOURCE_PERMISSION_UPDATE=更新数据源权限 +DATA_SOURCE_PERMISSION_DELETE=删除数据源权限 +LIBRARY_QUERY_CREATE=创建库查询 +LIBRARY_QUERY_UPDATE=更新库查询 +LIBRARY_QUERY_DELETE=删除库查询 +LIBRARY_QUERY_PUBLISH=发布图书馆查询 +## threshold +EXCEED_MAX_USER_ORG_COUNT=抱歉，您已达到工作区数量上限。 +EXCEED_MAX_ORG_MEMBER_COUNT=抱歉，此工作区已达到最大成员数。 +EXCEED_MAX_GROUP_COUNT=抱歉，此工作区已达到最大组数。 +EXCEED_MAX_APP_COUNT=抱歉，您已达到当前工作区中的应用程序数量上限。 +EXCEED_MAX_DEVELOPER_COUNT=抱歉，您已达到开发人员数量上限。 +## PLUGIN +DUPLICATE_COLUMN=发现重复列：{0}，请使用关键字“as”重命名重复列。 +INVALID_JSON_FROM_RESPONSE=响应数据不是有效的 JSON，请检查您的 Content-Type 标头。 +REACH_REDIRECT_LIMIT=达到最大 HTTP 重定向数：{0}。 +GOOGLESHEETS_QUERY_PARAM_EMPTY=Google 表格查询参数为空。 +GOOGLESHEETS_QUERY_PARAM_ERROR=Google 表格查询参数无效：{0}。 +GOOGLESHEETS_REQUEST_ERROR=Google 表格请求失败。 +GOOGLESHEETS_DATASOURCE_CONFIG_ERROR=无法解析 Google 表格数据源配置。 +GOOGLESHEETS_EMPTY_ROW=在此行索引处找不到数据。您想先尝试插入一些东西吗？ +APPLICATION_EDIT_ERROR_LACK_OF_DATASOURCE_PERMISSIONS=由于缺少某些数据源的权限，该应用程序的当前更改将不会被保存。 +CERTIFICATE_EMPTY=证书为空。 +ORG_DELETED_FOR_ENTERPRISE_MODE=如果 enterpriseOrgId 工作区已被删除，请联系 Lowcoder 团队。 +DISABLE_AUTH_CONFIG_FORBIDDEN=无法禁用当前管理员的最后一个身份提供商。 +USER_NOT_EXIST=用户不存在。 +DUPLICATE_AUTH_CONFIG_ADDITION=提供商身份验证类型已添加到组织中 +EMAIL_PROVIDER_DISABLED=电子邮件提供商已禁用。 +SLUG_DUPLICATE_ENTRY=蛞蝓已经存在 +SLUG_INVALID=Slug 格式无效 +FLOW_ERROR=流程错误消息：{0} \ No newline at end of file diff --git a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/application/ApplicationApiServiceImpl.java b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/application/ApplicationApiServiceImpl.java index 150d9e4c5..5c8e269b9 100644 --- a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/application/ApplicationApiServiceImpl.java +++ b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/application/ApplicationApiServiceImpl.java @@ -28,6 +28,7 @@ import org.lowcoder.domain.application.service.ApplicationService; import org.lowcoder.domain.datasource.model.Datasource; import org.lowcoder.domain.datasource.service.DatasourceService; +import org.lowcoder.domain.folder.service.FolderElementRelationService; import org.lowcoder.domain.interaction.UserApplicationInteractionService; import org.lowcoder.domain.organization.model.Organization; import org.lowcoder.domain.organization.service.OrgMemberService; @@ -94,6 +95,7 @@ public class ApplicationApiServiceImpl implements ApplicationApiService { private final DatasourceService datasourceService; private final ApplicationHistorySnapshotService applicationHistorySnapshotService; private final ApplicationRecordService applicationRecordService; + private final FolderElementRelationService folderElementRelationService; @Override public Mono create(CreateApplicationRequest createApplicationRequest) { @@ -185,10 +187,10 @@ public Mono delete(String applicationId) { return checkApplicationStatus(applicationId, ApplicationStatus.RECYCLED) .then(updateApplicationStatus(applicationId, ApplicationStatus.DELETED)) .then(applicationService.findById(applicationId)) - .map(application -> ApplicationView.builder() - .applicationInfoView(buildView(application)) + .flatMap(application -> buildView(application).map(appInfoView -> ApplicationView.builder() + .applicationInfoView(appInfoView) .applicationDSL(application.getEditingApplicationDSL()) - .build()); + .build())); } @Override @@ -269,13 +271,14 @@ public Mono getEditingApplication(String applicationId) { .map(dsl -> Map.entry(app.getId(), sanitizeDsl(dsl)))) .collectMap(Map.Entry::getKey, Map.Entry::getValue) .flatMap(dependentModuleDsl -> - applicationService.updateById(applicationId, application).map(__ -> - ApplicationView.builder() - .applicationInfoView(buildView(application, permission.getResourceRole().getValue())) - .applicationDSL(application.getEditingApplicationDSL()) - .moduleDSL(dependentModuleDsl) - .orgCommonSettings(commonSettings) - .build())); + applicationService.updateById(applicationId, application).flatMap(__ -> + buildView(application, permission.getResourceRole().getValue()).map(appInfoView -> + ApplicationView.builder() + .applicationInfoView(appInfoView) + .applicationDSL(application.getEditingApplicationDSL()) + .moduleDSL(dependentModuleDsl) + .orgCommonSettings(commonSettings) + .build()))); }); } @@ -299,14 +302,15 @@ public Mono getPublishedApplication(String applicationId, Appli .map(dsl -> Map.entry(app.getId(), sanitizeDsl(dsl)))) .collectMap(Map.Entry::getKey, Map.Entry::getValue) .flatMap(dependentModuleDsl -> - application.getLiveApplicationDsl(applicationRecordService).map(liveDsl -> - ApplicationView.builder() - .applicationInfoView(buildView(application, permission.getResourceRole().getValue())) - .applicationDSL(sanitizeDsl(liveDsl)) - .moduleDSL(dependentModuleDsl) - .orgCommonSettings(commonSettings) - .templateId(templateId) - .build()) + application.getLiveApplicationDsl(applicationRecordService).flatMap(liveDsl -> + buildView(application, permission.getResourceRole().getValue()).map(appInfoView -> + ApplicationView.builder() + .applicationInfoView(appInfoView) + .applicationDSL(sanitizeDsl(liveDsl)) + .moduleDSL(dependentModuleDsl) + .orgCommonSettings(commonSettings) + .templateId(templateId) + .build())) ); }) .delayUntil(applicationView -> { @@ -346,10 +350,10 @@ public Mono update(String applicationId, Application applicatio applicationId, EDIT_APPLICATIONS)) .delayUntil(__ -> checkDatasourcePermissions(application)) .flatMap(permission -> doUpdateApplication(applicationId, application) - .map(applicationUpdated -> ApplicationView.builder() - .applicationInfoView(buildView(applicationUpdated, permission.getResourceRole().getValue())) + .flatMap(applicationUpdated -> buildView(applicationUpdated, permission.getResourceRole().getValue()).map(appInfoView -> ApplicationView.builder() + .applicationInfoView(appInfoView) .applicationDSL(applicationUpdated.getEditingApplicationDSL()) - .build())); + .build()))); } private Mono doUpdateApplication(String applicationId, Application application) { @@ -368,7 +372,7 @@ public Mono publish(String applicationId, ApplicationPublishReq .flatMap(userId -> resourcePermissionService.checkAndReturnMaxPermission(userId, applicationId, PUBLISH_APPLICATIONS)) .delayUntil(__ -> applicationService.findById(applicationId) - .map(application -> ApplicationRecord.builder() + .map(application -> ApplicationVersion.builder() .tag(applicationPublishRequest.tag()) .commitMessage(applicationPublishRequest.commitMessage()) .applicationId(application.getId()) @@ -376,10 +380,10 @@ public Mono publish(String applicationId, ApplicationPublishReq .build()) .flatMap(applicationRecordService::insert)) .flatMap(permission -> applicationService.findById(applicationId) - .map(applicationUpdated -> ApplicationView.builder() - .applicationInfoView(buildView(applicationUpdated, permission.getResourceRole().getValue())) + .flatMap(applicationUpdated -> buildView(applicationUpdated, permission.getResourceRole().getValue()).map(appInfoView -> ApplicationView.builder() + .applicationInfoView(appInfoView) .applicationDSL(applicationUpdated.getEditingApplicationDSL()) - .build())); + .build()))); } @Override @@ -472,10 +476,10 @@ public Mono createFromTemplate(String templateId) { .delayUntil(orgMember -> orgDevChecker.checkCurrentOrgDev()) .delayUntil(bizThresholdChecker::checkMaxOrgApplicationCount) .flatMap(orgMember -> templateSolutionService.createFromTemplate(templateId, orgMember.getOrgId(), orgMember.getUserId()) - .map(applicationCreated -> ApplicationView.builder() - .applicationInfoView(buildView(applicationCreated)) + .flatMap(applicationCreated -> buildView(applicationCreated).map(appInfoView -> ApplicationView.builder() + .applicationInfoView(appInfoView) .applicationDSL(applicationCreated.getEditingApplicationDSL()) - .build())); + .build()))); } @Override @@ -547,8 +551,14 @@ public Mono checkApplicationPermissionWithReadableErrorMsg(S - private ApplicationInfoView buildView(Application application, String role) { - return buildView(application, role, null); + private Mono buildView(Application application, String role) { + return Mono.just(buildView(application, role, null)).delayUntil(applicationInfoView -> { + String applicationId = applicationInfoView.getApplicationId(); + return folderElementRelationService.getByElementIds(List.of(applicationId)) + .doOnNext(folderElement -> { + applicationInfoView.setFolderId(folderElement.folderId()); + }).then(); + }); } private ApplicationInfoView buildView(Application application, String role, @Nullable String folderId) { @@ -572,7 +582,7 @@ private ApplicationInfoView buildView(Application application, String role, @Nul .build(); } - private ApplicationInfoView buildView(Application application) { + private Mono buildView(Application application) { return buildView(application, ""); } diff --git a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/application/ApplicationController.java b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/application/ApplicationController.java index b765d19f6..b62a6e887 100644 --- a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/application/ApplicationController.java +++ b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/application/ApplicationController.java @@ -39,7 +39,6 @@ public class ApplicationController implements ApplicationEndpoints { private final BusinessEventPublisher businessEventPublisher; private final SessionUserService sessionUserService; private final GidService gidService; - private final FolderElementRelationService folderElementRelationService; private final ApplicationRecordService applicationRecordService; @Override @@ -187,13 +186,6 @@ public Mono>> getApplications(@RequestPar @RequestParam(required = false, defaultValue = "0") Integer pageSize) { ApplicationType applicationTypeEnum = applicationType == null ? null : ApplicationType.fromValue(applicationType); var flux = userHomeApiService.getAllAuthorisedApplications4CurrentOrgMember(applicationTypeEnum, applicationStatus, withContainerSize, name, category) - .delayUntil(applicationInfoView -> { - String applicationId = applicationInfoView.getApplicationId(); - return folderElementRelationService.getByElementIds(List.of(applicationId)) - .doOnNext(folderElement -> { - applicationInfoView.setFolderId(folderElement.folderId()); - }).then(); - }) .cache(); Mono countMono = flux.count(); var flux1 = flux.skip((long) (pageNum - 1) * pageSize); diff --git a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/application/ApplicationRecordApiServiceImpl.java b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/application/ApplicationRecordApiServiceImpl.java index 8d40e0e5d..6dc204218 100644 --- a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/application/ApplicationRecordApiServiceImpl.java +++ b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/application/ApplicationRecordApiServiceImpl.java @@ -2,13 +2,12 @@ import lombok.RequiredArgsConstructor; import org.lowcoder.api.home.SessionUserService; -import org.lowcoder.api.application.ApplicationApiServiceImpl; import org.lowcoder.api.application.view.ApplicationRecordMetaView; import org.lowcoder.api.usermanagement.OrgDevChecker; +import org.lowcoder.domain.application.model.ApplicationVersion; import org.lowcoder.domain.organization.model.OrgMember; import org.lowcoder.domain.application.model.Application; import org.lowcoder.domain.application.model.ApplicationCombineId; -import org.lowcoder.domain.application.model.ApplicationRecord; import org.lowcoder.domain.application.service.ApplicationRecordService; import org.lowcoder.domain.application.service.ApplicationService; import org.lowcoder.domain.user.service.UserService; @@ -41,7 +40,7 @@ public Mono> getRecordDSLFromApplicationCombineId(Applicatio return applicationService.getLiveDSLByApplicationId(applicationCombineId.applicationId()); } return applicationRecordService.getById(applicationCombineId.applicationRecordId()) - .map(ApplicationRecord::getApplicationDSL); + .map(ApplicationVersion::getApplicationDSL); })); } @@ -55,7 +54,7 @@ public Mono delete(String id) { public Mono> getByApplicationId(String applicationId) { return applicationRecordService.getByApplicationId(applicationId) .flatMap(applicationRecords -> multiBuild(applicationRecords, - ApplicationRecord::getCreatedBy, + ApplicationVersion::getCreatedBy, userService::getByIds, ApplicationRecordMetaView::from )); diff --git a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/application/view/ApplicationRecordMetaView.java b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/application/view/ApplicationRecordMetaView.java index 8b6ab4369..a378b250a 100644 --- a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/application/view/ApplicationRecordMetaView.java +++ b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/application/view/ApplicationRecordMetaView.java @@ -1,6 +1,6 @@ package org.lowcoder.api.application.view; -import org.lowcoder.domain.application.model.ApplicationRecord; +import org.lowcoder.domain.application.model.ApplicationVersion; import org.lowcoder.domain.user.model.User; public record ApplicationRecordMetaView(String id, @@ -10,7 +10,7 @@ public record ApplicationRecordMetaView(String id, long createTime, String creatorName) { - public static ApplicationRecordMetaView from(ApplicationRecord applicationRecord) { + public static ApplicationRecordMetaView from(ApplicationVersion applicationRecord) { return new ApplicationRecordMetaView(applicationRecord.getId(), applicationRecord.getApplicationId(), applicationRecord.getTag(), @@ -19,7 +19,7 @@ public static ApplicationRecordMetaView from(ApplicationRecord applicationRecord null); } - public static ApplicationRecordMetaView from(ApplicationRecord applicationRecord, User applicationRecordCreator) { + public static ApplicationRecordMetaView from(ApplicationVersion applicationRecord, User applicationRecordCreator) { return new ApplicationRecordMetaView(applicationRecord.getId(), applicationRecord.getApplicationId(), applicationRecord.getTag(), diff --git a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/framework/configuration/CustomWebFluxConfiguration.java b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/framework/configuration/CustomWebFluxConfiguration.java index 5124d2d10..4cd19f89d 100644 --- a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/framework/configuration/CustomWebFluxConfiguration.java +++ b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/framework/configuration/CustomWebFluxConfiguration.java @@ -2,17 +2,25 @@ import com.fasterxml.jackson.databind.ObjectMapper; import lombok.RequiredArgsConstructor; +import org.apache.commons.lang3.StringUtils; import org.lowcoder.api.framework.plugin.endpoint.ReloadableRouterFunctionMapping; import org.lowcoder.sdk.util.JsonUtils; import org.springframework.beans.factory.annotation.Value; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; +import org.springframework.context.i18n.LocaleContext; +import org.springframework.context.i18n.SimpleLocaleContext; import org.springframework.http.codec.ServerCodecConfigurer; import org.springframework.http.codec.json.Jackson2JsonDecoder; import org.springframework.http.codec.json.Jackson2JsonEncoder; import org.springframework.util.unit.DataSize; import org.springframework.web.reactive.config.DelegatingWebFluxConfiguration; import org.springframework.web.reactive.function.server.support.RouterFunctionMapping; +import org.springframework.web.server.ServerWebExchange; +import org.springframework.web.server.i18n.LocaleContextResolver; + +import java.util.List; +import java.util.Locale; @RequiredArgsConstructor @Configuration @@ -43,4 +51,30 @@ protected void configureHttpMessageCodecs(ServerCodecConfigurer configurer) { .jackson2JsonEncoder(new Jackson2JsonEncoder(objectMapper())); } + @Bean + public LocaleContextResolver localeContextResolver() { + return new LocaleContextResolver() { + @Override + public LocaleContext resolveLocaleContext(ServerWebExchange exchange) { + String defaultLocaleStr = "en_US"; + List language = exchange.getRequest().getQueryParams().getOrDefault("lang", List.of(defaultLocaleStr)); + String localeStr = language.get(0); + String[] parts = localeStr.split("_"); + if(parts.length == 2) { + Locale locale = new Locale(parts[0], parts[1]); + return new SimpleLocaleContext(locale); + } else { + String safeLocaleStr = StringUtils.defaultIfBlank(parts[0], defaultLocaleStr); + Locale locale = new Locale(safeLocaleStr); + return new SimpleLocaleContext(locale); + } + } + + @Override + public void setLocaleContext(ServerWebExchange exchange, LocaleContext localeContext) { + throw new UnsupportedOperationException("Cannot change HTTP accept header - use a different locale context resolution strategy"); + } + }; + } + } diff --git a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/framework/filter/GlobalContextFilter.java b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/framework/filter/GlobalContextFilter.java index 0e61d6ff3..f2ab85ca7 100644 --- a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/framework/filter/GlobalContextFilter.java +++ b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/framework/filter/GlobalContextFilter.java @@ -11,6 +11,7 @@ import org.lowcoder.infra.util.NetworkUtils; import org.lowcoder.sdk.util.CookieHelper; import org.lowcoder.sdk.util.UriUtils; +import org.springframework.context.i18n.LocaleContext; import org.springframework.core.Ordered; import org.springframework.http.HttpMethod; import org.springframework.http.server.reactive.ServerHttpRequest; @@ -20,6 +21,7 @@ import org.springframework.web.server.WebFilterChain; import reactor.core.publisher.Mono; +import java.util.Locale; import java.util.Map; import java.util.Map.Entry; import java.util.Optional; @@ -98,7 +100,10 @@ private Map buildContextMap(ServerWebExchange serverWebExchange, contextMap.put(REQUEST_PATH, request.getPath().pathWithinApplication().value()); contextMap.put(REQUEST, request); contextMap.put(REQUEST_METHOD, ofNullable(request.getMethod()).map(HttpMethod::name).orElse("")); - contextMap.put(CLIENT_LOCALE, globalContextService.getClientLocale(request)); + + LocaleContext localeContext = serverWebExchange.getLocaleContext(); + Locale currentLocale = localeContext.getLocale() != null ? localeContext.getLocale() : Locale.ENGLISH; + contextMap.put(CLIENT_LOCALE, currentLocale); contextMap.put(CURRENT_ORG_MEMBER, orgMemberService.getCurrentOrgMember(visitorId).cache()); contextMap.put(VISITOR_TOKEN, cookieHelper.getCookieToken(serverWebExchange)); contextMap.put(DOMAIN, UriUtils.getRefererDomainFromRequest(serverWebExchange)); diff --git a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/home/UserHomeApiServiceImpl.java b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/home/UserHomeApiServiceImpl.java index ce20a0c17..ee02ce0ab 100644 --- a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/home/UserHomeApiServiceImpl.java +++ b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/home/UserHomeApiServiceImpl.java @@ -4,7 +4,6 @@ import lombok.RequiredArgsConstructor; import org.apache.commons.lang3.StringUtils; import org.lowcoder.api.application.view.ApplicationInfoView; -import org.lowcoder.api.application.view.ApplicationInfoView.ApplicationInfoViewBuilder; import org.lowcoder.api.application.view.MarketplaceApplicationInfoView; import org.lowcoder.api.bundle.view.BundleInfoView; import org.lowcoder.api.bundle.view.MarketplaceBundleInfoView; @@ -12,7 +11,7 @@ import org.lowcoder.api.usermanagement.view.OrgAndVisitorRoleView; import org.lowcoder.api.usermanagement.view.UserProfileView; import org.lowcoder.domain.application.model.Application; -import org.lowcoder.domain.application.model.ApplicationRecord; +import org.lowcoder.domain.application.model.ApplicationVersion; import org.lowcoder.domain.application.model.ApplicationStatus; import org.lowcoder.domain.application.model.ApplicationType; import org.lowcoder.domain.application.service.ApplicationRecordService; @@ -22,6 +21,7 @@ import org.lowcoder.domain.bundle.model.BundleStatus; import org.lowcoder.domain.bundle.service.BundleElementRelationServiceImpl; import org.lowcoder.domain.bundle.service.BundleService; +import org.lowcoder.domain.folder.service.FolderElementRelationService; import org.lowcoder.domain.interaction.UserApplicationInteraction; import org.lowcoder.domain.interaction.UserApplicationInteractionService; import org.lowcoder.domain.organization.model.OrgMember; @@ -38,7 +38,6 @@ import org.lowcoder.infra.util.NetworkUtils; import org.lowcoder.infra.util.TupleUtils; import org.lowcoder.sdk.config.CommonConfig; -import org.lowcoder.sdk.models.VersionedModel; import org.springframework.stereotype.Component; import org.springframework.web.server.ServerWebExchange; import reactor.core.publisher.Flux; @@ -74,6 +73,7 @@ public class UserHomeApiServiceImpl implements UserHomeApiService { private final BundleElementRelationServiceImpl bundleElementRelationServiceImpl; private final BundleService bundleService; private final ApplicationRecordService applicationRecordService; + private final FolderElementRelationService folderElementRelationService; @Override public Mono buildUserProfileView(User user, ServerWebExchange exchange) { @@ -574,7 +574,7 @@ private Mono buildView(Application application, ResourceRol .zipWith(application.getIcon(applicationRecordService), TupleUtils::merge) .zipWith(applicationRecordService.getLatestRecordByApplicationId(application.getId()).map(Optional::of).switchIfEmpty(Mono.just(Optional.empty())), TupleUtils::merge) .flatMap(tuple -> { - Optional lastAppRecord = tuple.getT5(); + Optional lastAppRecord = tuple.getT5(); ApplicationInfoView.ApplicationInfoViewBuilder applicationInfoViewBuilder = ApplicationInfoView.builder() .applicationId(application.getId()) .applicationGid(application.getGid()) @@ -585,8 +585,8 @@ private Mono buildView(Application application, ResourceRol .category(tuple.getT3()) .icon(tuple.getT4()) .published(lastAppRecord.isPresent()) - .publishedVersion(lastAppRecord.map(ApplicationRecord::version).orElse(null)) - .lastPublishedTime(lastAppRecord.map(ApplicationRecord::getCreatedAt).orElse(null)) + .publishedVersion(lastAppRecord.map(ApplicationVersion::version).orElse(null)) + .lastPublishedTime(lastAppRecord.map(ApplicationVersion::getCreatedAt).orElse(null)) .createBy(Optional.ofNullable(userMap.get(application.getCreatedBy())) .map(User::getName) .orElse("")) @@ -609,6 +609,12 @@ private Mono buildView(Application application, ResourceRol .build())); } return Mono.just(applicationInfoViewBuilder.build()); + }).delayUntil(applicationInfoView -> { + String applicationId = applicationInfoView.getApplicationId(); + return folderElementRelationService.getByElementIds(List.of(applicationId)) + .doOnNext(folderElement -> { + applicationInfoView.setFolderId(folderElement.folderId()); + }).then(); }); } diff --git a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/misc/ApiFlowController.java b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/misc/ApiFlowController.java index a2d6b9a39..74a88f3d0 100644 --- a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/misc/ApiFlowController.java +++ b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/misc/ApiFlowController.java @@ -4,16 +4,24 @@ import lombok.RequiredArgsConstructor; import org.apache.commons.lang.StringUtils; import org.lowcoder.api.authentication.request.AuthException; +import org.lowcoder.sdk.exception.BizError; +import org.lowcoder.sdk.exception.BizException; import org.lowcoder.sdk.util.JsonUtils; import org.lowcoder.sdk.webclient.WebClientBuildHelper; import org.springframework.http.HttpHeaders; import org.springframework.http.HttpMethod; +import org.springframework.http.HttpStatusCode; import org.springframework.http.MediaType; import org.springframework.web.bind.annotation.RestController; import org.springframework.web.reactive.function.BodyInserters; +import org.springframework.web.server.i18n.AcceptHeaderLocaleContextResolver; import reactor.core.publisher.Mono; +import reactor.util.retry.Retry; +import java.time.Duration; +import java.time.temporal.ChronoUnit; import java.util.Map; +import java.util.Objects; import java.util.function.Consumer; import static org.lowcoder.api.authentication.util.AuthenticationUtils.mapToAuthToken; @@ -38,7 +46,11 @@ public Mono flow(FlowRequest flowRequest) { .body(BodyInserters.fromValue(jsonBody)) .headers(httpHeaders -> flowRequest.headers().forEach(httpHeaders::add)) .retrieve() - .bodyToMono(String.class); + .bodyToMono(String.class) + .onErrorResume(Mono::error) + .retryWhen(Retry.backoff(Objects.requireNonNullElse(flowRequest.retries(), 0), + Duration.of(Objects.requireNonNullElse(flowRequest.timeout(), HTTP_TIMEOUT), ChronoUnit.SECONDS)) + .onRetryExhaustedThrow(((retryBackoffSpec, retrySignal) -> new BizException(BizError.FLOW_ERROR, "FLOW_ERROR", retrySignal.failure().getMessage())))); } catch (Exception e) { return Mono.error(e); } diff --git a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/misc/ApiFlowEndpoints.java b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/misc/ApiFlowEndpoints.java index b10178462..02f6f6d8c 100644 --- a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/misc/ApiFlowEndpoints.java +++ b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/misc/ApiFlowEndpoints.java @@ -21,6 +21,8 @@ public interface ApiFlowEndpoints public record FlowRequest(String path, String method, Map data, - Map headers) { + Map headers, + Integer timeout, + Integer retries) { } } diff --git a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/npm/PrivateNpmRegistryController.java b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/npm/PrivateNpmRegistryController.java index 5540a2e89..9e967605c 100644 --- a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/npm/PrivateNpmRegistryController.java +++ b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/npm/PrivateNpmRegistryController.java @@ -79,6 +79,7 @@ private Mono> forwardToNodeService(String applicationId .toEntity(Resource.class) .map(response -> ResponseEntity .status(response.getStatusCode()) + .headers(response.getHeaders()) .body(response.getBody()) ); })); diff --git a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/query/view/LibraryQueryView.java b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/query/view/LibraryQueryView.java index d9210fbbd..02d7ef429 100644 --- a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/query/view/LibraryQueryView.java +++ b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/query/view/LibraryQueryView.java @@ -15,8 +15,8 @@ public record LibraryQueryView(String id, public static LibraryQueryView from(LibraryQuery libraryQuery, User user) { return new LibraryQueryView(libraryQuery.getId(), - libraryQuery.getOrganizationId(), libraryQuery.getGid(), + libraryQuery.getOrganizationId(), libraryQuery.getName(), libraryQuery.getLibraryQueryDSL(), libraryQuery.getCreatedAt().toEpochMilli(), diff --git a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/util/GidService.java b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/util/GidService.java index 2b9e0ecfc..921bcb164 100644 --- a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/util/GidService.java +++ b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/util/GidService.java @@ -40,10 +40,13 @@ public class GidService { private BundleRepository bundleRepository; public Mono convertApplicationIdToObjectId(String id) { - if(FieldName.isGID(id)) { - return applicationRepository.findByGid(id).next().mapNotNull(HasIdAndAuditing::getId); - } - return Mono.just(id); + return applicationRepository.findBySlug(id).next().mapNotNull(HasIdAndAuditing::getId).switchIfEmpty( + Mono.defer(() -> { + if (FieldName.isGID(id)) { + return applicationRepository.findByGid(id).next().mapNotNull(HasIdAndAuditing::getId); + } + return Mono.just(id); + })); } public Mono convertDatasourceIdToObjectId(String id) { @@ -54,10 +57,13 @@ public Mono convertDatasourceIdToObjectId(String id) { } public Mono convertOrganizationIdToObjectId(String id) { - if(FieldName.isGID(id)) { - return organizationRepository.findByGid(id).next().mapNotNull(HasIdAndAuditing::getId); - } - return Mono.just(id); + return organizationRepository.findBySlug(id).next().mapNotNull(HasIdAndAuditing::getId).switchIfEmpty( + Mono.defer(() -> { + if(FieldName.isGID(id)) { + return organizationRepository.findByGid(id).next().mapNotNull(HasIdAndAuditing::getId); + } + return Mono.just(id); + })); } public Mono convertGroupIdToObjectId(String id) { diff --git a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/runner/eventlistener/AppEventListener.java b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/runner/eventlistener/AppEventListener.java index 5b0b944ef..c8a484302 100644 --- a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/runner/eventlistener/AppEventListener.java +++ b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/runner/eventlistener/AppEventListener.java @@ -1,16 +1,23 @@ package org.lowcoder.runner.eventlistener; +import lombok.RequiredArgsConstructor; +import org.lowcoder.infra.config.model.ServerConfig; +import org.lowcoder.infra.config.repository.ServerConfigRepository; +import org.lowcoder.infra.event.AbstractEvent; import org.lowcoder.sdk.exception.BizError; import org.springframework.boot.context.event.ApplicationReadyEvent; import org.springframework.context.event.EventListener; import org.springframework.stereotype.Component; import lombok.extern.slf4j.Slf4j; +import reactor.core.publisher.Mono; @Slf4j @Component +@RequiredArgsConstructor public class AppEventListener { + private final ServerConfigRepository serverConfigRepository; @EventListener public void onApplicationEvent(ApplicationReadyEvent event) { System.out.println( @@ -23,5 +30,7 @@ public void onApplicationEvent(ApplicationReadyEvent event) { """ ); log.info("check BizError duplicates: {}", BizError.values().length); + String deploymentId = (String)(serverConfigRepository.findByKey("deployment.id").map(ServerConfig::getValue).switchIfEmpty(Mono.just("")).block()); + AbstractEvent.setEnvironmentID(deploymentId); } } diff --git a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/runner/migrations/DatabaseChangelog.java b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/runner/migrations/DatabaseChangelog.java index b0b6175e4..20611b8d8 100644 --- a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/runner/migrations/DatabaseChangelog.java +++ b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/runner/migrations/DatabaseChangelog.java @@ -4,8 +4,10 @@ import com.github.cloudyrock.mongock.ChangeSet; import com.github.cloudyrock.mongock.driver.mongodb.springdata.v4.decorator.impl.MongockTemplate; import com.github.f4b6a3.uuid.UuidCreator; +import com.mongodb.MongoNamespace; import com.mongodb.client.MongoCollection; import com.mongodb.client.MongoCursor; +import com.mongodb.client.MongoDatabase; import com.mongodb.client.result.DeleteResult; import lombok.extern.slf4j.Slf4j; import org.bson.Document; @@ -13,7 +15,7 @@ import org.lowcoder.domain.application.model.Application; import org.lowcoder.domain.application.model.ApplicationHistorySnapshot; import org.lowcoder.domain.application.model.ApplicationHistorySnapshotTS; -import org.lowcoder.domain.application.model.ApplicationRecord; +import org.lowcoder.domain.application.model.ApplicationVersion; import org.lowcoder.domain.bundle.model.Bundle; import org.lowcoder.domain.datasource.model.Datasource; import org.lowcoder.domain.datasource.model.DatasourceStructureDO; @@ -357,7 +359,7 @@ public void addTimeSeriesSnapshotHistory(MongockTemplate mongoTemplate, CommonCo } // Delete the migrated records - Query deleteQuery = new Query(Criteria.where("createdAt").gte(thresholdDate)); + Query deleteQuery = new Query(Criteria.where("createdAt").lte(thresholdDate)); DeleteResult deleteResult = mongoTemplate.remove(deleteQuery, ApplicationHistorySnapshot.class); log.info("Deleted {} records from the source collection.", deleteResult.getDeletedCount()); @@ -388,7 +390,7 @@ public void addTimeSeriesSnapshotHistory(MongockTemplate mongoTemplate, CommonCo .toCollection(); // Delete the migrated records - Query deleteQuery = new Query(Criteria.where("createdAt").gte(thresholdDate)); + Query deleteQuery = new Query(Criteria.where("createdAt").lte(thresholdDate)); DeleteResult deleteResult = mongoTemplate.remove(deleteQuery, ApplicationHistorySnapshot.class); log.info("Deleted {} records from the source collection.", deleteResult.getDeletedCount()); @@ -438,7 +440,7 @@ public void publishedToRecord(MongockTemplate mongoTemplate, CommonConfig common ObjectId id = document.getObjectId("_id"); String createdBy = document.getString("createdBy"); Map dslMap = documentToMap(dsl); - ApplicationRecord record = ApplicationRecord.builder() + ApplicationVersion record = ApplicationVersion.builder() .applicationId(id.toHexString()) .applicationDSL(dslMap) .commitMessage("") @@ -453,7 +455,28 @@ public void publishedToRecord(MongockTemplate mongoTemplate, CommonConfig common } @ChangeSet(order = "029", id = "add-tag-index-to-record", author = "Thomas") public void addTagIndexToRecord(MongockTemplate mongoTemplate, CommonConfig commonConfig) { - ensureIndexes(mongoTemplate, ApplicationRecord.class, makeIndex("applicationId", "tag").unique()); + ensureIndexes(mongoTemplate, ApplicationVersion.class, makeIndex("applicationId", "tag").unique()); + } + + @ChangeSet(order = "030", id = "rename-application-record-collection", author = "Thomas") + public void renameApplicationRecordCollection(MongockTemplate mongoTemplate, MongoDatabase mongoDatabase) { + String oldCollectionName = "applicationRecord"; + String newCollectionName = "applicationVersion"; + + // Check if the old collection exists + boolean collectionExists = mongoDatabase.listCollectionNames() + .into(new java.util.ArrayList<>()) + .contains(oldCollectionName); + + if (collectionExists) { + // Rename the collection + mongoDatabase.getCollection(oldCollectionName) + .renameCollection(new MongoNamespace(mongoDatabase.getName(), newCollectionName)); + System.out.println("Collection renamed from " + oldCollectionName + " to " + newCollectionName); + } else { + System.out.println("Collection " + oldCollectionName + " does not exist, skipping rename."); + } + } private void addGidField(MongockTemplate mongoTemplate, String collectionName) { diff --git a/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/common/TestRedisConfiguration.java b/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/common/TestRedisConfiguration.java index 1119462f2..f42ae0cd4 100644 --- a/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/common/TestRedisConfiguration.java +++ b/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/common/TestRedisConfiguration.java @@ -10,7 +10,7 @@ import java.util.concurrent.atomic.AtomicInteger; @SuppressWarnings("UnstableApiUsage") -@TestConfiguration +//@TestConfiguration public class TestRedisConfiguration { private static final AtomicInteger STATE = new AtomicInteger(0); diff --git a/server/api-service/pom.xml b/server/api-service/pom.xml index cb8e1a9f0..3aad736a0 100644 --- a/server/api-service/pom.xml +++ b/server/api-service/pom.xml @@ -12,7 +12,7 @@ - 2.5.3 + 2.6.0 17 ${java.version} ${java.version} diff --git a/server/node-service/package.json b/server/node-service/package.json index 5941f0e21..11410849c 100644 --- a/server/node-service/package.json +++ b/server/node-service/package.json @@ -1,6 +1,6 @@ { "name": "lowcoder-node-server", - "version": "2.5.2", + "version": "2.6.0", "private": true, "engines": { "node": "^14.18.0 || >=16.0.0" @@ -22,7 +22,7 @@ "copyfiles": "^2.4.1", "jest": "^29.3.1", "nock": "^13.3.0", - "nodemon": "^2.0.22", + "nodemon": "^3.1.9", "postman-to-openapi": "^3.0.1", "svgo": "^3.0.2", "ts-jest": "^29.0.3", @@ -31,7 +31,7 @@ "dependencies": { "@apidevtools/swagger-parser": "^10.1.0", "@aws-sdk/client-appconfig": "^3.533.0", - "@aws-sdk/client-appconfigdata": "^3.533.0", + "@aws-sdk/client-appconfigdata": "^3.726.1", "@aws-sdk/client-athena": "^3.333.0", "@aws-sdk/client-dynamodb": "^3.332.0", "@aws-sdk/client-lambda": "^3.332.0", @@ -44,10 +44,10 @@ "@types/jsonpath": "^0.2.0", "@types/lodash": "^4.14.190", "@types/morgan": "^1.9.3", - "@types/node": "^20.1.1", + "@types/node": "^22.10.5", "@types/node-fetch": "^2.6.2", "ali-oss": "^6.20.0", - "axios": "^1.7.7", + "axios": "^1.7.9", "base64-arraybuffer": "^1.0.2", "bluebird": "^3.7.2", "duckdb-async": "^1.1.3", diff --git a/server/node-service/yarn.lock b/server/node-service/yarn.lock index 0a63980fb..2537e74a5 100644 --- a/server/node-service/yarn.lock +++ b/server/node-service/yarn.lock @@ -189,53 +189,53 @@ __metadata: languageName: node linkType: hard -"@aws-sdk/client-appconfigdata@npm:^3.533.0": - version: 3.668.0 - resolution: "@aws-sdk/client-appconfigdata@npm:3.668.0" +"@aws-sdk/client-appconfigdata@npm:^3.726.1": + version: 3.726.1 + resolution: "@aws-sdk/client-appconfigdata@npm:3.726.1" dependencies: "@aws-crypto/sha256-browser": 5.2.0 "@aws-crypto/sha256-js": 5.2.0 - "@aws-sdk/client-sso-oidc": 3.668.0 - "@aws-sdk/client-sts": 3.668.0 - "@aws-sdk/core": 3.667.0 - "@aws-sdk/credential-provider-node": 3.668.0 - "@aws-sdk/middleware-host-header": 3.667.0 - "@aws-sdk/middleware-logger": 3.667.0 - "@aws-sdk/middleware-recursion-detection": 3.667.0 - "@aws-sdk/middleware-user-agent": 3.668.0 - "@aws-sdk/region-config-resolver": 3.667.0 - "@aws-sdk/types": 3.667.0 - "@aws-sdk/util-endpoints": 3.667.0 - "@aws-sdk/util-user-agent-browser": 3.667.0 - "@aws-sdk/util-user-agent-node": 3.668.0 - "@smithy/config-resolver": ^3.0.9 - "@smithy/core": ^2.4.8 - "@smithy/fetch-http-handler": ^3.2.9 - "@smithy/hash-node": ^3.0.7 - "@smithy/invalid-dependency": ^3.0.7 - "@smithy/middleware-content-length": ^3.0.9 - "@smithy/middleware-endpoint": ^3.1.4 - "@smithy/middleware-retry": ^3.0.23 - "@smithy/middleware-serde": ^3.0.7 - "@smithy/middleware-stack": ^3.0.7 - "@smithy/node-config-provider": ^3.1.8 - "@smithy/node-http-handler": ^3.2.4 - "@smithy/protocol-http": ^4.1.4 - "@smithy/smithy-client": ^3.4.0 - "@smithy/types": ^3.5.0 - "@smithy/url-parser": ^3.0.7 - "@smithy/util-base64": ^3.0.0 - "@smithy/util-body-length-browser": ^3.0.0 - "@smithy/util-body-length-node": ^3.0.0 - "@smithy/util-defaults-mode-browser": ^3.0.23 - "@smithy/util-defaults-mode-node": ^3.0.23 - "@smithy/util-endpoints": ^2.1.3 - "@smithy/util-middleware": ^3.0.7 - "@smithy/util-retry": ^3.0.7 - "@smithy/util-stream": ^3.1.9 - "@smithy/util-utf8": ^3.0.0 + "@aws-sdk/client-sso-oidc": 3.726.0 + "@aws-sdk/client-sts": 3.726.1 + "@aws-sdk/core": 3.723.0 + "@aws-sdk/credential-provider-node": 3.726.0 + "@aws-sdk/middleware-host-header": 3.723.0 + "@aws-sdk/middleware-logger": 3.723.0 + "@aws-sdk/middleware-recursion-detection": 3.723.0 + "@aws-sdk/middleware-user-agent": 3.726.0 + "@aws-sdk/region-config-resolver": 3.723.0 + "@aws-sdk/types": 3.723.0 + "@aws-sdk/util-endpoints": 3.726.0 + "@aws-sdk/util-user-agent-browser": 3.723.0 + "@aws-sdk/util-user-agent-node": 3.726.0 + "@smithy/config-resolver": ^4.0.0 + "@smithy/core": ^3.0.0 + "@smithy/fetch-http-handler": ^5.0.0 + "@smithy/hash-node": ^4.0.0 + "@smithy/invalid-dependency": ^4.0.0 + "@smithy/middleware-content-length": ^4.0.0 + "@smithy/middleware-endpoint": ^4.0.0 + "@smithy/middleware-retry": ^4.0.0 + "@smithy/middleware-serde": ^4.0.0 + "@smithy/middleware-stack": ^4.0.0 + "@smithy/node-config-provider": ^4.0.0 + "@smithy/node-http-handler": ^4.0.0 + "@smithy/protocol-http": ^5.0.0 + "@smithy/smithy-client": ^4.0.0 + "@smithy/types": ^4.0.0 + "@smithy/url-parser": ^4.0.0 + "@smithy/util-base64": ^4.0.0 + "@smithy/util-body-length-browser": ^4.0.0 + "@smithy/util-body-length-node": ^4.0.0 + "@smithy/util-defaults-mode-browser": ^4.0.0 + "@smithy/util-defaults-mode-node": ^4.0.0 + "@smithy/util-endpoints": ^3.0.0 + "@smithy/util-middleware": ^4.0.0 + "@smithy/util-retry": ^4.0.0 + "@smithy/util-stream": ^4.0.0 + "@smithy/util-utf8": ^4.0.0 tslib: ^2.6.2 - checksum: 9deaee50356c572521115265b48b75704856aca8e33de4dab02afe9c484df38fe65846dcc5ab7396ace47f8fe180cccab2fd1884b605cf531c86741f7ae89d92 + checksum: 60c04ff97f898410ea51fd36be6869232b17f7c668cc0caf72815764b9f92c277505f0d148bf791065d1efd8951ab17e25e7242de2d2f4f9c4d9c452d303f2b6 languageName: node linkType: hard @@ -510,6 +510,55 @@ __metadata: languageName: node linkType: hard +"@aws-sdk/client-sso-oidc@npm:3.726.0": + version: 3.726.0 + resolution: "@aws-sdk/client-sso-oidc@npm:3.726.0" + dependencies: + "@aws-crypto/sha256-browser": 5.2.0 + "@aws-crypto/sha256-js": 5.2.0 + "@aws-sdk/core": 3.723.0 + "@aws-sdk/credential-provider-node": 3.726.0 + "@aws-sdk/middleware-host-header": 3.723.0 + "@aws-sdk/middleware-logger": 3.723.0 + "@aws-sdk/middleware-recursion-detection": 3.723.0 + "@aws-sdk/middleware-user-agent": 3.726.0 + "@aws-sdk/region-config-resolver": 3.723.0 + "@aws-sdk/types": 3.723.0 + "@aws-sdk/util-endpoints": 3.726.0 + "@aws-sdk/util-user-agent-browser": 3.723.0 + "@aws-sdk/util-user-agent-node": 3.726.0 + "@smithy/config-resolver": ^4.0.0 + "@smithy/core": ^3.0.0 + "@smithy/fetch-http-handler": ^5.0.0 + "@smithy/hash-node": ^4.0.0 + "@smithy/invalid-dependency": ^4.0.0 + "@smithy/middleware-content-length": ^4.0.0 + "@smithy/middleware-endpoint": ^4.0.0 + "@smithy/middleware-retry": ^4.0.0 + "@smithy/middleware-serde": ^4.0.0 + "@smithy/middleware-stack": ^4.0.0 + "@smithy/node-config-provider": ^4.0.0 + "@smithy/node-http-handler": ^4.0.0 + "@smithy/protocol-http": ^5.0.0 + "@smithy/smithy-client": ^4.0.0 + "@smithy/types": ^4.0.0 + "@smithy/url-parser": ^4.0.0 + "@smithy/util-base64": ^4.0.0 + "@smithy/util-body-length-browser": ^4.0.0 + "@smithy/util-body-length-node": ^4.0.0 + "@smithy/util-defaults-mode-browser": ^4.0.0 + "@smithy/util-defaults-mode-node": ^4.0.0 + "@smithy/util-endpoints": ^3.0.0 + "@smithy/util-middleware": ^4.0.0 + "@smithy/util-retry": ^4.0.0 + "@smithy/util-utf8": ^4.0.0 + tslib: ^2.6.2 + peerDependencies: + "@aws-sdk/client-sts": ^3.726.0 + checksum: 10e4613eff357fa0646b260c268635a39ed10e65148370e630031809ca06ec392b34eb6bc729fc5fbc33dca6a0fe30bce7ead4ba04fbf89c939dbe525460c5ef + languageName: node + linkType: hard + "@aws-sdk/client-sso@npm:3.668.0": version: 3.668.0 resolution: "@aws-sdk/client-sso@npm:3.668.0" @@ -556,6 +605,52 @@ __metadata: languageName: node linkType: hard +"@aws-sdk/client-sso@npm:3.726.0": + version: 3.726.0 + resolution: "@aws-sdk/client-sso@npm:3.726.0" + dependencies: + "@aws-crypto/sha256-browser": 5.2.0 + "@aws-crypto/sha256-js": 5.2.0 + "@aws-sdk/core": 3.723.0 + "@aws-sdk/middleware-host-header": 3.723.0 + "@aws-sdk/middleware-logger": 3.723.0 + "@aws-sdk/middleware-recursion-detection": 3.723.0 + "@aws-sdk/middleware-user-agent": 3.726.0 + "@aws-sdk/region-config-resolver": 3.723.0 + "@aws-sdk/types": 3.723.0 + "@aws-sdk/util-endpoints": 3.726.0 + "@aws-sdk/util-user-agent-browser": 3.723.0 + "@aws-sdk/util-user-agent-node": 3.726.0 + "@smithy/config-resolver": ^4.0.0 + "@smithy/core": ^3.0.0 + "@smithy/fetch-http-handler": ^5.0.0 + "@smithy/hash-node": ^4.0.0 + "@smithy/invalid-dependency": ^4.0.0 + "@smithy/middleware-content-length": ^4.0.0 + "@smithy/middleware-endpoint": ^4.0.0 + "@smithy/middleware-retry": ^4.0.0 + "@smithy/middleware-serde": ^4.0.0 + "@smithy/middleware-stack": ^4.0.0 + "@smithy/node-config-provider": ^4.0.0 + "@smithy/node-http-handler": ^4.0.0 + "@smithy/protocol-http": ^5.0.0 + "@smithy/smithy-client": ^4.0.0 + "@smithy/types": ^4.0.0 + "@smithy/url-parser": ^4.0.0 + "@smithy/util-base64": ^4.0.0 + "@smithy/util-body-length-browser": ^4.0.0 + "@smithy/util-body-length-node": ^4.0.0 + "@smithy/util-defaults-mode-browser": ^4.0.0 + "@smithy/util-defaults-mode-node": ^4.0.0 + "@smithy/util-endpoints": ^3.0.0 + "@smithy/util-middleware": ^4.0.0 + "@smithy/util-retry": ^4.0.0 + "@smithy/util-utf8": ^4.0.0 + tslib: ^2.6.2 + checksum: 9669529543728d071be76f97205a1a184286b2b5b13c2098bfffb59e38274122cf92aad243da34e359e6ca8ad65dae1f2863f5cdb7d3622b6a40dd5876041027 + languageName: node + linkType: hard + "@aws-sdk/client-sts@npm:3.668.0": version: 3.668.0 resolution: "@aws-sdk/client-sts@npm:3.668.0" @@ -604,6 +699,54 @@ __metadata: languageName: node linkType: hard +"@aws-sdk/client-sts@npm:3.726.1": + version: 3.726.1 + resolution: "@aws-sdk/client-sts@npm:3.726.1" + dependencies: + "@aws-crypto/sha256-browser": 5.2.0 + "@aws-crypto/sha256-js": 5.2.0 + "@aws-sdk/client-sso-oidc": 3.726.0 + "@aws-sdk/core": 3.723.0 + "@aws-sdk/credential-provider-node": 3.726.0 + "@aws-sdk/middleware-host-header": 3.723.0 + "@aws-sdk/middleware-logger": 3.723.0 + "@aws-sdk/middleware-recursion-detection": 3.723.0 + "@aws-sdk/middleware-user-agent": 3.726.0 + "@aws-sdk/region-config-resolver": 3.723.0 + "@aws-sdk/types": 3.723.0 + "@aws-sdk/util-endpoints": 3.726.0 + "@aws-sdk/util-user-agent-browser": 3.723.0 + "@aws-sdk/util-user-agent-node": 3.726.0 + "@smithy/config-resolver": ^4.0.0 + "@smithy/core": ^3.0.0 + "@smithy/fetch-http-handler": ^5.0.0 + "@smithy/hash-node": ^4.0.0 + "@smithy/invalid-dependency": ^4.0.0 + "@smithy/middleware-content-length": ^4.0.0 + "@smithy/middleware-endpoint": ^4.0.0 + "@smithy/middleware-retry": ^4.0.0 + "@smithy/middleware-serde": ^4.0.0 + "@smithy/middleware-stack": ^4.0.0 + "@smithy/node-config-provider": ^4.0.0 + "@smithy/node-http-handler": ^4.0.0 + "@smithy/protocol-http": ^5.0.0 + "@smithy/smithy-client": ^4.0.0 + "@smithy/types": ^4.0.0 + "@smithy/url-parser": ^4.0.0 + "@smithy/util-base64": ^4.0.0 + "@smithy/util-body-length-browser": ^4.0.0 + "@smithy/util-body-length-node": ^4.0.0 + "@smithy/util-defaults-mode-browser": ^4.0.0 + "@smithy/util-defaults-mode-node": ^4.0.0 + "@smithy/util-endpoints": ^3.0.0 + "@smithy/util-middleware": ^4.0.0 + "@smithy/util-retry": ^4.0.0 + "@smithy/util-utf8": ^4.0.0 + tslib: ^2.6.2 + checksum: 524038171f5570a9e0adc8053d6574c4fb64f34b048a6b7cf1ecd0563a1a1736b9ae4556df1e8a62f5ada292078f8c2d325fa93006f518861f998cdde74ed124 + languageName: node + linkType: hard + "@aws-sdk/core@npm:3.667.0": version: 3.667.0 resolution: "@aws-sdk/core@npm:3.667.0" @@ -623,6 +766,25 @@ __metadata: languageName: node linkType: hard +"@aws-sdk/core@npm:3.723.0": + version: 3.723.0 + resolution: "@aws-sdk/core@npm:3.723.0" + dependencies: + "@aws-sdk/types": 3.723.0 + "@smithy/core": ^3.0.0 + "@smithy/node-config-provider": ^4.0.0 + "@smithy/property-provider": ^4.0.0 + "@smithy/protocol-http": ^5.0.0 + "@smithy/signature-v4": ^5.0.0 + "@smithy/smithy-client": ^4.0.0 + "@smithy/types": ^4.0.0 + "@smithy/util-middleware": ^4.0.0 + fast-xml-parser: 4.4.1 + tslib: ^2.6.2 + checksum: d9a5ebd8a7aeaf33682fedbe49774afe4574fa17905e2b26d9cd362702821aea3af291c780dcf1c8df80e0440561f64a90d032c5e70107fc3bec630f6acfb890 + languageName: node + linkType: hard + "@aws-sdk/credential-provider-env@npm:3.667.0": version: 3.667.0 resolution: "@aws-sdk/credential-provider-env@npm:3.667.0" @@ -636,6 +798,19 @@ __metadata: languageName: node linkType: hard +"@aws-sdk/credential-provider-env@npm:3.723.0": + version: 3.723.0 + resolution: "@aws-sdk/credential-provider-env@npm:3.723.0" + dependencies: + "@aws-sdk/core": 3.723.0 + "@aws-sdk/types": 3.723.0 + "@smithy/property-provider": ^4.0.0 + "@smithy/types": ^4.0.0 + tslib: ^2.6.2 + checksum: 46ddaade584f43190d3b889a235570a25074dc6f09a089241f9d65960b3fb7257f875d069919a7908b48162e0898e6aa666437385ae7786e0a433755e0c0cbed + languageName: node + linkType: hard + "@aws-sdk/credential-provider-http@npm:3.667.0": version: 3.667.0 resolution: "@aws-sdk/credential-provider-http@npm:3.667.0" @@ -654,6 +829,24 @@ __metadata: languageName: node linkType: hard +"@aws-sdk/credential-provider-http@npm:3.723.0": + version: 3.723.0 + resolution: "@aws-sdk/credential-provider-http@npm:3.723.0" + dependencies: + "@aws-sdk/core": 3.723.0 + "@aws-sdk/types": 3.723.0 + "@smithy/fetch-http-handler": ^5.0.0 + "@smithy/node-http-handler": ^4.0.0 + "@smithy/property-provider": ^4.0.0 + "@smithy/protocol-http": ^5.0.0 + "@smithy/smithy-client": ^4.0.0 + "@smithy/types": ^4.0.0 + "@smithy/util-stream": ^4.0.0 + tslib: ^2.6.2 + checksum: bf9d7d5795b52fd937cd71f66377886ce2db00c271b295d98910ca7ab3e850a26aef298aad7a73e01f2b182316f2e3b054dd533b2c3482b6c0acbe80385e0e14 + languageName: node + linkType: hard + "@aws-sdk/credential-provider-ini@npm:3.668.0": version: 3.668.0 resolution: "@aws-sdk/credential-provider-ini@npm:3.668.0" @@ -676,6 +869,28 @@ __metadata: languageName: node linkType: hard +"@aws-sdk/credential-provider-ini@npm:3.726.0": + version: 3.726.0 + resolution: "@aws-sdk/credential-provider-ini@npm:3.726.0" + dependencies: + "@aws-sdk/core": 3.723.0 + "@aws-sdk/credential-provider-env": 3.723.0 + "@aws-sdk/credential-provider-http": 3.723.0 + "@aws-sdk/credential-provider-process": 3.723.0 + "@aws-sdk/credential-provider-sso": 3.726.0 + "@aws-sdk/credential-provider-web-identity": 3.723.0 + "@aws-sdk/types": 3.723.0 + "@smithy/credential-provider-imds": ^4.0.0 + "@smithy/property-provider": ^4.0.0 + "@smithy/shared-ini-file-loader": ^4.0.0 + "@smithy/types": ^4.0.0 + tslib: ^2.6.2 + peerDependencies: + "@aws-sdk/client-sts": ^3.726.0 + checksum: 935c75ca351f69e67b28357dadbecbcf6738df39c22b84e89f8c06a90ca8fadc2f78fa1dda3774c05d7aca60b0b039fde0e339299309a44a5974da0b46719fce + languageName: node + linkType: hard + "@aws-sdk/credential-provider-node@npm:3.668.0": version: 3.668.0 resolution: "@aws-sdk/credential-provider-node@npm:3.668.0" @@ -696,6 +911,26 @@ __metadata: languageName: node linkType: hard +"@aws-sdk/credential-provider-node@npm:3.726.0": + version: 3.726.0 + resolution: "@aws-sdk/credential-provider-node@npm:3.726.0" + dependencies: + "@aws-sdk/credential-provider-env": 3.723.0 + "@aws-sdk/credential-provider-http": 3.723.0 + "@aws-sdk/credential-provider-ini": 3.726.0 + "@aws-sdk/credential-provider-process": 3.723.0 + "@aws-sdk/credential-provider-sso": 3.726.0 + "@aws-sdk/credential-provider-web-identity": 3.723.0 + "@aws-sdk/types": 3.723.0 + "@smithy/credential-provider-imds": ^4.0.0 + "@smithy/property-provider": ^4.0.0 + "@smithy/shared-ini-file-loader": ^4.0.0 + "@smithy/types": ^4.0.0 + tslib: ^2.6.2 + checksum: abca27ebc69c8f908c3272a434be228375291b838002b282ec85115b6bf87fd38ab618da4d260e24ad2235b9eb395a903172cf7e4d7e707ba1569516f83d2bfc + languageName: node + linkType: hard + "@aws-sdk/credential-provider-process@npm:3.667.0": version: 3.667.0 resolution: "@aws-sdk/credential-provider-process@npm:3.667.0" @@ -710,6 +945,20 @@ __metadata: languageName: node linkType: hard +"@aws-sdk/credential-provider-process@npm:3.723.0": + version: 3.723.0 + resolution: "@aws-sdk/credential-provider-process@npm:3.723.0" + dependencies: + "@aws-sdk/core": 3.723.0 + "@aws-sdk/types": 3.723.0 + "@smithy/property-provider": ^4.0.0 + "@smithy/shared-ini-file-loader": ^4.0.0 + "@smithy/types": ^4.0.0 + tslib: ^2.6.2 + checksum: 2ebbe80865db30269ef255b7587eefe86851fe1787e5e8f846dabed728e670834c79a9ecd5e258b1c476dca44c02e55a5b0b214f6cd59faf0de2cbb29187668d + languageName: node + linkType: hard + "@aws-sdk/credential-provider-sso@npm:3.668.0": version: 3.668.0 resolution: "@aws-sdk/credential-provider-sso@npm:3.668.0" @@ -726,6 +975,22 @@ __metadata: languageName: node linkType: hard +"@aws-sdk/credential-provider-sso@npm:3.726.0": + version: 3.726.0 + resolution: "@aws-sdk/credential-provider-sso@npm:3.726.0" + dependencies: + "@aws-sdk/client-sso": 3.726.0 + "@aws-sdk/core": 3.723.0 + "@aws-sdk/token-providers": 3.723.0 + "@aws-sdk/types": 3.723.0 + "@smithy/property-provider": ^4.0.0 + "@smithy/shared-ini-file-loader": ^4.0.0 + "@smithy/types": ^4.0.0 + tslib: ^2.6.2 + checksum: 37e3ece21f072ca8b74a15007842249062defa3acb623351417e47808b491830766329fd52e775dbb31db1f0d2769ca29598eb05ffe1031ecec472c6841113ce + languageName: node + linkType: hard + "@aws-sdk/credential-provider-web-identity@npm:3.667.0": version: 3.667.0 resolution: "@aws-sdk/credential-provider-web-identity@npm:3.667.0" @@ -741,6 +1006,21 @@ __metadata: languageName: node linkType: hard +"@aws-sdk/credential-provider-web-identity@npm:3.723.0": + version: 3.723.0 + resolution: "@aws-sdk/credential-provider-web-identity@npm:3.723.0" + dependencies: + "@aws-sdk/core": 3.723.0 + "@aws-sdk/types": 3.723.0 + "@smithy/property-provider": ^4.0.0 + "@smithy/types": ^4.0.0 + tslib: ^2.6.2 + peerDependencies: + "@aws-sdk/client-sts": ^3.723.0 + checksum: f011707011361bd4d91b655aec9aaba40f00b653f2b67b2c6802721bc5ff6b18eb9d7345327085cac90310ef91706787a7beeffb59233f82b6cc1cf276f75c48 + languageName: node + linkType: hard + "@aws-sdk/endpoint-cache@npm:3.572.0": version: 3.572.0 resolution: "@aws-sdk/endpoint-cache@npm:3.572.0" @@ -823,6 +1103,18 @@ __metadata: languageName: node linkType: hard +"@aws-sdk/middleware-host-header@npm:3.723.0": + version: 3.723.0 + resolution: "@aws-sdk/middleware-host-header@npm:3.723.0" + dependencies: + "@aws-sdk/types": 3.723.0 + "@smithy/protocol-http": ^5.0.0 + "@smithy/types": ^4.0.0 + tslib: ^2.6.2 + checksum: e2517de66beee4eb019f1423855a53c7231ce79ee9447c3efba608f3f7c9f6a2ebe8bc3e1f41a41d2744c110267d98c9479b063b9e7dbc21a31a65ede7a0e9af + languageName: node + linkType: hard + "@aws-sdk/middleware-location-constraint@npm:3.667.0": version: 3.667.0 resolution: "@aws-sdk/middleware-location-constraint@npm:3.667.0" @@ -845,6 +1137,17 @@ __metadata: languageName: node linkType: hard +"@aws-sdk/middleware-logger@npm:3.723.0": + version: 3.723.0 + resolution: "@aws-sdk/middleware-logger@npm:3.723.0" + dependencies: + "@aws-sdk/types": 3.723.0 + "@smithy/types": ^4.0.0 + tslib: ^2.6.2 + checksum: 7ea206deaafc77a6d79713a5dd9480b1784e8edd1e0cdb0cfce8d0fe2ee69c6f41fad07934f39c73f0d69b74511850847f007f3e717e65efb2a1bb9326423ab7 + languageName: node + linkType: hard + "@aws-sdk/middleware-recursion-detection@npm:3.667.0": version: 3.667.0 resolution: "@aws-sdk/middleware-recursion-detection@npm:3.667.0" @@ -857,6 +1160,18 @@ __metadata: languageName: node linkType: hard +"@aws-sdk/middleware-recursion-detection@npm:3.723.0": + version: 3.723.0 + resolution: "@aws-sdk/middleware-recursion-detection@npm:3.723.0" + dependencies: + "@aws-sdk/types": 3.723.0 + "@smithy/protocol-http": ^5.0.0 + "@smithy/types": ^4.0.0 + tslib: ^2.6.2 + checksum: 06ca854166cf68b81551a57665bd1ebdb96b5d8d9f7cb6faaf92a29d6efcb72bbb50b53c111fb670284586ac4bcb93d0687ec461a7bf04099faa28d02a1ca303 + languageName: node + linkType: hard + "@aws-sdk/middleware-sdk-s3@npm:3.667.0": version: 3.667.0 resolution: "@aws-sdk/middleware-sdk-s3@npm:3.667.0" @@ -905,6 +1220,21 @@ __metadata: languageName: node linkType: hard +"@aws-sdk/middleware-user-agent@npm:3.726.0": + version: 3.726.0 + resolution: "@aws-sdk/middleware-user-agent@npm:3.726.0" + dependencies: + "@aws-sdk/core": 3.723.0 + "@aws-sdk/types": 3.723.0 + "@aws-sdk/util-endpoints": 3.726.0 + "@smithy/core": ^3.0.0 + "@smithy/protocol-http": ^5.0.0 + "@smithy/types": ^4.0.0 + tslib: ^2.6.2 + checksum: b50b3361d38ace26f1fba1a868d0057b5a7baec3a9b370a38d36af523fa66dd91215ca81ddc8ec619e4a1bb572abbef0011a3f78c6ca09f90ebce38b12753089 + languageName: node + linkType: hard + "@aws-sdk/region-config-resolver@npm:3.667.0": version: 3.667.0 resolution: "@aws-sdk/region-config-resolver@npm:3.667.0" @@ -919,6 +1249,20 @@ __metadata: languageName: node linkType: hard +"@aws-sdk/region-config-resolver@npm:3.723.0": + version: 3.723.0 + resolution: "@aws-sdk/region-config-resolver@npm:3.723.0" + dependencies: + "@aws-sdk/types": 3.723.0 + "@smithy/node-config-provider": ^4.0.0 + "@smithy/types": ^4.0.0 + "@smithy/util-config-provider": ^4.0.0 + "@smithy/util-middleware": ^4.0.0 + tslib: ^2.6.2 + checksum: 351160af2b7e9d57971cde6efe9e162133ba04c0082fbe62c3b1c9b4341f821b24504f1bff382b6c1d00eccf1b7cda45e6b06ab6d2991f4823814b44d9946a83 + languageName: node + linkType: hard + "@aws-sdk/s3-request-presigner@npm:^3.332.0": version: 3.668.0 resolution: "@aws-sdk/s3-request-presigner@npm:3.668.0" @@ -964,6 +1308,21 @@ __metadata: languageName: node linkType: hard +"@aws-sdk/token-providers@npm:3.723.0": + version: 3.723.0 + resolution: "@aws-sdk/token-providers@npm:3.723.0" + dependencies: + "@aws-sdk/types": 3.723.0 + "@smithy/property-provider": ^4.0.0 + "@smithy/shared-ini-file-loader": ^4.0.0 + "@smithy/types": ^4.0.0 + tslib: ^2.6.2 + peerDependencies: + "@aws-sdk/client-sso-oidc": ^3.723.0 + checksum: 61984cc6f749a3eab3bbe65974400feadfb37acbdfc2bcb44437f1e5a4deeecaddb68fc9c6e5aa6360b1e4dff1d3763b88cd934e36d0ede6278413f641ebb173 + languageName: node + linkType: hard + "@aws-sdk/types@npm:3.667.0, @aws-sdk/types@npm:^3.222.0": version: 3.667.0 resolution: "@aws-sdk/types@npm:3.667.0" @@ -974,6 +1333,16 @@ __metadata: languageName: node linkType: hard +"@aws-sdk/types@npm:3.723.0": + version: 3.723.0 + resolution: "@aws-sdk/types@npm:3.723.0" + dependencies: + "@smithy/types": ^4.0.0 + tslib: ^2.6.2 + checksum: 670840051b6575e3b94f4963fceb75b08a4ea027e1acbbe60b7e39a373494d537cd7c4a9825d0455be62e0c1849903f7a1b41c3a6212877d2fd4e62ffd4d26ef + languageName: node + linkType: hard + "@aws-sdk/util-arn-parser@npm:3.568.0": version: 3.568.0 resolution: "@aws-sdk/util-arn-parser@npm:3.568.0" @@ -995,6 +1364,18 @@ __metadata: languageName: node linkType: hard +"@aws-sdk/util-endpoints@npm:3.726.0": + version: 3.726.0 + resolution: "@aws-sdk/util-endpoints@npm:3.726.0" + dependencies: + "@aws-sdk/types": 3.723.0 + "@smithy/types": ^4.0.0 + "@smithy/util-endpoints": ^3.0.0 + tslib: ^2.6.2 + checksum: d472cdbf6917ac88fc36778af3d5db1ac49966bce2277a602ec5952118ad7112580b411d2748af715e65c5d6c60ff04178709eda8c100da54593b5a982be8c59 + languageName: node + linkType: hard + "@aws-sdk/util-format-url@npm:3.667.0": version: 3.667.0 resolution: "@aws-sdk/util-format-url@npm:3.667.0" @@ -1028,6 +1409,18 @@ __metadata: languageName: node linkType: hard +"@aws-sdk/util-user-agent-browser@npm:3.723.0": + version: 3.723.0 + resolution: "@aws-sdk/util-user-agent-browser@npm:3.723.0" + dependencies: + "@aws-sdk/types": 3.723.0 + "@smithy/types": ^4.0.0 + bowser: ^2.11.0 + tslib: ^2.6.2 + checksum: 40fac8acab1a935d920b3c0b5e152b000b184627b1b502424719fdf4df82068080b65db7ef08538aaac2d98b551aacbee5816cce9e6b3fcdfbeb7767c2989dae + languageName: node + linkType: hard + "@aws-sdk/util-user-agent-node@npm:3.668.0": version: 3.668.0 resolution: "@aws-sdk/util-user-agent-node@npm:3.668.0" @@ -1046,6 +1439,24 @@ __metadata: languageName: node linkType: hard +"@aws-sdk/util-user-agent-node@npm:3.726.0": + version: 3.726.0 + resolution: "@aws-sdk/util-user-agent-node@npm:3.726.0" + dependencies: + "@aws-sdk/middleware-user-agent": 3.726.0 + "@aws-sdk/types": 3.723.0 + "@smithy/node-config-provider": ^4.0.0 + "@smithy/types": ^4.0.0 + tslib: ^2.6.2 + peerDependencies: + aws-crt: ">=1.0.0" + peerDependenciesMeta: + aws-crt: + optional: true + checksum: 04ebc304b65d0c17477a1872e8d2230c65c41e45d36af73acfe34557c505b2015de488eaebff0de33cec5481848bc6d199e9496882ca7c8294f44245e9afcc3c + languageName: node + linkType: hard + "@aws-sdk/xml-builder@npm:3.662.0": version: 3.662.0 resolution: "@aws-sdk/xml-builder@npm:3.662.0" @@ -2396,6 +2807,16 @@ __metadata: languageName: node linkType: hard +"@smithy/abort-controller@npm:^4.0.1": + version: 4.0.1 + resolution: "@smithy/abort-controller@npm:4.0.1" + dependencies: + "@smithy/types": ^4.1.0 + tslib: ^2.6.2 + checksum: 9f6ac65639ae5823e7ea83fcd05282fca105adecda8a40bd4280cacb87ef2af935cf18e649897369db53c1b82c81fcdea75240260ca0ce9795ee22d6afa4f067 + languageName: node + linkType: hard + "@smithy/chunked-blob-reader-native@npm:^3.0.0": version: 3.0.0 resolution: "@smithy/chunked-blob-reader-native@npm:3.0.0" @@ -2428,6 +2849,19 @@ __metadata: languageName: node linkType: hard +"@smithy/config-resolver@npm:^4.0.0, @smithy/config-resolver@npm:^4.0.1": + version: 4.0.1 + resolution: "@smithy/config-resolver@npm:4.0.1" + dependencies: + "@smithy/node-config-provider": ^4.0.1 + "@smithy/types": ^4.1.0 + "@smithy/util-config-provider": ^4.0.0 + "@smithy/util-middleware": ^4.0.1 + tslib: ^2.6.2 + checksum: 24035ea6766693668f0776f8eed3d0a81aecbabf925e48c20ef759e6a95b39cd3e1b04efd819860d46727fe094382803fe3f625a0fbfcd652196753b44b7864f + languageName: node + linkType: hard + "@smithy/core@npm:^2.4.8": version: 2.4.8 resolution: "@smithy/core@npm:2.4.8" @@ -2446,6 +2880,22 @@ __metadata: languageName: node linkType: hard +"@smithy/core@npm:^3.0.0, @smithy/core@npm:^3.1.0": + version: 3.1.0 + resolution: "@smithy/core@npm:3.1.0" + dependencies: + "@smithy/middleware-serde": ^4.0.1 + "@smithy/protocol-http": ^5.0.1 + "@smithy/types": ^4.1.0 + "@smithy/util-body-length-browser": ^4.0.0 + "@smithy/util-middleware": ^4.0.1 + "@smithy/util-stream": ^4.0.1 + "@smithy/util-utf8": ^4.0.0 + tslib: ^2.6.2 + checksum: 877f522d6eae322081c390b989e1def6ec1d55daf7d7ededf0853973d13d22523a3fca9bac868a0db47e321f6ac2c1c619ce094a742bae2698fc8e1940733537 + languageName: node + linkType: hard + "@smithy/credential-provider-imds@npm:^3.2.4": version: 3.2.4 resolution: "@smithy/credential-provider-imds@npm:3.2.4" @@ -2459,6 +2909,19 @@ __metadata: languageName: node linkType: hard +"@smithy/credential-provider-imds@npm:^4.0.0, @smithy/credential-provider-imds@npm:^4.0.1": + version: 4.0.1 + resolution: "@smithy/credential-provider-imds@npm:4.0.1" + dependencies: + "@smithy/node-config-provider": ^4.0.1 + "@smithy/property-provider": ^4.0.1 + "@smithy/types": ^4.1.0 + "@smithy/url-parser": ^4.0.1 + tslib: ^2.6.2 + checksum: ec03248abf9b2e89f5a49539d2a069c3d034af35dc49a09d260dd58662ac0b639c6463d1eaa7d80253b8168c67ecb00de8c79376ed65433fc20f8e934a9017d9 + languageName: node + linkType: hard + "@smithy/eventstream-codec@npm:^3.1.6": version: 3.1.6 resolution: "@smithy/eventstream-codec@npm:3.1.6" @@ -2527,6 +2990,19 @@ __metadata: languageName: node linkType: hard +"@smithy/fetch-http-handler@npm:^5.0.0, @smithy/fetch-http-handler@npm:^5.0.1": + version: 5.0.1 + resolution: "@smithy/fetch-http-handler@npm:5.0.1" + dependencies: + "@smithy/protocol-http": ^5.0.1 + "@smithy/querystring-builder": ^4.0.1 + "@smithy/types": ^4.1.0 + "@smithy/util-base64": ^4.0.0 + tslib: ^2.6.2 + checksum: d8e160e4a57e1fb7b7805fcafda81fb7d7511904b48d2e25229d18bd15598c64cdd12bd39c0dee9fc9cc31a76952fae1d400c6a80e9015cfd6e22c2f930a6212 + languageName: node + linkType: hard + "@smithy/hash-blob-browser@npm:^3.1.6": version: 3.1.6 resolution: "@smithy/hash-blob-browser@npm:3.1.6" @@ -2551,6 +3027,18 @@ __metadata: languageName: node linkType: hard +"@smithy/hash-node@npm:^4.0.0": + version: 4.0.1 + resolution: "@smithy/hash-node@npm:4.0.1" + dependencies: + "@smithy/types": ^4.1.0 + "@smithy/util-buffer-from": ^4.0.0 + "@smithy/util-utf8": ^4.0.0 + tslib: ^2.6.2 + checksum: c68d222d4c39e97e90965cc669b6d30628b07ae136f49981ff551bccd5c104161fd2a322ebea85514c925e1d3525e413c05513e303a76e7af6c3e0cdb55960d0 + languageName: node + linkType: hard + "@smithy/hash-stream-node@npm:^3.1.6": version: 3.1.6 resolution: "@smithy/hash-stream-node@npm:3.1.6" @@ -2572,6 +3060,16 @@ __metadata: languageName: node linkType: hard +"@smithy/invalid-dependency@npm:^4.0.0": + version: 4.0.1 + resolution: "@smithy/invalid-dependency@npm:4.0.1" + dependencies: + "@smithy/types": ^4.1.0 + tslib: ^2.6.2 + checksum: 541e89a18cb5ce8db063ea74ea8831a11bdf42ac58412ae6aad350d4a128b6e9d3b0b5b31cac2597e5e52a0da4a2a3cf202946bb6649d398a84876a89c332bd1 + languageName: node + linkType: hard + "@smithy/is-array-buffer@npm:^2.2.0": version: 2.2.0 resolution: "@smithy/is-array-buffer@npm:2.2.0" @@ -2590,6 +3088,15 @@ __metadata: languageName: node linkType: hard +"@smithy/is-array-buffer@npm:^4.0.0": + version: 4.0.0 + resolution: "@smithy/is-array-buffer@npm:4.0.0" + dependencies: + tslib: ^2.6.2 + checksum: 8226fc1eca7aacd7f887f3a5ec2f15a3cafa72aa1c42d3fc759c66600481381d18ec7285a8195f24b9c4fe0ce9a565c133b2021d86a8077aebce3f86b3716802 + languageName: node + linkType: hard + "@smithy/md5-js@npm:^3.0.7": version: 3.0.7 resolution: "@smithy/md5-js@npm:3.0.7" @@ -2612,6 +3119,17 @@ __metadata: languageName: node linkType: hard +"@smithy/middleware-content-length@npm:^4.0.0": + version: 4.0.1 + resolution: "@smithy/middleware-content-length@npm:4.0.1" + dependencies: + "@smithy/protocol-http": ^5.0.1 + "@smithy/types": ^4.1.0 + tslib: ^2.6.2 + checksum: 61109cfee368b8b20d39efcc050c0a30c4a4355dc4fb1c8521b1ec258c35c454bda9a6489571b01eb14c48e030642fd674d28e6c8083e6e4272b2b24cee0e61e + languageName: node + linkType: hard + "@smithy/middleware-endpoint@npm:^3.1.4": version: 3.1.4 resolution: "@smithy/middleware-endpoint@npm:3.1.4" @@ -2627,6 +3145,22 @@ __metadata: languageName: node linkType: hard +"@smithy/middleware-endpoint@npm:^4.0.0, @smithy/middleware-endpoint@npm:^4.0.1": + version: 4.0.1 + resolution: "@smithy/middleware-endpoint@npm:4.0.1" + dependencies: + "@smithy/core": ^3.1.0 + "@smithy/middleware-serde": ^4.0.1 + "@smithy/node-config-provider": ^4.0.1 + "@smithy/shared-ini-file-loader": ^4.0.1 + "@smithy/types": ^4.1.0 + "@smithy/url-parser": ^4.0.1 + "@smithy/util-middleware": ^4.0.1 + tslib: ^2.6.2 + checksum: 203749fda4a7524b4bce67326d3ffde5bb4eda023a10badcaf5b1243fd3022045aa004cc4749aaa2edd3282690ecd842e2cacc92adf8833084e1007596214ea3 + languageName: node + linkType: hard + "@smithy/middleware-retry@npm:^3.0.23": version: 3.0.23 resolution: "@smithy/middleware-retry@npm:3.0.23" @@ -2644,6 +3178,23 @@ __metadata: languageName: node linkType: hard +"@smithy/middleware-retry@npm:^4.0.0": + version: 4.0.1 + resolution: "@smithy/middleware-retry@npm:4.0.1" + dependencies: + "@smithy/node-config-provider": ^4.0.1 + "@smithy/protocol-http": ^5.0.1 + "@smithy/service-error-classification": ^4.0.1 + "@smithy/smithy-client": ^4.1.0 + "@smithy/types": ^4.1.0 + "@smithy/util-middleware": ^4.0.1 + "@smithy/util-retry": ^4.0.1 + tslib: ^2.6.2 + uuid: ^9.0.1 + checksum: 470f8b0c84d233755e9d4a80c07610a58bf4495809ef836b4c811b901d1c0f94ec636488c2937f57827101d0e5157aafce3a1a29e156f6069cada5f057f3d359 + languageName: node + linkType: hard + "@smithy/middleware-serde@npm:^3.0.7": version: 3.0.7 resolution: "@smithy/middleware-serde@npm:3.0.7" @@ -2654,6 +3205,16 @@ __metadata: languageName: node linkType: hard +"@smithy/middleware-serde@npm:^4.0.0, @smithy/middleware-serde@npm:^4.0.1": + version: 4.0.1 + resolution: "@smithy/middleware-serde@npm:4.0.1" + dependencies: + "@smithy/types": ^4.1.0 + tslib: ^2.6.2 + checksum: fc462b4555272759ccaff21460d2373d3783e211d8d7eca9ed4b0a6dde214b00de21a16ffa38e384b58acc1b2b9c97bf3ed7261f9c06cd87ad6006460dd03135 + languageName: node + linkType: hard + "@smithy/middleware-stack@npm:^3.0.7": version: 3.0.7 resolution: "@smithy/middleware-stack@npm:3.0.7" @@ -2664,6 +3225,16 @@ __metadata: languageName: node linkType: hard +"@smithy/middleware-stack@npm:^4.0.0, @smithy/middleware-stack@npm:^4.0.1": + version: 4.0.1 + resolution: "@smithy/middleware-stack@npm:4.0.1" + dependencies: + "@smithy/types": ^4.1.0 + tslib: ^2.6.2 + checksum: 21f61adf5071c6c32356c9f6b2423fffc0ba0cfdedae37b5162659e156bec122e03f67a5dac5fbd224f9bbb15a6793fd332cf1a02ea17eda0c4fb7e4ca22ce95 + languageName: node + linkType: hard + "@smithy/node-config-provider@npm:^3.1.8": version: 3.1.8 resolution: "@smithy/node-config-provider@npm:3.1.8" @@ -2676,6 +3247,18 @@ __metadata: languageName: node linkType: hard +"@smithy/node-config-provider@npm:^4.0.0, @smithy/node-config-provider@npm:^4.0.1": + version: 4.0.1 + resolution: "@smithy/node-config-provider@npm:4.0.1" + dependencies: + "@smithy/property-provider": ^4.0.1 + "@smithy/shared-ini-file-loader": ^4.0.1 + "@smithy/types": ^4.1.0 + tslib: ^2.6.2 + checksum: e997b3732a686e1dd9c5544a97fb18519acb45d522700045301391eee4a7b305a31ed68dd3a407fe754bebdfd4b759d8128a4bc80cdcd490113934ef8c3aaaa7 + languageName: node + linkType: hard + "@smithy/node-http-handler@npm:^3.2.4": version: 3.2.4 resolution: "@smithy/node-http-handler@npm:3.2.4" @@ -2689,6 +3272,19 @@ __metadata: languageName: node linkType: hard +"@smithy/node-http-handler@npm:^4.0.0, @smithy/node-http-handler@npm:^4.0.1": + version: 4.0.1 + resolution: "@smithy/node-http-handler@npm:4.0.1" + dependencies: + "@smithy/abort-controller": ^4.0.1 + "@smithy/protocol-http": ^5.0.1 + "@smithy/querystring-builder": ^4.0.1 + "@smithy/types": ^4.1.0 + tslib: ^2.6.2 + checksum: d32ee8e9792340c1fa5d037e55e50c8ddf0e9b481a5bc83d1423765f66eb9f699c1510834b331ccb3b4b0d7f2f3c4eec5b724800c5132730954b3d930f059730 + languageName: node + linkType: hard + "@smithy/property-provider@npm:^3.1.7": version: 3.1.7 resolution: "@smithy/property-provider@npm:3.1.7" @@ -2699,6 +3295,16 @@ __metadata: languageName: node linkType: hard +"@smithy/property-provider@npm:^4.0.0, @smithy/property-provider@npm:^4.0.1": + version: 4.0.1 + resolution: "@smithy/property-provider@npm:4.0.1" + dependencies: + "@smithy/types": ^4.1.0 + tslib: ^2.6.2 + checksum: c03bd23a9e707af6201e49d1d7c67d370b630eb39ab60eaebd628bda725105d3ed67392078d6ae73a22be35f7dcec9771fafd2a88c48b532ca717b68fc3c9a33 + languageName: node + linkType: hard + "@smithy/protocol-http@npm:^4.1.4": version: 4.1.4 resolution: "@smithy/protocol-http@npm:4.1.4" @@ -2709,6 +3315,16 @@ __metadata: languageName: node linkType: hard +"@smithy/protocol-http@npm:^5.0.0, @smithy/protocol-http@npm:^5.0.1": + version: 5.0.1 + resolution: "@smithy/protocol-http@npm:5.0.1" + dependencies: + "@smithy/types": ^4.1.0 + tslib: ^2.6.2 + checksum: 3978f544aa4bf36bcf2484126f5208f7035b210ca0088f2721edd11dbe7bbddeacb6b9e7ca493437dc7b5fdd0d9d85992f2c6e31846744690f205f852a981a3b + languageName: node + linkType: hard + "@smithy/querystring-builder@npm:^3.0.7": version: 3.0.7 resolution: "@smithy/querystring-builder@npm:3.0.7" @@ -2720,6 +3336,17 @@ __metadata: languageName: node linkType: hard +"@smithy/querystring-builder@npm:^4.0.1": + version: 4.0.1 + resolution: "@smithy/querystring-builder@npm:4.0.1" + dependencies: + "@smithy/types": ^4.1.0 + "@smithy/util-uri-escape": ^4.0.0 + tslib: ^2.6.2 + checksum: 8c8486a1c5a8f7cb05db4fdbe213bd02a9b323121da885ff234763d63730aa269ce779adc4dea74715fbf53a7ff4f487d9d51dda33ddb14533ad42166f10b0cb + languageName: node + linkType: hard + "@smithy/querystring-parser@npm:^3.0.7": version: 3.0.7 resolution: "@smithy/querystring-parser@npm:3.0.7" @@ -2730,6 +3357,16 @@ __metadata: languageName: node linkType: hard +"@smithy/querystring-parser@npm:^4.0.1": + version: 4.0.1 + resolution: "@smithy/querystring-parser@npm:4.0.1" + dependencies: + "@smithy/types": ^4.1.0 + tslib: ^2.6.2 + checksum: 0ce6963937aa44882aeaf44b6aff68ca08faa927bd93da7adf354dd83b48beaef4246672504d8fc10d91be07e2f78c2b670bb82a46638da573183a69fa393278 + languageName: node + linkType: hard + "@smithy/service-error-classification@npm:^3.0.7": version: 3.0.7 resolution: "@smithy/service-error-classification@npm:3.0.7" @@ -2739,6 +3376,15 @@ __metadata: languageName: node linkType: hard +"@smithy/service-error-classification@npm:^4.0.1": + version: 4.0.1 + resolution: "@smithy/service-error-classification@npm:4.0.1" + dependencies: + "@smithy/types": ^4.1.0 + checksum: 331c06d7a07cd2f9303cc396e1f9b1d44c785ccb27f4f8f02177b9f496667ffa4df40ae38d2ed1b557cd9c75b5cacb9b00106462dc62094253f8619a7d370343 + languageName: node + linkType: hard + "@smithy/shared-ini-file-loader@npm:^3.1.8": version: 3.1.8 resolution: "@smithy/shared-ini-file-loader@npm:3.1.8" @@ -2749,6 +3395,16 @@ __metadata: languageName: node linkType: hard +"@smithy/shared-ini-file-loader@npm:^4.0.0, @smithy/shared-ini-file-loader@npm:^4.0.1": + version: 4.0.1 + resolution: "@smithy/shared-ini-file-loader@npm:4.0.1" + dependencies: + "@smithy/types": ^4.1.0 + tslib: ^2.6.2 + checksum: 54a399800dc32368ad99c5da4fd5eae62de4f9ddd249144b6516493bc42625e83c21ccd7c61d667c88d6000a3f5b42db452c10b870740cc9bec9e6c776607a9e + languageName: node + linkType: hard + "@smithy/signature-v4@npm:^4.2.0": version: 4.2.0 resolution: "@smithy/signature-v4@npm:4.2.0" @@ -2765,6 +3421,22 @@ __metadata: languageName: node linkType: hard +"@smithy/signature-v4@npm:^5.0.0": + version: 5.0.1 + resolution: "@smithy/signature-v4@npm:5.0.1" + dependencies: + "@smithy/is-array-buffer": ^4.0.0 + "@smithy/protocol-http": ^5.0.1 + "@smithy/types": ^4.1.0 + "@smithy/util-hex-encoding": ^4.0.0 + "@smithy/util-middleware": ^4.0.1 + "@smithy/util-uri-escape": ^4.0.0 + "@smithy/util-utf8": ^4.0.0 + tslib: ^2.6.2 + checksum: fb6613ce08e2008e3da447eeaafdfdcbd8a428c9d4aaf3220eab77cb33832596885f77966acbee3f753e113ce728f440ca31747908d81d0ecbcf1822c5c7bd28 + languageName: node + linkType: hard + "@smithy/smithy-client@npm:^3.4.0": version: 3.4.0 resolution: "@smithy/smithy-client@npm:3.4.0" @@ -2779,6 +3451,21 @@ __metadata: languageName: node linkType: hard +"@smithy/smithy-client@npm:^4.0.0, @smithy/smithy-client@npm:^4.1.0": + version: 4.1.0 + resolution: "@smithy/smithy-client@npm:4.1.0" + dependencies: + "@smithy/core": ^3.1.0 + "@smithy/middleware-endpoint": ^4.0.1 + "@smithy/middleware-stack": ^4.0.1 + "@smithy/protocol-http": ^5.0.1 + "@smithy/types": ^4.1.0 + "@smithy/util-stream": ^4.0.1 + tslib: ^2.6.2 + checksum: df240ac0e0b4fdf172a831af707f5f6854523ee778987f613fd173cbda3d1c269d018d1359946fd8e6f3436a248c8dc0eabc3557545d2be711b25b438f43cad8 + languageName: node + linkType: hard + "@smithy/types@npm:^3.5.0": version: 3.5.0 resolution: "@smithy/types@npm:3.5.0" @@ -2788,6 +3475,15 @@ __metadata: languageName: node linkType: hard +"@smithy/types@npm:^4.0.0, @smithy/types@npm:^4.1.0": + version: 4.1.0 + resolution: "@smithy/types@npm:4.1.0" + dependencies: + tslib: ^2.6.2 + checksum: ff7dcb7a72a2f5e984df95342ec7276cc3249e57de76d5013bf69314a4dbd081e193c5f849e8e5c3f54be222d861272a90ab15b437678e31958eb2c76f55c689 + languageName: node + linkType: hard + "@smithy/url-parser@npm:^3.0.7": version: 3.0.7 resolution: "@smithy/url-parser@npm:3.0.7" @@ -2799,6 +3495,17 @@ __metadata: languageName: node linkType: hard +"@smithy/url-parser@npm:^4.0.0, @smithy/url-parser@npm:^4.0.1": + version: 4.0.1 + resolution: "@smithy/url-parser@npm:4.0.1" + dependencies: + "@smithy/querystring-parser": ^4.0.1 + "@smithy/types": ^4.1.0 + tslib: ^2.6.2 + checksum: 3ec0ebf024a333d20cfe463c246196a188abcd3460014cf535979540e873c5b9f7a13214e221aed31b50dd1f28b24b5eafbb6ef5ae1998987f81622c4ccd156b + languageName: node + linkType: hard + "@smithy/util-base64@npm:^3.0.0": version: 3.0.0 resolution: "@smithy/util-base64@npm:3.0.0" @@ -2810,6 +3517,17 @@ __metadata: languageName: node linkType: hard +"@smithy/util-base64@npm:^4.0.0": + version: 4.0.0 + resolution: "@smithy/util-base64@npm:4.0.0" + dependencies: + "@smithy/util-buffer-from": ^4.0.0 + "@smithy/util-utf8": ^4.0.0 + tslib: ^2.6.2 + checksum: 7fb3430d6e1cbb4bcc61458587bb0746458f0ec8e8cd008224ca984ff65c3c3307b3a528d040cef4c1fc7d1bd4111f6de8f4f1595845422f14ac7d100b3871b1 + languageName: node + linkType: hard + "@smithy/util-body-length-browser@npm:^3.0.0": version: 3.0.0 resolution: "@smithy/util-body-length-browser@npm:3.0.0" @@ -2819,6 +3537,15 @@ __metadata: languageName: node linkType: hard +"@smithy/util-body-length-browser@npm:^4.0.0": + version: 4.0.0 + resolution: "@smithy/util-body-length-browser@npm:4.0.0" + dependencies: + tslib: ^2.6.2 + checksum: 72381e12de7cccbb722c60e3f3ae0f8bce7fc9a9e8064c7968ac733698a5a30bea098a3c365095c519491fe64e2e949c22f74d4f1e0d910090d6389b41c416eb + languageName: node + linkType: hard + "@smithy/util-body-length-node@npm:^3.0.0": version: 3.0.0 resolution: "@smithy/util-body-length-node@npm:3.0.0" @@ -2828,6 +3555,15 @@ __metadata: languageName: node linkType: hard +"@smithy/util-body-length-node@npm:^4.0.0": + version: 4.0.0 + resolution: "@smithy/util-body-length-node@npm:4.0.0" + dependencies: + tslib: ^2.6.2 + checksum: 12d8de9c526647f51f56804044f5847f0c7c7afee30fa368d2b7bd4b4de8fe2438a925aab51965fe8a4b2f08f68e8630cc3c54a449beae6646d99cae900ed106 + languageName: node + linkType: hard + "@smithy/util-buffer-from@npm:^2.2.0": version: 2.2.0 resolution: "@smithy/util-buffer-from@npm:2.2.0" @@ -2848,6 +3584,16 @@ __metadata: languageName: node linkType: hard +"@smithy/util-buffer-from@npm:^4.0.0": + version: 4.0.0 + resolution: "@smithy/util-buffer-from@npm:4.0.0" + dependencies: + "@smithy/is-array-buffer": ^4.0.0 + tslib: ^2.6.2 + checksum: 8124e28d3e34b5335c08398a9081cc56a232d23e08172d488669f91a167d0871d36aba9dd3e4b70175a52f1bd70e2bf708d4c989a19512a4374d2cf67650a15e + languageName: node + linkType: hard + "@smithy/util-config-provider@npm:^3.0.0": version: 3.0.0 resolution: "@smithy/util-config-provider@npm:3.0.0" @@ -2857,6 +3603,15 @@ __metadata: languageName: node linkType: hard +"@smithy/util-config-provider@npm:^4.0.0": + version: 4.0.0 + resolution: "@smithy/util-config-provider@npm:4.0.0" + dependencies: + tslib: ^2.6.2 + checksum: 91bd9e0bec4c4a37c3fc286e72f3387be9272b090111edaee992d9e9619370f3f2ad88ce771ef42dbfe40a44500163b633914486e662526591f5f737d5e4ff5a + languageName: node + linkType: hard + "@smithy/util-defaults-mode-browser@npm:^3.0.23": version: 3.0.23 resolution: "@smithy/util-defaults-mode-browser@npm:3.0.23" @@ -2870,6 +3625,19 @@ __metadata: languageName: node linkType: hard +"@smithy/util-defaults-mode-browser@npm:^4.0.0": + version: 4.0.1 + resolution: "@smithy/util-defaults-mode-browser@npm:4.0.1" + dependencies: + "@smithy/property-provider": ^4.0.1 + "@smithy/smithy-client": ^4.1.0 + "@smithy/types": ^4.1.0 + bowser: ^2.11.0 + tslib: ^2.6.2 + checksum: df336aa12504d6a91809ec29f95fd954ab01ba3c3722d2edcd5d819bd7cda0483e151224cea28311b41cba1657accb66fa805eebfd4a13d32bd74d4012ff3fbc + languageName: node + linkType: hard + "@smithy/util-defaults-mode-node@npm:^3.0.23": version: 3.0.23 resolution: "@smithy/util-defaults-mode-node@npm:3.0.23" @@ -2885,6 +3653,21 @@ __metadata: languageName: node linkType: hard +"@smithy/util-defaults-mode-node@npm:^4.0.0": + version: 4.0.1 + resolution: "@smithy/util-defaults-mode-node@npm:4.0.1" + dependencies: + "@smithy/config-resolver": ^4.0.1 + "@smithy/credential-provider-imds": ^4.0.1 + "@smithy/node-config-provider": ^4.0.1 + "@smithy/property-provider": ^4.0.1 + "@smithy/smithy-client": ^4.1.0 + "@smithy/types": ^4.1.0 + tslib: ^2.6.2 + checksum: c9cd234b5734e42eac206802a4bfc1cb7710439bcd17790acc6cd9117ccaecfdfe3502a145d9f2018c6d3a24919cd3838e9e7ca47628c8f0dba11386d73a1d04 + languageName: node + linkType: hard + "@smithy/util-endpoints@npm:^2.1.3": version: 2.1.3 resolution: "@smithy/util-endpoints@npm:2.1.3" @@ -2896,6 +3679,17 @@ __metadata: languageName: node linkType: hard +"@smithy/util-endpoints@npm:^3.0.0": + version: 3.0.1 + resolution: "@smithy/util-endpoints@npm:3.0.1" + dependencies: + "@smithy/node-config-provider": ^4.0.1 + "@smithy/types": ^4.1.0 + tslib: ^2.6.2 + checksum: 2d351e297353fb624ba564b46ecf324376bc8fe34529ab4551e1d640c3b0317613a620c28977819db2c2d240791ff354d1d996fda119c0c4885a11507fb86af6 + languageName: node + linkType: hard + "@smithy/util-hex-encoding@npm:^3.0.0": version: 3.0.0 resolution: "@smithy/util-hex-encoding@npm:3.0.0" @@ -2905,6 +3699,15 @@ __metadata: languageName: node linkType: hard +"@smithy/util-hex-encoding@npm:^4.0.0": + version: 4.0.0 + resolution: "@smithy/util-hex-encoding@npm:4.0.0" + dependencies: + tslib: ^2.6.2 + checksum: b932fa0e5cd2ba2598ad55ce46722bbbd15109809badaa3e4402fe4dd6f31f62b9fb49d2616e38d660363dc92a5898391f9c8f3b18507c36109e908400785e2a + languageName: node + linkType: hard + "@smithy/util-middleware@npm:^3.0.7": version: 3.0.7 resolution: "@smithy/util-middleware@npm:3.0.7" @@ -2915,6 +3718,16 @@ __metadata: languageName: node linkType: hard +"@smithy/util-middleware@npm:^4.0.0, @smithy/util-middleware@npm:^4.0.1": + version: 4.0.1 + resolution: "@smithy/util-middleware@npm:4.0.1" + dependencies: + "@smithy/types": ^4.1.0 + tslib: ^2.6.2 + checksum: 1402e0abd9bfeb0d8b0033ad1b572984df1469dccf9f562353ec0133691826cdd85aa180616267819f80d8bb56c57f5a3a2ae92033f52cd8249230a6e670343b + languageName: node + linkType: hard + "@smithy/util-retry@npm:^3.0.7": version: 3.0.7 resolution: "@smithy/util-retry@npm:3.0.7" @@ -2926,6 +3739,17 @@ __metadata: languageName: node linkType: hard +"@smithy/util-retry@npm:^4.0.0, @smithy/util-retry@npm:^4.0.1": + version: 4.0.1 + resolution: "@smithy/util-retry@npm:4.0.1" + dependencies: + "@smithy/service-error-classification": ^4.0.1 + "@smithy/types": ^4.1.0 + tslib: ^2.6.2 + checksum: 29f8afd444f4b692ebd8cb2d0f6045ac0d5ca3834c0b6bbfdf1f6c1faec17c7bdc9734413ba93c55a672d373900aaf08e3c9f2023b3ec9b60c057afb8bcb4966 + languageName: node + linkType: hard + "@smithy/util-stream@npm:^3.1.9": version: 3.1.9 resolution: "@smithy/util-stream@npm:3.1.9" @@ -2942,6 +3766,22 @@ __metadata: languageName: node linkType: hard +"@smithy/util-stream@npm:^4.0.0, @smithy/util-stream@npm:^4.0.1": + version: 4.0.1 + resolution: "@smithy/util-stream@npm:4.0.1" + dependencies: + "@smithy/fetch-http-handler": ^5.0.1 + "@smithy/node-http-handler": ^4.0.1 + "@smithy/types": ^4.1.0 + "@smithy/util-base64": ^4.0.0 + "@smithy/util-buffer-from": ^4.0.0 + "@smithy/util-hex-encoding": ^4.0.0 + "@smithy/util-utf8": ^4.0.0 + tslib: ^2.6.2 + checksum: 53a783d197b6711fca0a13f9a9d2979c6b82fcb83cbcb1e6689693197a71ffacece7867270c91417e2731d0435b6aa89a1ecf4ca9ae55439230a5012026b361f + languageName: node + linkType: hard + "@smithy/util-uri-escape@npm:^3.0.0": version: 3.0.0 resolution: "@smithy/util-uri-escape@npm:3.0.0" @@ -2951,6 +3791,15 @@ __metadata: languageName: node linkType: hard +"@smithy/util-uri-escape@npm:^4.0.0": + version: 4.0.0 + resolution: "@smithy/util-uri-escape@npm:4.0.0" + dependencies: + tslib: ^2.6.2 + checksum: 7ea350545971f8a009d56e085c34c949c9045862cfab233ee7adc16e111a076a814bb5d9279b2b85ee382e0ed204a1c673ac32e3e28f1073b62a2c53a5dd6d19 + languageName: node + linkType: hard + "@smithy/util-utf8@npm:^2.0.0": version: 2.3.0 resolution: "@smithy/util-utf8@npm:2.3.0" @@ -2971,6 +3820,16 @@ __metadata: languageName: node linkType: hard +"@smithy/util-utf8@npm:^4.0.0": + version: 4.0.0 + resolution: "@smithy/util-utf8@npm:4.0.0" + dependencies: + "@smithy/util-buffer-from": ^4.0.0 + tslib: ^2.6.2 + checksum: 08811c5a18c341782b3b65acc4640a9f559aeba61c889dbdc56e5153a3b7f395e613bfb1ade25cf15311d6237f291e1fce8af197c6313065e0cb084fd2148c64 + languageName: node + linkType: hard + "@smithy/util-waiter@npm:^3.1.6": version: 3.1.6 resolution: "@smithy/util-waiter@npm:3.1.6" @@ -3824,21 +4683,12 @@ __metadata: languageName: node linkType: hard -"@types/node@npm:*, @types/node@npm:>=13.7.0, @types/node@npm:^20.1.1": - version: 20.16.11 - resolution: "@types/node@npm:20.16.11" +"@types/node@npm:*, @types/node@npm:>=13.7.0, @types/node@npm:^22.0.1, @types/node@npm:^22.10.5": + version: 22.10.5 + resolution: "@types/node@npm:22.10.5" dependencies: - undici-types: ~6.19.2 - checksum: 68a239e4cff66972c990a89faa052da27d17d9f8d3ee324e9e5899323feaf229b475c1969ae9e189d0c499736fc04e9f20f480613d16b93ce249518dc32707a0 - languageName: node - linkType: hard - -"@types/node@npm:^22.0.1": - version: 22.7.5 - resolution: "@types/node@npm:22.7.5" - dependencies: - undici-types: ~6.19.2 - checksum: 1a8bbb504efaffcef7b8491074a428e5c0b5425b0c0ffb13e7262cb8462c275e8cc5eaf90a38d8fbf52a1eeda7c01ab3b940673c43fc2414140779c973e40ec6 + undici-types: ~6.20.0 + checksum: 3b0e966df4e130edac3ad034f1cddbe134e70f11556062468c9fbd749a3b07a44445a3a75a7eec68a104930bf05d4899f1a418c4ae48493d2c8c1544d8594bcc languageName: node linkType: hard @@ -3958,10 +4808,10 @@ __metadata: languageName: node linkType: hard -"abbrev@npm:^2.0.0": - version: 2.0.0 - resolution: "abbrev@npm:2.0.0" - checksum: 0e994ad2aa6575f94670d8a2149afe94465de9cedaaaac364e7fb43a40c3691c980ff74899f682f4ca58fa96b4cbd7421a015d3a6defe43a442117d7821a2f36 +"abbrev@npm:^3.0.0": + version: 3.0.0 + resolution: "abbrev@npm:3.0.0" + checksum: 2500075b5ef85e97c095ab6ab2ea640dcf90bb388f46398f4d347b296f53399f984ec9462c74bee81df6bba56ef5fd9dbc2fb29076b1feb0023e0f52d43eb984 languageName: node linkType: hard @@ -4301,14 +5151,14 @@ __metadata: languageName: node linkType: hard -"axios@npm:^1.7.4, axios@npm:^1.7.7": - version: 1.7.7 - resolution: "axios@npm:1.7.7" +"axios@npm:^1.7.4, axios@npm:^1.7.9": + version: 1.7.9 + resolution: "axios@npm:1.7.9" dependencies: follow-redirects: ^1.15.6 form-data: ^4.0.0 proxy-from-env: ^1.1.0 - checksum: 882d4fe0ec694a07c7f5c1f68205eb6dc5a62aecdb632cc7a4a3d0985188ce3030e0b277e1a8260ac3f194d314ae342117660a151fabffdc5081ca0b5a8b47fe + checksum: cb8ce291818effda09240cb60f114d5625909b345e10f389a945320e06acf0bc949d0f8422d25720f5dd421362abee302c99f5e97edec4c156c8939814b23d19 languageName: node linkType: hard @@ -5115,7 +5965,7 @@ __metadata: languageName: node linkType: hard -"debug@npm:4, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.1, debug@npm:^4.3.3, debug@npm:^4.3.4": +"debug@npm:4, debug@npm:^4, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.1, debug@npm:^4.3.3, debug@npm:^4.3.4": version: 4.3.7 resolution: "debug@npm:4.3.7" dependencies: @@ -5127,15 +5977,6 @@ __metadata: languageName: node linkType: hard -"debug@npm:^3.2.7": - version: 3.2.7 - resolution: "debug@npm:3.2.7" - dependencies: - ms: ^2.1.1 - checksum: b3d8c5940799914d30314b7c3304a43305fd0715581a919dacb8b3176d024a782062368405b47491516d2091d6462d4d11f2f4974a405048094f8bfebfa3071c - languageName: node - linkType: hard - "dedent@npm:^1.0.0": version: 1.5.3 resolution: "dedent@npm:1.5.3" @@ -7668,7 +8509,7 @@ __metadata: dependencies: "@apidevtools/swagger-parser": ^10.1.0 "@aws-sdk/client-appconfig": ^3.533.0 - "@aws-sdk/client-appconfigdata": ^3.533.0 + "@aws-sdk/client-appconfigdata": ^3.726.1 "@aws-sdk/client-athena": ^3.333.0 "@aws-sdk/client-dynamodb": ^3.332.0 "@aws-sdk/client-lambda": ^3.332.0 @@ -7683,10 +8524,10 @@ __metadata: "@types/jsonpath": ^0.2.0 "@types/lodash": ^4.14.190 "@types/morgan": ^1.9.3 - "@types/node": ^20.1.1 + "@types/node": ^22.10.5 "@types/node-fetch": ^2.6.2 ali-oss: ^6.20.0 - axios: ^1.7.7 + axios: ^1.7.9 base64-arraybuffer: ^1.0.2 bluebird: ^3.7.2 commander: ^10.0.0 @@ -7709,7 +8550,7 @@ __metadata: nock: ^13.3.0 node-fetch: 2 node-firebird: ^1.1.9 - nodemon: ^2.0.22 + nodemon: ^3.1.9 openapi-types: ^12.1.3 pino: ^9.5.0 postman-to-openapi: ^3.0.1 @@ -8430,23 +9271,23 @@ __metadata: languageName: node linkType: hard -"nodemon@npm:^2.0.22": - version: 2.0.22 - resolution: "nodemon@npm:2.0.22" +"nodemon@npm:^3.1.9": + version: 3.1.9 + resolution: "nodemon@npm:3.1.9" dependencies: chokidar: ^3.5.2 - debug: ^3.2.7 + debug: ^4 ignore-by-default: ^1.0.1 minimatch: ^3.1.2 pstree.remy: ^1.1.8 - semver: ^5.7.1 - simple-update-notifier: ^1.0.7 + semver: ^7.5.3 + simple-update-notifier: ^2.0.0 supports-color: ^5.5.0 touch: ^3.1.0 undefsafe: ^2.0.5 bin: nodemon: bin/nodemon.js - checksum: 9c987e139748f5b5c480c6c9080bdc97304ee7d29172b7b3da1a7db590b1323ad57b96346304e9b522b0e445c336dc393ccd3f9f45c73b20d476d2347890dcd0 + checksum: d045065dea08904f1356d18132538e71a61df12cb4e2852730310492943676d4789bedb28c343a5d85d5e07558bf47b73f000a8017409f0b7d522a3c1c42b2e5 languageName: node linkType: hard @@ -8483,13 +9324,13 @@ __metadata: linkType: hard "nopt@npm:^8.0.0": - version: 8.0.0 - resolution: "nopt@npm:8.0.0" + version: 8.1.0 + resolution: "nopt@npm:8.1.0" dependencies: - abbrev: ^2.0.0 + abbrev: ^3.0.0 bin: nopt: bin/nopt.js - checksum: 2cfc65e7ee38af2e04aea98f054753b0230011c0eeca4ecf131bd7d25984cbbf6f214586e0ae5dfcc2e830bc0bffa5a7fb28ea8d0b306ffd4ae8ea2d814c1ab3 + checksum: 49cfd3eb6f565e292bf61f2ff1373a457238804d5a5a63a8d786c923007498cba89f3648e3b952bc10203e3e7285752abf5b14eaf012edb821e84f24e881a92a languageName: node linkType: hard @@ -9416,7 +10257,7 @@ __metadata: languageName: node linkType: hard -"semver@npm:^5.0.1, semver@npm:^5.7.1": +"semver@npm:^5.0.1": version: 5.7.2 resolution: "semver@npm:5.7.2" bin: @@ -9443,15 +10284,6 @@ __metadata: languageName: node linkType: hard -"semver@npm:~7.0.0": - version: 7.0.0 - resolution: "semver@npm:7.0.0" - bin: - semver: bin/semver.js - checksum: 272c11bf8d083274ef79fe40a81c55c184dff84dd58e3c325299d0927ba48cece1f020793d138382b85f89bab5002a35a5ba59a3a68a7eebbb597eb733838778 - languageName: node - linkType: hard - "send@npm:0.19.0": version: 0.19.0 resolution: "send@npm:0.19.0" @@ -9565,12 +10397,12 @@ __metadata: languageName: node linkType: hard -"simple-update-notifier@npm:^1.0.7": - version: 1.1.0 - resolution: "simple-update-notifier@npm:1.1.0" +"simple-update-notifier@npm:^2.0.0": + version: 2.0.0 + resolution: "simple-update-notifier@npm:2.0.0" dependencies: - semver: ~7.0.0 - checksum: 1012e9b6c504e559a948078177b3eedbb9d7e4d15878e2bda56314d08db609ca5da485be4ac9f838759faae8057935ee0246fcdf63f1233c86bd9fecb2a5544b + semver: ^7.5.3 + checksum: 9ba00d38ce6a29682f64a46213834e4eb01634c2f52c813a9a7b8873ca49cdbb703696f3290f3b27dc067de6d9418b0b84bef22c3eb074acf352529b2d6c27fd languageName: node linkType: hard @@ -10342,10 +11174,10 @@ __metadata: languageName: node linkType: hard -"undici-types@npm:~6.19.2": - version: 6.19.8 - resolution: "undici-types@npm:6.19.8" - checksum: de51f1b447d22571cf155dfe14ff6d12c5bdaec237c765085b439c38ca8518fc360e88c70f99469162bf2e14188a7b0bcb06e1ed2dc031042b984b0bb9544017 +"undici-types@npm:~6.20.0": + version: 6.20.0 + resolution: "undici-types@npm:6.20.0" + checksum: b7bc50f012dc6afbcce56c9fd62d7e86b20a62ff21f12b7b5cbf1973b9578d90f22a9c7fe50e638e96905d33893bf2f9f16d98929c4673c2480de05c6c96ea8b languageName: node linkType: hard