Content-Length: 38479 | pFad | http://github.com/lowcoder-org/lowcoder/pull/1656.diff

thub.com diff --git a/client/packages/lowcoder-comps/src/comps/barChartComp/barChartComp.tsx b/client/packages/lowcoder-comps/src/comps/barChartComp/barChartComp.tsx index e138185865..d915dc534c 100644 --- a/client/packages/lowcoder-comps/src/comps/barChartComp/barChartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/barChartComp/barChartComp.tsx @@ -304,17 +304,17 @@ let BarChartComp = withExposingConfigs(BarChartTmpComp, [ export const BarChartCompWithDefault = withDefault(BarChartComp, { - xAxisKey: "date", + xAxisKey: "month", series: [ { dataIndex: genRandomKey(), - seriesName: trans("chart.spending"), - columnName: "spending", + seriesName: "Sales", + columnName: "sales", }, { dataIndex: genRandomKey(), - seriesName: trans("chart.budget"), - columnName: "budget", + seriesName: "Target", + columnName: "target", }, ], }); diff --git a/client/packages/lowcoder-comps/src/comps/barChartComp/barChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/barChartComp/barChartConstants.tsx index 668b569be3..98c4191844 100644 --- a/client/packages/lowcoder-comps/src/comps/barChartComp/barChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/barChartComp/barChartConstants.tsx @@ -37,6 +37,40 @@ import { FunnelChartConfig } from "../basicChartComp/chartConfigs/funnelChartCon import {EchartsTitleVerticalConfig} from "../chartComp/chartConfigs/echartsTitleVerticalConfig"; import {EchartsTitleConfig} from "../basicChartComp/chartConfigs/echartsTitleConfig"; +// Enhanced default data for bar charts +export const barChartDefaultData = [ + { + month: "Jan", + sales: 1200, + target: 1000 + }, + { + month: "Feb", + sales: 1500, + target: 1200 + }, + { + month: "Mar", + sales: 1300, + target: 1400 + }, + { + month: "Apr", + sales: 1800, + target: 1500 + }, + { + month: "May", + sales: 1600, + target: 1700 + }, + { + month: "Jun", + sales: 2100, + target: 1900 + } +]; + export const ChartTypeOptions = [ { label: trans("chart.bar"), @@ -241,9 +275,9 @@ const EchartsOptionComp = withType(EchartsOptionMap, "funnel"); export type CharOptionCompType = keyof typeof ChartOptionMap; export const chartUiModeChildren = { - title: withDefault(StringControl, trans("echarts.defaultTitle")), - data: jsonControl(toJSONObjectArray, i18nObjs.defaultDataSource), - xAxisKey: valueComp(""), // x-axis, key from data + title: withDefault(StringControl, trans("barChart.defaultTitle")), + data: jsonControl(toJSONObjectArray, barChartDefaultData), + xAxisKey: valueComp("month"), // x-axis, key from data xAxisDirection: dropdownControl(XAxisDirectionOptions, "horizontal"), xAxisData: jsonControl(toArray, []), series: SeriesListComp, diff --git a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConfigs/barChartConfig.tsx b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConfigs/barChartConfig.tsx index ee11883352..dd7a369934 100644 --- a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConfigs/barChartConfig.tsx +++ b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConfigs/barChartConfig.tsx @@ -33,10 +33,10 @@ const BarTypeOptions = [ export const BarChartConfig = (function () { return new MultiCompBuilder( { - showLabel: BoolControl, + showLabel: withDefault(BoolControl, true), type: dropdownControl(BarTypeOptions, "basicBar"), - barWidth: withDefault(NumberControl, i18nObjs.defaultBarChartOption.barWidth), - showBackground: BoolControl, + barWidth: withDefault(NumberControl, 40), + showBackground: withDefault(BoolControl, false), backgroundColor: withDefault(ColorControl, i18nObjs.defaultBarChartOption.barBg), radiusAxisMax: NumberControl, polarRadiusStart: withDefault(StringControl, '30'), diff --git a/client/packages/lowcoder-comps/src/comps/line3dChartComp/line3dChartUtils.ts b/client/packages/lowcoder-comps/src/comps/line3dChartComp/line3dChartUtils.ts index d1be05edf3..3ba5858a18 100644 --- a/client/packages/lowcoder-comps/src/comps/line3dChartComp/line3dChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/line3dChartComp/line3dChartUtils.ts @@ -178,7 +178,6 @@ export function getEchartsConfig( }, } }; - console.log(config); return config; } diff --git a/client/packages/lowcoder-comps/src/comps/lineChartComp/lineChartComp.tsx b/client/packages/lowcoder-comps/src/comps/lineChartComp/lineChartComp.tsx index be3e5bf655..1f1dfa150a 100644 --- a/client/packages/lowcoder-comps/src/comps/lineChartComp/lineChartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/lineChartComp/lineChartComp.tsx @@ -302,13 +302,13 @@ export const LineChartCompWithDefault = withDefault(LineChartComp, { series: [ { dataIndex: genRandomKey(), - seriesName: trans("chart.spending"), - columnName: "spending", + seriesName: "Sales", + columnName: "sales", }, { dataIndex: genRandomKey(), - seriesName: trans("chart.budget"), - columnName: "budget", + seriesName: "Growth", + columnName: "growth", }, ], }); diff --git a/client/packages/lowcoder-comps/src/comps/lineChartComp/lineChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/lineChartComp/lineChartConstants.tsx index 2685f19725..5b0554ddad 100644 --- a/client/packages/lowcoder-comps/src/comps/lineChartComp/lineChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/lineChartComp/lineChartConstants.tsx @@ -83,11 +83,19 @@ export const XAxisDirectionOptions = [ export type XAxisDirectionType = ValueFromOption; +export const defaultChartData = [ + { date: "Jan", sales: 320, growth: 250 }, + { date: "Feb", sales: 450, growth: 300 }, + { date: "Mar", sales: 380, growth: 340 }, + { date: "Apr", sales: 520, growth: 400 }, + { date: "May", sales: 480, growth: 450 }, + { date: "Jun", sales: 600, growth: 500 } +]; export const noDataAxisConfig = { animation: false, xAxis: { type: "category", - name: trans("chart.noData"), + name: "No Data Available", nameLocation: "middle", data: [], axisLine: { @@ -243,8 +251,8 @@ const EchartsOptionComp = withType(EchartsOptionMap, "funnel"); export type CharOptionCompType = keyof typeof ChartOptionMap; export const chartUiModeChildren = { - title: withDefault(StringControl, trans("echarts.defaultTitle")), - data: jsonControl(toJSONObjectArray, i18nObjs.defaultDataSource), + title: withDefault(StringControl, trans("lineChart.defaultTitle")), + data: jsonControl(toJSONObjectArray, defaultChartData), xAxisKey: valueComp(""), // x-axis, key from data xAxisDirection: dropdownControl(XAxisDirectionOptions, "horizontal"), xAxisData: jsonControl(toArray, []), diff --git a/client/packages/lowcoder-comps/src/comps/mermaidComp/index.tsx b/client/packages/lowcoder-comps/src/comps/mermaidComp/index.tsx index 09ea5cba84..ea143725c4 100644 --- a/client/packages/lowcoder-comps/src/comps/mermaidComp/index.tsx +++ b/client/packages/lowcoder-comps/src/comps/mermaidComp/index.tsx @@ -10,11 +10,98 @@ import { import Mermaid from "./mermaid"; +// Collection of example mermaid diagrams that showcase different diagram types +const mermaidExamples = { + flowchart: +`flowchart TD + A[Start] --> B{Is it working?} + B -->|Yes| C[Great!] + B -->|No| D[Debug] + D --> E[Check Documentation] + E --> B + C --> F[Deploy]`, + + sequence: +`sequenceDiagram + participant User + participant App + participant API + participant DB + + User->>App: Submit Form + App->>API: Send Request + API->>DB: Query Data + DB->>API: Return Result + API->>App: Send Response + App->>User: Show Result`, + + classDiagram: +`classDiagram + class User { + +String name + +String email + +authenticate() + +updateProfile() + } + class Product { + +String name + +Number price + +getDetails() + } + class Order { + +Date date + +Number total + +process() + } + User "1" --> "*" Order + Order "*" --> "*" Product`, + + gantt: +`gantt + title Project Timeline + dateFormat YYYY-MM-DD + + section Planning + Research :done, a1, 2023-01-01, 10d + Requirements :active, a2, after a1, 7d + + section Development + Design :a3, after a2, 8d + Implementation :a4, after a3, 14d + Testing :a5, after a4, 7d + + section Deployment + Release :milestone, after a5, 0d`, + + entityRelationship: +`erDiagram + CUSTOMER }|--o{ ORDER : places + ORDER ||--|{ ORDER_ITEM : contains + CUSTOMER ||--o{ PAYMENT : makes + PRODUCT ||--|{ ORDER_ITEM : "ordered in"`, + + journey: +`journey + title User Purchase Journey + section Visit Website + Homepage: 5: User + Product listing: 4: User + Product detail: 3: User + section Purchase + Add to cart: 4: User + Checkout: 3: User, Admin + Payment: 3: User, Admin + section Post-Purchase + Order confirmation: 5: User, Admin + Shipping: 4: Admin + Delivery: 5: User, Admin` +}; + +// Using the flowchart example as default const childrenMap = { code: stringExposingStateControl( "code", - `graph LR - Start --> Stop` + mermaidExamples.flowchart ), onEvent: eventHandlerControl([ { diff --git a/client/packages/lowcoder-comps/src/comps/parallelChartComp/parallelChartUtils.ts b/client/packages/lowcoder-comps/src/comps/parallelChartComp/parallelChartUtils.ts index 407a2df69e..0f7835bb08 100644 --- a/client/packages/lowcoder-comps/src/comps/parallelChartComp/parallelChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/parallelChartComp/parallelChartUtils.ts @@ -180,7 +180,6 @@ export function getEchartsConfig( parallelAxis: props.data[0].map((c, i) => ({ dim: i, name: c, type: typeof props.data[1][i] === 'string'?'category':'value'})) }; - console.log("Echarts transformedData and config", transformedData, config); return config; } diff --git a/client/packages/lowcoder-comps/src/comps/pieChartComp/pieChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/pieChartComp/pieChartConstants.tsx index 62e5be9712..f8212e74c6 100644 --- a/client/packages/lowcoder-comps/src/comps/pieChartComp/pieChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/pieChartComp/pieChartConstants.tsx @@ -82,6 +82,41 @@ export const XAxisDirectionOptions = [ export type XAxisDirectionType = ValueFromOption; +// Add this new code block: +// Realistic pie chart demo data with proper categories and values +export const defaultPieChartData = [ + { + category: "Market Share", + name: "Samsung", + value: 21.8 + }, + { + category: "Market Share", + name: "Apple", + value: 20.5 + }, + { + category: "Market Share", + name: "Xiaomi", + value: 13.4 + }, + { + category: "Market Share", + name: "Oppo", + value: 8.8 + }, + { + category: "Market Share", + name: "Vivo", + value: 8.1 + }, + { + category: "Market Share", + name: "Others", + value: 27.4 + } +]; + export const noDataAxisConfig = { animation: false, xAxis: { @@ -241,8 +276,8 @@ export type CharOptionCompType = keyof typeof ChartOptionMap; export const chartUiModeChildren = { title: withDefault(StringControl, trans("echarts.defaultTitle")), - data: jsonControl(toJSONObjectArray, i18nObjs.defaultDataSource), - xAxisKey: valueComp(""), // x-axis, key from data + data: jsonControl(toJSONObjectArray, defaultPieChartData), + xAxisKey: valueComp("name"), xAxisDirection: dropdownControl(XAxisDirectionOptions, "horizontal"), xAxisData: jsonControl(toArray, []), series: SeriesListComp, diff --git a/client/packages/lowcoder-comps/src/comps/pieChartComp/pieChartUtils.ts b/client/packages/lowcoder-comps/src/comps/pieChartComp/pieChartUtils.ts index cf3b6a664f..5453933397 100644 --- a/client/packages/lowcoder-comps/src/comps/pieChartComp/pieChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/pieChartComp/pieChartUtils.ts @@ -280,7 +280,6 @@ export function getEchartsConfig( ] } - console.log("Echarts transformedData and config", transformedData, config); return config; } diff --git a/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartUtils.ts b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartUtils.ts index 1982cf9b47..87cecc24c5 100644 --- a/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartUtils.ts @@ -177,7 +177,6 @@ export function getEchartsConfig( radius: `${props.radius}%`, shape: props?.areaFlag ? 'circle' : 'line', axisName: { - ...styleWrapper(props?.detailStyle, theme?.detailStyle, 13), show: props?.indicatorVisibility, }, splitArea: { diff --git a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartConstants.tsx index e863c1b209..e38b5a1319 100644 --- a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartConstants.tsx @@ -277,6 +277,7 @@ let chartJsonModeChildren: any = { focus: withDefault(BoolControl, true), tooltip: withDefault(BoolControl, true), legendVisibility: withDefault(BoolControl, true), + labelVisibility: withDefault(BoolControl, true), } if (EchartDefaultChartStyle && EchartDefaultTextStyle && RadarLabelStyle && SankeyLineStyle) { diff --git a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartPropertyView.tsx index 683f97c3ff..3962175314 100644 --- a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartPropertyView.tsx @@ -36,6 +36,10 @@ export function sankeyChartPropertyView( {children.draggable.propertyView({label: trans("sankeyChart.draggable"), tooltip: trans("sankeyChart.draggableTooltip")})} {children.focus.propertyView({label: trans("sankeyChart.focus"), tooltip: trans("sankeyChart.focusTooltip")})} {children.tooltip.propertyView({label: trans("sankeyChart.tooltip"), tooltip: trans("echarts.tooltipTooltip")})} + {children.labelVisibility.propertyView({ + label: trans("treeChart.labelVisibility"), + tooltip: trans("echarts.labelVisibilityTooltip") + })}
diff --git a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartUtils.ts b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartUtils.ts index 1cedb74c88..69ac87ee3b 100644 --- a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartUtils.ts @@ -162,9 +162,8 @@ export function getEchartsConfig( bottom: `${props?.bottom}%`, top: `${props?.top}%`, label: { - show: true, + show: props.labelVisibility, position: props.echartsLabelConfig.top, - ...styleWrapper(props?.detailStyle, theme?.detailStyle,15) }, data: props?.echartsData.length !== 0 && props?.echartsData?.map(item => ({ name: item.name, diff --git a/client/packages/lowcoder-comps/src/comps/scatterChartComp/scatterChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/scatterChartComp/scatterChartConstants.tsx index 02c8f803ff..c846eeaab2 100644 --- a/client/packages/lowcoder-comps/src/comps/scatterChartComp/scatterChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/scatterChartComp/scatterChartConstants.tsx @@ -217,9 +217,34 @@ const ChartOptionComp = withType(ChartOptionMap, "scatter"); const EchartsOptionComp = withType(EchartsOptionMap, "funnel"); export type CharOptionCompType = keyof typeof ChartOptionMap; +export const SCATTER_CHART_DEMO_DATA = [ + + { hours: 1.5, score: 62, student: "Alex M." }, + { hours: 2.0, score: 65, student: "Sarah P." }, + { hours: 2.5, score: 71, student: "James W." }, + { hours: 2.8, score: 69, student: "Emma L." }, + { hours: 3.0, score: 75, student: "Michael R." }, + { hours: 3.2, score: 73, student: "Lisa K." }, + { hours: 3.5, score: 78, student: "David H." }, + { hours: 3.8, score: 77, student: "Sophie T." }, + { hours: 4.0, score: 82, student: "Ryan B." }, + { hours: 4.2, score: 84, student: "Nina C." }, + { hours: 4.5, score: 86, student: "Thomas G." }, + { hours: 4.8, score: 88, student: "Maria S." }, + { hours: 5.0, score: 89, student: "Daniel F." }, + { hours: 5.2, score: 91, student: "Anna D." }, + { hours: 5.5, score: 90, student: "Kevin P." }, + { hours: 5.8, score: 93, student: "Rachel M." }, + { hours: 6.0, score: 95, student: "John L." }, + { hours: 6.2, score: 94, student: "Emily W." }, + { hours: 3.0, score: 68, student: "Chris B." }, // outlier - lower performance + { hours: 5.0, score: 96, student: "Jessica H." } // outlier - higher performance + +] + export const chartUiModeChildren = { title: withDefault(StringControl, trans("echarts.defaultTitle")), - data: jsonControl(toJSONObjectArray, i18nObjs.defaultDataSource), + data: jsonControl(toJSONObjectArray, SCATTER_CHART_DEMO_DATA), xAxisKey: valueComp(""), // x-axis, key from data xAxisDirection: dropdownControl(XAxisDirectionOptions, "horizontal"), xAxisData: jsonControl(toArray, []), diff --git a/client/packages/lowcoder-comps/src/comps/scatterChartComp/scatterChartUtils.ts b/client/packages/lowcoder-comps/src/comps/scatterChartComp/scatterChartUtils.ts index 67b2a4a537..f5e9bdd4be 100644 --- a/client/packages/lowcoder-comps/src/comps/scatterChartComp/scatterChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/scatterChartComp/scatterChartUtils.ts @@ -293,7 +293,6 @@ export function getEchartsConfig( delete config.yAxis; } - console.log("Echarts transformedData and config", transformedData, config); return config; } diff --git a/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartUtils.ts b/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartUtils.ts index ab8aa17b5f..52ca2aa4c8 100644 --- a/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartUtils.ts @@ -168,7 +168,6 @@ export function getEchartsConfig( label: { show: props?.labelVisibility, rotate: 'tangential', - ...styleWrapper(props?.detailStyle, theme?.detailStyle,11) }, } ], diff --git a/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartConstants.tsx index df9b573fca..7484f7ecf4 100644 --- a/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartConstants.tsx @@ -273,6 +273,7 @@ let chartJsonModeChildren: any = { edgeShape: withDefault(BoolControl, true), tooltip: withDefault(BoolControl, true), legendVisibility: withDefault(BoolControl, true), + labelVisibility: withDefault(BoolControl, true), } if (RadarLabelStyle && EchartDefaultChartStyle && EchartDefaultTextStyle) { diff --git a/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartPropertyView.tsx index 56d8510288..f4cc5ca43d 100644 --- a/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartPropertyView.tsx @@ -29,6 +29,10 @@ export function treeChartPropertyView( {children.lineWidth.propertyView({ label: trans("treeChart.lineWidth"), tooltip: trans("treeChart.lineWidthTooltip") })} {children.tooltip.propertyView({label: trans("treeChart.tooltip")})} + {children.labelVisibility.propertyView({ + label: trans("treeChart.labelVisibility"), + tooltip: trans("echarts.labelVisibilityTooltip") + })}
diff --git a/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartUtils.ts b/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartUtils.ts index 083b181036..d6f545b063 100644 --- a/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartUtils.ts @@ -163,14 +163,15 @@ export function getEchartsConfig( symbolSize: props?.pointSize || 20, // Control the size of the nodes data: props?.echartsData.length !== 0 && props?.echartsData || props.echartsOption.data, label: { + show: props?.labelVisibility, position: "top", verticalAlign: "middle", align: "right", - ...styleWrapper(props?.detailStyle, theme?.detailStyle, 11), }, leaves: { label: { - position: "bottom", + show: props?.labelVisibility, + position: "right", verticalAlign: "middle", align: "left" } diff --git a/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartUtils.ts b/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartUtils.ts index f07d918528..02d63c8539 100644 --- a/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartUtils.ts @@ -171,7 +171,7 @@ export function getEchartsConfig( ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle) }, label: { - ...styleWrapper(props?.detailStyle, theme?.detailStyle, 12), + show: props?.labelVisibility, } } ] 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 73c3d7d216..66b62f7a18 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts @@ -63,9 +63,9 @@ export const en = { title: 'Title', defaultTitle: 'Tree Chart', tooltip: 'Tooltip', - defaultLeft: "10", + defaultLeft: "20", left: "Left", - defaultRight: "10", + defaultRight: "20", right: "Right", defaultTop: "20", top: "Top", @@ -76,7 +76,9 @@ export const en = { pointSizeTooltip: "Set the Point Size of the Chart.", defaultlineWidth: '2', lineWidth: "Line Width", - lineWidthTooltip: "Set the Line Width of the Chart." + lineWidthTooltip: "Set the Line Width of the Chart.", + labelVisibility: "Label", + labelVisibilityTooltip: "Show or hide the Label of the Chart." }, graphChart: { categories: 'Categories', @@ -214,6 +216,8 @@ export const en = { defaultTop:'15', bottom: 'Bottom', defaultBottom:'10', + labelVisibility: "Label", + labelVisibilityTooltip: "Show or hide the Label of the Chart." }, funnelChart: { title: 'Title', @@ -317,6 +321,8 @@ export const en = { }, lineChart: { + title: 'Title', + defaultTitle: 'Line Chart', cellSize: "Cell Size", range: "Range", markLines: "Mark Lines", 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 b9d17e3c2a..df8517fbcc 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx @@ -309,57 +309,70 @@ export const enObj: I18nObjects = { }, defaultSankeyChartOption: { data: [ - {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'} + {name: "Website Visits", color: '#3498db'}, + {name: "Product Page", color: '#2ecc71'}, + {name: "Cart", color: '#f39c12'}, + {name: "Checkout", color: '#e74c3c'}, + {name: "Purchase", color: '#9b59b6'}, + {name: "Abandoned", color: '#95a5a6'} ], links: [ - { 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 } + { source: 'Website Visits', target: 'Product Page', value: 1000 }, + { source: 'Website Visits', target: 'Abandoned', value: 300 }, + { source: 'Product Page', target: 'Cart', value: 700 }, + { source: 'Product Page', target: 'Abandoned', value: 300 }, + { source: 'Cart', target: 'Checkout', value: 400 }, + { source: 'Cart', target: 'Abandoned', value: 300 }, + { source: 'Checkout', target: 'Purchase', value: 350 }, + { source: 'Checkout', target: 'Abandoned', value: 50 } ] }, defaultCandleStickChartOption: { xAxis: { - data: ["Day 1", "Day 2", "Day 3", "Day 4", "Day 5"], - }, - axisColor: ['#f0f0f0', '#ffffff'], - data:[ - [22, 25, 18, 26], - [25, 23, 22, 27], - [23, 24, 21, 25], - [24, 26, 23, 27], - [23, 21, 20, 25] + data: [ + "2024-03-01", "2024-03-04", "2024-03-05", "2024-03-06", "2024-03-07", + "2024-03-08", "2024-03-11", "2024-03-12", "2024-03-13", "2024-03-14" ], + }, + axisColor: ['#E9EBF1', '#ffffff'], + data: [ + // Format: [open, close, lowest, highest] + [185.43, 188.52, 184.74, 189.12], // Bullish day + [188.32, 186.85, 186.21, 189.95], // Bearish day + [186.90, 187.65, 185.83, 188.12], // Small bullish day + [187.75, 185.20, 184.90, 187.85], // Bearish day + [185.35, 189.20, 185.15, 189.45], // Strong bullish day + [189.10, 187.50, 186.80, 189.30], // Bearish day + [187.60, 190.25, 187.40, 190.50], // Strong bullish day + [190.15, 189.75, 188.90, 191.20], // Small bearish day + [189.80, 192.35, 189.60, 192.50], // Strong bullish day + [192.40, 191.85, 191.20, 193.15] // Small bearish day + ], itemStyle: { - color: '#ec0000', // Body color (rising) - color0: '#00da3c', // Body color (falling) - borderColor: '#ec0000', // Border color (rising) - borderColor0: '#00da3c', // Border color (falling) + color: '#26A69A', // Bullish candle color (green) + color0: '#EF5350', // Bearish candle color (red) + borderColor: '#26A69A', // Bullish border color + borderColor0: '#EF5350' // Bearish border color } }, 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 6", max: 100 } + { name: "Performance", max: 100 }, + { name: "Reliability", max: 100 }, + { name: "Efficiency", max: 100 }, + { name: "User Satisfaction", max: 100 }, + { name: "Cost Effectiveness", max: 100 }, + { name: "Scalability", max: 100 } ], series: [ { - "name": "Data A", - "value": [90, 80, 70, 70, 80, 70], + "name": "Current System", + "value": [85, 72, 78, 65, 82, 68], }, { - name: "Data B", - value: [60, 60, 40, 50, 50, 40], + name: "Competitor System", + value: [67, 82, 58, 73, 45, 79], areaColor: '#ff00ff77', lineColor: '#ff00ff77', lineWidth: 2, @@ -397,127 +410,205 @@ export const enObj: I18nObjects = { ] }, defaultGraphChartOption: { - color:{ - pointColor: "#0000ff", - lineColor: "#00000033" - }, - categories: [ - {name: "Nodes"}, - {name: "Edges"} - ], - nodes: [ - {name: "Node 1", category: 0}, - {name: "Node 2", category: 0}, - {name: "Node 3", category: 0} - ], - links: [ - {source: "Node 1", target: "Node 2", category: 1}, - {source: "Node 2", target: "Node 3", category: 1} - ] + color: { + pointColor: "#4285F4", + lineColor: "#00000045" + }, + categories: [ + {name: "Person", itemStyle: {color: "#4285F4"}}, + {name: "Company", itemStyle: {color: "#34A853"}}, + {name: "Project", itemStyle: {color: "#EA4335"}} + ], + nodes: [ + {id: "1", name: "John Smith", value: 25, category: 0, symbolSize: 25}, + {id: "2", name: "Jane Doe", value: 20, category: 0, symbolSize: 20}, + {id: "3", name: "Acme Inc", value: 30, category: 1, symbolSize: 30}, + {id: "4", name: "Project X", value: 25, category: 2, symbolSize: 25} + ], + links: [ + {source: "1", target: "3", value: 8, lineStyle: {width: 2}}, + {source: "1", target: "4", value: 6, lineStyle: {width: 2}}, + {source: "2", target: "3", value: 5, lineStyle: {width: 1}}, + {source: "3", target: "4", value: 9, lineStyle: {width: 3}} + ] }, defaultTreeChartOption: { data: [{ - name: "Parent", + name: "Company Structure", + children: [ + { + name: "Executive", + children: [ + { name: "CEO", value: 1 }, + { name: "CFO", value: 1 }, + { name: "COO", value: 1 } + ] + }, + { + name: "Product", + children: [ + { name: "Engineering", value: 25 }, + { name: "Design", value: 10 }, + { name: "Product Management", value: 8 } + ] + }, + { + name: "Marketing", + children: [ + { name: "Social Media", value: 5 }, + { name: "Content", value: 7 }, + { name: "Analytics", value: 3 } + ] + } + ] + }], + pointColor: "#3498db", + lineColor: "#95a5a6", + label: { + show: true, + position: "right", + distance: 5, + fontSize: 12, + color: "#333" + }, + emphasis: { + focus: "descendant" + }, + expandAndCollapse: true, + initialTreeDepth: 2, + layout: "orthogonal", + orient: "horizontal", + symbolSize: 10 + }, + defaultTreemapChartOption: { + data: [ + { + name: 'Company Budget', + value: 1000, children: [ { - name: "Child 1", + name: 'Product Development', + value: 400, + itemStyle: { color: '#3498db' }, children: [ - { name: "Child 1-1" }, - { name: "Child 1-2" } + { name: 'Engineering', value: 250, itemStyle: { color: '#3498db' } }, + { name: 'Design', value: 80, itemStyle: { color: '#5dade2' } }, + { name: 'Research', value: 70, itemStyle: { color: '#85c1e9' } } ] }, { - name: "Child 2", + name: 'Marketing', + value: 300, + itemStyle: { color: '#2ecc71' }, children: [ - { name: "Child 2-1" }, - { name: "Child 2-2" } + { name: 'Digital Advertising', value: 150, itemStyle: { color: '#2ecc71' } }, + { name: 'Content Creation', value: 80, itemStyle: { color: '#58d68d' } }, + { name: 'Events', value: 70, itemStyle: { color: '#80e5a8' } } + ] + }, + { + name: 'Operations', + value: 200, + itemStyle: { color: '#e74c3c' }, + children: [ + { name: 'Office Space', value: 100, itemStyle: { color: '#e74c3c' } }, + { name: 'Equipment', value: 50, itemStyle: { color: '#ec7063' } }, + { name: 'Utilities', value: 50, itemStyle: { color: '#f1948a' } } + ] + }, + { + name: 'HR', + value: 100, + itemStyle: { color: '#9b59b6' }, + children: [ + { name: 'Recruiting', value: 30, itemStyle: { color: '#9b59b6' } }, + { name: 'Training', value: 40, itemStyle: { color: '#af7ac5' } }, + { name: 'Benefits', value: 30, itemStyle: { color: '#c39bd3' } } ] } ] - }], - pointColor: "#380e81", - lineColor: "#1a93b8", + } + ], + label: { + show: true, + formatter: '{b}', + fontSize: 12, + color: '#333', + position: 'inside' + }, + itemStyle: { + borderColor: '#fff', + borderWidth: 1, + gapWidth: 1 + }, + breadcrumb: { + show: true + }, + roam: false }, - defaultTreemapChartOption: { + defaultSunburstChartOption: { data: [ { - name: 'Category A', - value: 100, + name: "Traffic", children: [ { - name: 'Subcategory A1', - value: 70, + name: "Direct", + value: 350, 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: "New", value: 200}, + {name: "Return", value: 150} ] - } - ] - }, - { - name: 'Category B', - value: 80, - children: [ + }, { - name: 'Subcategory B1', - value: 50, + name: "Social", + value: 300, children: [ - { name: 'Item B1-1', value: 20 }, - { name: 'Item B1-2', value: 15 }, - { name: 'Item B1-3', value: 15 } + {name: "FB", value: 120}, + {name: "IG", value: 100}, + {name: "TW", value: 80} ] }, + { + name: "Search", + value: 400, + children: [ + {name: "Google", value: 300}, + {name: "Bing", value: 100} + ] + } ] } ], - color: ['#5470C6', '#91CC75', '#FAC858', '#6b51a1'] - }, - defaultSunburstChartOption: { - data: [ - { - name: "Grandparent", - children: [ - { - name: "Parent A", - children: [ - {name: "Child A1", value: 10}, - {name: "Child A2", value: 20} - ] - }, - { - name: "Parent B", - children: [ - {name: "Child B1", value: 15}, - {name: "Child B2", value: 25} - ] - } - ] - } - ], levels: [ { itemStyle: { - color: '#f6e58d' - }, - }, - { - itemStyle: { - color: '#12e192' - }, + color: '#3498db', + borderWidth: 2, + borderColor: 'white' + } }, { itemStyle: { - color: '#ffbe76' - }, + color: '#2ecc71', + borderWidth: 1, + borderColor: 'white' + } }, { itemStyle: { - color: '#007979' - }, + color: '#e74c3c', + borderWidth: 1, + borderColor: 'white' + } } - ] + ], + label: { + show: true, + formatter: '{b}', + fontSize: 12, + color: 'white' + }, + radius: ['20%', '90%'] }, defaultCalendarChartOption: { data:[ @@ -536,28 +627,31 @@ export const enObj: I18nObjects = { }, defaultThemeriverChartOption: { data: [ - ['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'] + // Technology sector data - January to December + ['2024-01', 125, 'Smartphones'], + ['2024-02', 138, 'Smartphones'], + ['2024-03', 152, 'Smartphones'], + ['2024-04', 167, 'Smartphones'], + + ['2024-01', 95, 'Laptops'], + ['2024-02', 110, 'Laptops'], + ['2024-03', 125, 'Laptops'], + ['2024-04', 120, 'Laptops'], + + ['2024-01', 55, 'Tablets'], + ['2024-02', 60, 'Tablets'], + ['2024-03', 65, 'Tablets'], + ['2024-04', 72, 'Tablets'], + + ['2024-01', 30, 'Wearables'], + ['2024-02', 42, 'Wearables'], + ['2024-03', 55, 'Wearables'], + ['2024-04', 68, 'Wearables'], + + + ], - color: ['#5470C6', '#91CC75', '#FAC858', '#6b51a1'] + color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4'] }, defaultMapJsonOption: defaultMapData,








ApplySandwichStrip

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier!      Saves Data!


--- a PPN by Garber Painting Akron. With Image Size Reduction included!

Fetched URL: http://github.com/lowcoder-org/lowcoder/pull/1656.diff

Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy