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 1 commit
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
Prev Previous commit
Next Next commit
added examples for chart components
  • Loading branch information
@adnanqaops
adnanqaops committed Feb 24, 2025
commit d6a8389e3865dc6cc8f2cb35ddaa55abaa41a5ac
16 changes: 8 additions & 8 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 @@ -24,17 +24,17 @@ const titleStyle = {
chartTextWeight: "Bold"
}

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

const legendStyle = {
const yAxisStyle = {
chartBoxShadow: "5",
chartFontFamily: "serif",
chartFontStyle: "Italic",
Expand Down Expand Up @@ -151,7 +151,7 @@ export default function CandleStickChartExample() {

<ExampleGroup
title="Styling Properties"
description="The Following Examples Show the Styling Properties on the Funnel Chart Component."
description="The Following Examples Show the Styling Properties on the CandleStick Chart Component."
>
<Example
title="Chart Styling - Background Color, Box Shadow, Border"
Expand All @@ -174,22 +174,22 @@ export default function CandleStickChartExample() {
compFactory={ChartCompWithDefault}
/>
<Example
title="Label Styling - Text, Fonts & Box Shadow"
title="X-Axis Styling"
width={500}
height={350}
hideSettings={true}
config={{
labelStyle: labelStyle,
xAxisStyle: xAxisStyle,
}}
compFactory={ChartCompWithDefault}
/>
<Example
title="Lagend Styling - Text, Fonts & Box Shadow"
title="Y-Axis Styling"
width={500}
height={350}
hideSettings={true}
config={{
legendStyle: legendStyle,
yAxisStyle: yAxisStyle,
}}
compFactory={ChartCompWithDefault}
/>
Expand Down
64 changes: 42 additions & 22 deletions client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GraphChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,27 +6,25 @@ 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 chartStyle= {
background: "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
chartBorderColor: "#FDFAFA",
chartBorderStyle: "solid",
chartBorderWidth: "2",
chartBoxShadow: "200",
chartShadowColor: "#3377FF"
}

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

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 (
<>
<ExampleGroup
Expand All @@ -37,11 +35,33 @@ export default function GraphChartExample() {
title={trans("componentDoc.default")}
width={500}
height={300}
blackListConfig={blackListConfig}
config={{
mode: "json",
data: data,
series: series,
}}
compFactory={ChartCompWithDefault}
/>
</ExampleGroup>

<ExampleGroup
title="Styling Properties"
description="The Following Examples Show the Styling Properties on the Graph 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}
/>
Expand Down
237 changes: 216 additions & 21 deletions client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/HeatmapChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,27 +6,45 @@ 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 chartStyle= {
background: "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
chartBorderColor: "#FDFAFA",
chartBorderStyle: "solid",
chartBorderWidth: "2",
chartBoxShadow: "200",
chartShadowColor: "#3377FF"
}

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 titleStyle = {
chartBoxShadow: "9",
chartFontStyle: "Italic",
chartShadowColor: "#FFBD01",
chartTextColor: "#36B389",
chartTextSize: "30",
chartTextWeight: "Bold"
}

const data = JSON.stringify(defaultDataSource);
const echartsOption = JSON.stringify(defaultEchartsJsonOption);
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 HeatmapChartExample() {
const blackListConfig: string[] = ["data", "echartsOption", "series"];
const series = [
{
"columnName": "spending",
"seriesName": "Spending",
"dataIndex": "f011b34c"
},
{
"columnName": "budget",
"seriesName": "Budget",
"dataIndex": "30e02269"
}
];
return (
<>
<ExampleGroup
Expand All @@ -37,14 +55,191 @@ export default function HeatmapChartExample() {
title={trans("componentDoc.default")}
width={500}
height={300}
blackListConfig={blackListConfig}
hideSettings={true}
config={{
}}
compFactory={ChartCompWithDefault}
/>
</ExampleGroup>

<ExampleGroup
title="Alignment & Layout"
description="The Following Examples Show the different alignment option on the Heatmap Chart Component."
>
<Example
title="Title Position - Left"
width={500}
height={350}
config={{
echartsTitleConfig : {
"position" : "left",
}
}}
compFactory={ChartCompWithDefault}
/>
<Example
title="Title Position - Center"
width={500}
height={350}
config={{
echartsTitleConfig : {
"position" : "center",
}
}}
compFactory={ChartCompWithDefault}
/>
<Example
title="Title Position - Right"
width={500}
height={350}
config={{
mode: "json",
data: data,
series: series,
echartsTitleConfig : {
"position" : "right",
}
}}
compFactory={ChartCompWithDefault}
/>
<Example
title="Legend Position - Top"
width={500}
height={350}
config={{
echartsLegendConfig : {
"position" : "top",
},
echartsTitleConfig : {
"position" : "left",
},
}}
compFactory={ChartCompWithDefault}
/>
<Example
title="Lagend Position - Bottom"
width={500}
height={350}
config={{
echartsLegendConfig : {
"position" : "bottom",
}
}}
compFactory={ChartCompWithDefault}
/>
<Example
title="Legend Orientation + Position - Vertical + Left"
width={500}
height={350}
config={{
echartsLegendOrientConfig: {
orient: "vertical"
},
echartsLegendAlignConfig: {
left: "left"
},
}}
compFactory={ChartCompWithDefault}
/>
<Example
title="Legend Orientation + Position - Horizontal + Center"
width={500}
height={350}
config={{
echartsLegendOrientConfig: {
orient: "horizontal"
},
}}
compFactory={ChartCompWithDefault}
/>
<Example
title="Legend Orientation + Position - Vertical + Right"
width={500}
height={350}
config={{
echartsLegendOrientConfig: {
orient: "vertical"
},
echartsLegendAlignConfig: {
left: "right"
},
}}
compFactory={ChartCompWithDefault}
/>
<Example
title="Hiding Labels"
width={500}
height={350}
config={{
echartsLabelConfig: {
labelVisibility: false,
},
}}
compFactory={ChartCompWithDefault}
/>
<Example
title="Chart Position - Top & Left"
width={500}
height={350}
config={{
top: "0",
left: "0",
}}
compFactory={ChartCompWithDefault}
/>
<Example
title="Chart Position - Bottom & Right"
width={500}
height={350}
config={{
bottom: "0",
right: "0",
}}
compFactory={ChartCompWithDefault}
/>
</ExampleGroup>

<ExampleGroup
title="Styling Properties"
description="The Following Examples Show the Styling Properties on the HeatMap 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>
</>
);
Expand Down
Loading