Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit f700230

Browse files
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

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /