Skip to content

Commit f700230

Browse files
FalkWolskyFalkWolsky
authored
Merge pull request #1656 from iamfaran/charts
User friendly Charts Demo Data and Chart Fixes
2 parents c9f9dda + 9a37358 commit f700230

File tree

23 files changed

+468
-175
lines changed

23 files changed

+468
-175
lines changed

‎client/packages/lowcoder-comps/src/comps/barChartComp/barChartComp.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -304,17 +304,17 @@ let BarChartComp = withExposingConfigs(BarChartTmpComp, [
304304

305305

306306
export const BarChartCompWithDefault = withDefault(BarChartComp, {
307-
xAxisKey: "date",
307+
xAxisKey: "month",
308308
series: [
309309
{
310310
dataIndex: genRandomKey(),
311-
seriesName: trans("chart.spending"),
312-
columnName: "spending",
311+
seriesName: "Sales",
312+
columnName: "sales",
313313
},
314314
{
315315
dataIndex: genRandomKey(),
316-
seriesName: trans("chart.budget"),
317-
columnName: "budget",
316+
seriesName: "Target",
317+
columnName: "target",
318318
},
319319
],
320320
});

‎client/packages/lowcoder-comps/src/comps/barChartComp/barChartConstants.tsx

Lines changed: 37 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,40 @@ import { FunnelChartConfig } from "../basicChartComp/chartConfigs/funnelChartCon
3737
import {EchartsTitleVerticalConfig} from "../chartComp/chartConfigs/echartsTitleVerticalConfig";
3838
import {EchartsTitleConfig} from "../basicChartComp/chartConfigs/echartsTitleConfig";
3939

40+
// Enhanced default data for bar charts
41+
export const barChartDefaultData = [
42+
{
43+
month: "Jan",
44+
sales: 1200,
45+
target: 1000
46+
},
47+
{
48+
month: "Feb",
49+
sales: 1500,
50+
target: 1200
51+
},
52+
{
53+
month: "Mar",
54+
sales: 1300,
55+
target: 1400
56+
},
57+
{
58+
month: "Apr",
59+
sales: 1800,
60+
target: 1500
61+
},
62+
{
63+
month: "May",
64+
sales: 1600,
65+
target: 1700
66+
},
67+
{
68+
month: "Jun",
69+
sales: 2100,
70+
target: 1900
71+
}
72+
];
73+
4074
export const ChartTypeOptions = [
4175
{
4276
label: trans("chart.bar"),
@@ -241,9 +275,9 @@ const EchartsOptionComp = withType(EchartsOptionMap, "funnel");
241275
export type CharOptionCompType = keyof typeof ChartOptionMap;
242276

243277
export const chartUiModeChildren = {
244-
title: withDefault(StringControl, trans("echarts.defaultTitle")),
245-
data: jsonControl(toJSONObjectArray, i18nObjs.defaultDataSource),
246-
xAxisKey: valueComp<string>(""), // x-axis, key from data
278+
title: withDefault(StringControl, trans("barChart.defaultTitle")),
279+
data: jsonControl(toJSONObjectArray, barChartDefaultData),
280+
xAxisKey: valueComp<string>("month"), // x-axis, key from data
247281
xAxisDirection: dropdownControl(XAxisDirectionOptions, "horizontal"),
248282
xAxisData: jsonControl(toArray, []),
249283
series: SeriesListComp,

‎client/packages/lowcoder-comps/src/comps/basicChartComp/chartConfigs/barChartConfig.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,10 +33,10 @@ const BarTypeOptions = [
3333
export const BarChartConfig = (function () {
3434
return new MultiCompBuilder(
3535
{
36-
showLabel: BoolControl,
36+
showLabel: withDefault(BoolControl, true),
3737
type: dropdownControl(BarTypeOptions, "basicBar"),
38-
barWidth: withDefault(NumberControl, i18nObjs.defaultBarChartOption.barWidth),
39-
showBackground: BoolControl,
38+
barWidth: withDefault(NumberControl, 40),
39+
showBackground: withDefault(BoolControl, false),
4040
backgroundColor: withDefault(ColorControl, i18nObjs.defaultBarChartOption.barBg),
4141
radiusAxisMax: NumberControl,
4242
polarRadiusStart: withDefault(StringControl, '30'),

‎client/packages/lowcoder-comps/src/comps/line3dChartComp/line3dChartUtils.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -178,7 +178,6 @@ export function getEchartsConfig(
178178
},
179179
}
180180
};
181-
console.log(config);
182181
return config;
183182
}
184183

‎client/packages/lowcoder-comps/src/comps/lineChartComp/lineChartComp.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -302,13 +302,13 @@ export const LineChartCompWithDefault = withDefault(LineChartComp, {
302302
series: [
303303
{
304304
dataIndex: genRandomKey(),
305-
seriesName: trans("chart.spending"),
306-
columnName: "spending",
305+
seriesName: "Sales",
306+
columnName: "sales",
307307
},
308308
{
309309
dataIndex: genRandomKey(),
310-
seriesName: trans("chart.budget"),
311-
columnName: "budget",
310+
seriesName: "Growth",
311+
columnName: "growth",
312312
},
313313
],
314314
});

‎client/packages/lowcoder-comps/src/comps/lineChartComp/lineChartConstants.tsx

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -83,11 +83,19 @@ export const XAxisDirectionOptions = [
8383

8484
export type XAxisDirectionType = ValueFromOption<typeof XAxisDirectionOptions>;
8585

86+
export const defaultChartData = [
87+
{ date: "Jan", sales: 320, growth: 250 },
88+
{ date: "Feb", sales: 450, growth: 300 },
89+
{ date: "Mar", sales: 380, growth: 340 },
90+
{ date: "Apr", sales: 520, growth: 400 },
91+
{ date: "May", sales: 480, growth: 450 },
92+
{ date: "Jun", sales: 600, growth: 500 }
93+
];
8694
export const noDataAxisConfig = {
8795
animation: false,
8896
xAxis: {
8997
type: "category",
90-
name: trans("chart.noData"),
98+
name: "No Data Available",
9199
nameLocation: "middle",
92100
data: [],
93101
axisLine: {
@@ -243,8 +251,8 @@ const EchartsOptionComp = withType(EchartsOptionMap, "funnel");
243251
export type CharOptionCompType = keyof typeof ChartOptionMap;
244252

245253
export const chartUiModeChildren = {
246-
title: withDefault(StringControl, trans("echarts.defaultTitle")),
247-
data: jsonControl(toJSONObjectArray, i18nObjs.defaultDataSource),
254+
title: withDefault(StringControl, trans("lineChart.defaultTitle")),
255+
data: jsonControl(toJSONObjectArray, defaultChartData),
248256
xAxisKey: valueComp<string>(""), // x-axis, key from data
249257
xAxisDirection: dropdownControl(XAxisDirectionOptions, "horizontal"),
250258
xAxisData: jsonControl(toArray, []),

‎client/packages/lowcoder-comps/src/comps/mermaidComp/index.tsx

Lines changed: 89 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,98 @@ import {
1010

1111
import Mermaid from "./mermaid";
1212

13+
// Collection of example mermaid diagrams that showcase different diagram types
14+
const mermaidExamples = {
15+
flowchart:
16+
`flowchart TD
17+
A[Start] --> B{Is it working?}
18+
B -->|Yes| C[Great!]
19+
B -->|No| D[Debug]
20+
D --> E[Check Documentation]
21+
E --> B
22+
C --> F[Deploy]`,
23+
24+
sequence:
25+
`sequenceDiagram
26+
participant User
27+
participant App
28+
participant API
29+
participant DB
30+
31+
User->>App: Submit Form
32+
App->>API: Send Request
33+
API->>DB: Query Data
34+
DB->>API: Return Result
35+
API->>App: Send Response
36+
App->>User: Show Result`,
37+
38+
classDiagram:
39+
`classDiagram
40+
class User {
41+
+String name
42+
+String email
43+
+authenticate()
44+
+updateProfile()
45+
}
46+
class Product {
47+
+String name
48+
+Number price
49+
+getDetails()
50+
}
51+
class Order {
52+
+Date date
53+
+Number total
54+
+process()
55+
}
56+
User "1" --> "*" Order
57+
Order "*" --> "*" Product`,
58+
59+
gantt:
60+
`gantt
61+
title Project Timeline
62+
dateFormat YYYY-MM-DD
63+
64+
section Planning
65+
Research :done, a1, 2023-01-01, 10d
66+
Requirements :active, a2, after a1, 7d
67+
68+
section Development
69+
Design :a3, after a2, 8d
70+
Implementation :a4, after a3, 14d
71+
Testing :a5, after a4, 7d
72+
73+
section Deployment
74+
Release :milestone, after a5, 0d`,
75+
76+
entityRelationship:
77+
`erDiagram
78+
CUSTOMER }|--o{ ORDER : places
79+
ORDER ||--|{ ORDER_ITEM : contains
80+
CUSTOMER ||--o{ PAYMENT : makes
81+
PRODUCT ||--|{ ORDER_ITEM : "ordered in"`,
82+
83+
journey:
84+
`journey
85+
title User Purchase Journey
86+
section Visit Website
87+
Homepage: 5: User
88+
Product listing: 4: User
89+
Product detail: 3: User
90+
section Purchase
91+
Add to cart: 4: User
92+
Checkout: 3: User, Admin
93+
Payment: 3: User, Admin
94+
section Post-Purchase
95+
Order confirmation: 5: User, Admin
96+
Shipping: 4: Admin
97+
Delivery: 5: User, Admin`
98+
};
99+
100+
// Using the flowchart example as default
13101
const childrenMap = {
14102
code: stringExposingStateControl(
15103
"code",
16-
`graph LR
17-
Start --> Stop`
104+
mermaidExamples.flowchart
18105
),
19106
onEvent: eventHandlerControl([
20107
{

‎client/packages/lowcoder-comps/src/comps/parallelChartComp/parallelChartUtils.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -180,7 +180,6 @@ export function getEchartsConfig(
180180
parallelAxis: props.data[0].map((c, i) => ({ dim: i, name: c, type: typeof props.data[1][i] === 'string'?'category':'value'}))
181181
};
182182

183-
console.log("Echarts transformedData and config", transformedData, config);
184183
return config;
185184
}
186185

‎client/packages/lowcoder-comps/src/comps/pieChartComp/pieChartConstants.tsx

Lines changed: 37 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,41 @@ export const XAxisDirectionOptions = [
8282

8383
export type XAxisDirectionType = ValueFromOption<typeof XAxisDirectionOptions>;
8484

85+
// Add this new code block:
86+
// Realistic pie chart demo data with proper categories and values
87+
export const defaultPieChartData = [
88+
{
89+
category: "Market Share",
90+
name: "Samsung",
91+
value: 21.8
92+
},
93+
{
94+
category: "Market Share",
95+
name: "Apple",
96+
value: 20.5
97+
},
98+
{
99+
category: "Market Share",
100+
name: "Xiaomi",
101+
value: 13.4
102+
},
103+
{
104+
category: "Market Share",
105+
name: "Oppo",
106+
value: 8.8
107+
},
108+
{
109+
category: "Market Share",
110+
name: "Vivo",
111+
value: 8.1
112+
},
113+
{
114+
category: "Market Share",
115+
name: "Others",
116+
value: 27.4
117+
}
118+
];
119+
85120
export const noDataAxisConfig = {
86121
animation: false,
87122
xAxis: {
@@ -241,8 +276,8 @@ export type CharOptionCompType = keyof typeof ChartOptionMap;
241276

242277
export const chartUiModeChildren = {
243278
title: withDefault(StringControl, trans("echarts.defaultTitle")),
244-
data: jsonControl(toJSONObjectArray, i18nObjs.defaultDataSource),
245-
xAxisKey: valueComp<string>(""), // x-axis, key from data
279+
data: jsonControl(toJSONObjectArray, defaultPieChartData),
280+
xAxisKey: valueComp<string>("name"),
246281
xAxisDirection: dropdownControl(XAxisDirectionOptions, "horizontal"),
247282
xAxisData: jsonControl(toArray, []),
248283
series: SeriesListComp,

‎client/packages/lowcoder-comps/src/comps/pieChartComp/pieChartUtils.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -280,7 +280,6 @@ export function getEchartsConfig(
280280
]
281281
}
282282

283-
console.log("Echarts transformedData and config", transformedData, config);
284283
return config;
285284
}
286285

‎client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartUtils.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -177,7 +177,6 @@ export function getEchartsConfig(
177177
radius: `${props.radius}%`,
178178
shape: props?.areaFlag ? 'circle' : 'line',
179179
axisName: {
180-
...styleWrapper(props?.detailStyle, theme?.detailStyle, 13),
181180
show: props?.indicatorVisibility,
182181
},
183182
splitArea: {

‎client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartConstants.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -277,6 +277,7 @@ let chartJsonModeChildren: any = {
277277
focus: withDefault(BoolControl, true),
278278
tooltip: withDefault(BoolControl, true),
279279
legendVisibility: withDefault(BoolControl, true),
280+
labelVisibility: withDefault(BoolControl, true),
280281
}
281282

282283
if (EchartDefaultChartStyle && EchartDefaultTextStyle && RadarLabelStyle && SankeyLineStyle) {

‎client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartPropertyView.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,10 @@ export function sankeyChartPropertyView(
3636
{children.draggable.propertyView({label: trans("sankeyChart.draggable"), tooltip: trans("sankeyChart.draggableTooltip")})}
3737
{children.focus.propertyView({label: trans("sankeyChart.focus"), tooltip: trans("sankeyChart.focusTooltip")})}
3838
{children.tooltip.propertyView({label: trans("sankeyChart.tooltip"), tooltip: trans("echarts.tooltipTooltip")})}
39+
{children.labelVisibility.propertyView({
40+
label: trans("treeChart.labelVisibility"),
41+
tooltip: trans("echarts.labelVisibilityTooltip")
42+
})}
3943

4044
</Section>
4145
<Section name={sectionNames.interaction}>

‎client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartUtils.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -162,9 +162,8 @@ export function getEchartsConfig(
162162
bottom: `${props?.bottom}%`,
163163
top: `${props?.top}%`,
164164
label: {
165-
show: true,
165+
show: props.labelVisibility,
166166
position: props.echartsLabelConfig.top,
167-
...styleWrapper(props?.detailStyle, theme?.detailStyle,15)
168167
},
169168
data: props?.echartsData.length !== 0 && props?.echartsData?.map(item => ({
170169
name: item.name,

‎client/packages/lowcoder-comps/src/comps/scatterChartComp/scatterChartConstants.tsx

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -217,9 +217,34 @@ const ChartOptionComp = withType(ChartOptionMap, "scatter");
217217
const EchartsOptionComp = withType(EchartsOptionMap, "funnel");
218218
export type CharOptionCompType = keyof typeof ChartOptionMap;
219219

220+
export const SCATTER_CHART_DEMO_DATA = [
221+
222+
{ hours: 1.5, score: 62, student: "Alex M." },
223+
{ hours: 2.0, score: 65, student: "Sarah P." },
224+
{ hours: 2.5, score: 71, student: "James W." },
225+
{ hours: 2.8, score: 69, student: "Emma L." },
226+
{ hours: 3.0, score: 75, student: "Michael R." },
227+
{ hours: 3.2, score: 73, student: "Lisa K." },
228+
{ hours: 3.5, score: 78, student: "David H." },
229+
{ hours: 3.8, score: 77, student: "Sophie T." },
230+
{ hours: 4.0, score: 82, student: "Ryan B." },
231+
{ hours: 4.2, score: 84, student: "Nina C." },
232+
{ hours: 4.5, score: 86, student: "Thomas G." },
233+
{ hours: 4.8, score: 88, student: "Maria S." },
234+
{ hours: 5.0, score: 89, student: "Daniel F." },
235+
{ hours: 5.2, score: 91, student: "Anna D." },
236+
{ hours: 5.5, score: 90, student: "Kevin P." },
237+
{ hours: 5.8, score: 93, student: "Rachel M." },
238+
{ hours: 6.0, score: 95, student: "John L." },
239+
{ hours: 6.2, score: 94, student: "Emily W." },
240+
{ hours: 3.0, score: 68, student: "Chris B." }, // outlier - lower performance
241+
{ hours: 5.0, score: 96, student: "Jessica H." } // outlier - higher performance
242+
243+
]
244+
220245
export const chartUiModeChildren = {
221246
title: withDefault(StringControl, trans("echarts.defaultTitle")),
222-
data: jsonControl(toJSONObjectArray, i18nObjs.defaultDataSource),
247+
data: jsonControl(toJSONObjectArray, SCATTER_CHART_DEMO_DATA),
223248
xAxisKey: valueComp<string>(""), // x-axis, key from data
224249
xAxisDirection: dropdownControl(XAxisDirectionOptions, "horizontal"),
225250
xAxisData: jsonControl(toArray, []),

0 commit comments

Comments
 (0)