Skip to content

Added examples for Chart components #1540

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Feb 24, 2025
Merged

Added examples for Chart components #1540

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2c62a30
added documentation for Charts
adnanqaops Feb 6, 2025
d6a8389
added examples for chart components
adnanqaops Feb 10, 2025
0c3c98a
added changes to Chart components
adnanqaops Feb 18, 2025
ad12095
added changes to table and other components
adnanqaops Feb 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
153 changes: 151 additions & 2 deletions client/packages/lowcoder/src/pages/ComponentDoc/examples/CalendarInputComp/Calendar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,163 @@ export default function CalendarExample() {
<>
<ExampleGroup
title={trans("componentDoc.basicUsage")}
description={trans("componentDoc.basicDemoDescription")}
description="The Following Examples Show the Basic Usage of the Calendar Component."
>
<Example
title={trans("componentDoc.default")}
title="Default Calendar"
width={700}
height={600}
config={{
}}
compFactory={ChartCompWithDefault}
/>
<Example
title="Hiding the Calendar component"
width={700}
height={600}
config={{
hidden: true,
}}
compFactory={ChartCompWithDefault}
/>
</ExampleGroup>

<ExampleGroup
title="Advanced Options"
description="The Following Examples Show the Advance usage/options of the Calendar Component."
>
<Example
title="Editable - Double Click on a slot to add the Event"
width={700}
height={600}
config={{
editable: true,
}}
compFactory={ChartCompWithDefault}
/>
<Example
title="Hiding Event Times"
width={700}
height={600}
config={{
showEventTime: false,
}}
compFactory={ChartCompWithDefault}
/>
<Example
title="Hiding Weekends"
width={700}
height={600}
config={{
showWeekends: false,
}}
compFactory={ChartCompWithDefault}
/>
<Example
title="Hiding All Day Option"
width={700}
height={600}
config={{
showAllDay: false,
}}
compFactory={ChartCompWithDefault}
/>
</ExampleGroup>

<ExampleGroup
title="Layout"
description="The Following Examples Show different Layout options of the Calendar Component."
>
<Example
title="Initial Calendar View - Year"
width={700}
height={600}
config={{
currentFreeView: "multiMonthYear",
}}
compFactory={ChartCompWithDefault}
/>
<Example
title="Initial Calendar View - Month"
width={700}
height={600}
config={{
currentFreeView: "dayGridMonth",
}}
compFactory={ChartCompWithDefault}
/>
<Example
title="Initial Calendar View - Week"
width={700}
height={600}
config={{
currentFreeView: "timeGridWeek",
}}
compFactory={ChartCompWithDefault}
/>
<Example
title="Initial Calendar View - Week"
width={700}
height={600}
config={{
currentFreeView: "dayGridWeek",
}}
compFactory={ChartCompWithDefault}
/>
<Example
title="Initial Calendar View - Day Event List"
width={700}
height={600}
config={{
currentFreeView: "dayGridDay",
}}
compFactory={ChartCompWithDefault}
/>
<Example
title="Initial Calendar View - Time Event List"
width={700}
height={600}
config={{
currentFreeView: "timeGridDay",
}}
compFactory={ChartCompWithDefault}
/>
<Example
title="Initial Calendar View - Event List"
width={700}
height={600}
config={{
currentFreeView: "listWeek",
}}
compFactory={ChartCompWithDefault}
/>
<Example
title="Start From - Saturday"
width={700}
height={600}
config={{
firstDay: 6,
}}
compFactory={ChartCompWithDefault}
/>
<Example
title="Start From - Monday"
width={700}
height={600}
config={{
firstDay: 1,
}}
compFactory={ChartCompWithDefault}
/>
<Example
title="Show Vertical ScrollBar"
width={700}
height={600}
config={{
showVerticalScrollbar: true,
}}
compFactory={ChartCompWithDefault}
/>
</ExampleGroup>
</>
);
Expand Down
135 changes: 82 additions & 53 deletions client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/CandleStickChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,54 +6,45 @@ 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 chartStyle= {
background: "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
chartBorderColor: "#FDFAFA",
chartBorderStyle: "solid",
chartBorderWidth: "2",
chartBoxShadow: "200",
chartShadowColor: "#3377FF"
}

const echartsOption = JSON.stringify(defaultEchartsJsonOption);
const titleStyle = {
chartBoxShadow: "9",
chartFontStyle: "Italic",
chartShadowColor: "#FFBD01",
chartTextColor: "#36B389",
chartTextSize: "30",
chartTextWeight: "Bold"
}

const xAxisStyle = {
chartBoxShadow: "5",
chartFontFamily: "serif",
chartFontStyle: "Italic",
chartShadowColor: "#020101",
chartTextColor: "#971827",
chartTextSize: "20",
chartTextWeight: "bold"
}

const yAxisStyle = {
chartBoxShadow: "5",
chartFontFamily: "serif",
chartFontStyle: "Italic",
chartShadowColor: "#FFD701",
chartTextColor: "#7A7A7B",
chartTextSize: "20",
chartTextWeight: "bold"
}

export default function CandleStickChartExample() {
const blackListConfig: string[] = ["echartsOption"];
return (
<>
<ExampleGroup
Expand All @@ -65,7 +56,6 @@ export default function CandleStickChartExample() {
width={500}
height={300}
config={{
echartsOption: echartsOption,
}}
compFactory={ChartCompWithDefault}
/>
Expand All @@ -74,7 +64,6 @@ export default function CandleStickChartExample() {
width={500}
height={300}
config={{
echartsOption: echartsOption,
tooltip: false,
}}
compFactory={ChartCompWithDefault}
Expand All @@ -90,7 +79,6 @@ export default function CandleStickChartExample() {
width={500}
height={300}
config={{
echartsOption: echartsOption,
top: 20,
right: 20,
bottom: 20,
Expand All @@ -109,7 +97,6 @@ export default function CandleStickChartExample() {
width={500}
height={300}
config={{
echartsOption: echartsOption,
echartsTitleConfig: {
"position": "left",
},
Expand All @@ -121,7 +108,6 @@ export default function CandleStickChartExample() {
width={500}
height={300}
config={{
echartsOption: echartsOption,
echartsTitleConfig: {
"position": "center",
},
Expand All @@ -133,7 +119,6 @@ export default function CandleStickChartExample() {
width={500}
height={300}
config={{
echartsOption: echartsOption,
echartsTitleConfig: {
"position": "right",
},
Expand All @@ -145,7 +130,6 @@ export default function CandleStickChartExample() {
width={500}
height={300}
config={{
echartsOption: echartsOption,
echartsLegendConfig: {
"position": "bottom",
},
Expand All @@ -157,14 +141,59 @@ export default function CandleStickChartExample() {
width={500}
height={300}
config={{
echartsOption: echartsOption,
echartsLegendConfig: {
"position": "top",
},
}}
compFactory={ChartCompWithDefault}
/>
</ExampleGroup>

<ExampleGroup
title="Styling Properties"
description="The Following Examples Show the Styling Properties on the CandleStick Chart Component."
>
<Example
title="Chart Styling - Background Color, Box Shadow, Border"
width={500}
height={350}
hideSettings={true}
config={{
chartStyle: chartStyle,
}}
compFactory={ChartCompWithDefault}
/>
<Example
title="Title Styling - Text, Fonts & Box Shadow"
width={500}
height={350}
hideSettings={true}
config={{
titleStyle: titleStyle,
}}
compFactory={ChartCompWithDefault}
/>
<Example
title="X-Axis Styling"
width={500}
height={350}
hideSettings={true}
config={{
xAxisStyle: xAxisStyle,
}}
compFactory={ChartCompWithDefault}
/>
<Example
title="Y-Axis Styling"
width={500}
height={350}
hideSettings={true}
config={{
yAxisStyle: yAxisStyle,
}}
compFactory={ChartCompWithDefault}
/>
</ExampleGroup>
</>
);
}
Loading
Loading