Movatterモバイル変換

[0]ホーム
URL:

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

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.

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

Already on GitHub?Sign in to your account

Merged
FalkWolsky merged 4 commits intodevfromdoc/existing_components
Feb 24, 2025
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
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
View file
Open in desktop
Original file line numberDiff line numberDiff 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
View file
Open in desktop
Original file line numberDiff line numberDiff 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
[8]ページ先頭
©2009-2025 Movatter.jp