Skip to content

Commit 7b6f4dd

Browse files
tforkmanntforkmann
committed
Refactor code structure for improved readability and maintainability
1 parent 7de9704 commit 7b6f4dd

File tree

5 files changed

+79
-98
lines changed

5 files changed

+79
-98
lines changed

‎README.md‎

Lines changed: 35 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -28,58 +28,45 @@ dotnet run
2828
```
2929

3030
## Example ChartJS
31-
Here is an example ChartJS
31+
Here is an example Line Chart:
3232
```fs
3333
ChartJS.line [
34-
line.options [
35-
option.responsive true
36-
option.plugins[plugin.dataLabels [
37-
dataLabels.display true
38-
dataLabels.align Bottom
39-
dataLabels.borderRadius 3
40-
dataLabels.color "red"
41-
dataLabels.backgroundColor "green"
42-
]]
43-
]
44-
line.data [
45-
lineData.labels [|
46-
"Red"
47-
"Blue"
48-
"Yellow"
49-
"Green"
50-
"Purple"
51-
"Orange"
52-
|]
53-
lineData.datasets [|
54-
lineData.dataset [
55-
lineDataSet.label "My First Dataset"
56-
lineDataSet.borderColor "rgb(53, 162, 235)"
57-
lineDataSet.backgroundColor "rgba(53, 162, 235, 0.5)"
58-
lineDataSet.data [|
59-
"1"
60-
"2"
61-
"3"
62-
"4"
63-
"5"
64-
"6"
65-
|]
66-
]
67-
lineData.dataset [
68-
lineDataSet.label "My Second Dataset"
69-
lineDataSet.borderColor "yellow"
70-
lineDataSet.backgroundColor "rgba(53, 162, 235, 0.5)"
71-
lineDataSet.data [|
72-
"1"
73-
"2"
74-
"3"
75-
"4"
76-
"4"
77-
"6"
78-
|]
79-
]
80-
|]
34+
line.options [
35+
option.responsive true
36+
option.plugins [
37+
plugin.dataLabels [
38+
dataLabels.display true
39+
dataLabels.align Position.Bottom
40+
dataLabels.borderRadius 3
41+
dataLabels.color "red"
42+
dataLabels.backgroundColor "green"
43+
]
8144
]
8245
]
46+
line.data [
47+
lineData.labels [| "Red"; "Blue"; "Yellow"; "Green"; "Purple"; "Orange" |]
48+
lineData.datasets [|
49+
lineData.dataset [
50+
lineDataSet.label "My First Dataset"
51+
lineDataSet.borderColor "rgb(53, 162, 235)"
52+
lineDataSet.backgroundColor "rgba(53, 162, 235, 0.5)"
53+
lineDataSet.data [| "1"; "2"; "3"; "4"; "5"; "6" |]
54+
]
55+
lineData.dataset [
56+
lineDataSet.label "My Second Dataset"
57+
lineDataSet.borderColor "yellow"
58+
lineDataSet.backgroundColor "rgba(53, 162, 235, 0.5)"
59+
lineDataSet.data [| "1"; "2"; "3"; "4"; "4"; "6" |]
60+
]
61+
|]
62+
]
63+
]
8364
```
8465

66+
## Supported Chart Types
67+
- Line Chart (`ChartJS.line`)
68+
- Bar Chart (`ChartJS.bar`)
69+
- Doughnut Chart (`ChartJS.doughnut`)
70+
- Bubble Chart (`ChartJS.bubble`)
71+
8572
You can find more examples [here](https://tforkmann.github.io/Feliz.ChartJS/)

‎build/Feliz.ChartJS.1.1.2.nupkg‎

64.7 KB
Binary file not shown.

‎src/Docs/Pages/BubbleChart.fs‎

Lines changed: 41 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -109,64 +109,58 @@ let ChartJSChart =
109109

110110
let code =
111111
"""
112-
ChartJS.doughnut [
113-
doughnut.options [
112+
ChartJS.bubble [
113+
bubble.options [
114114
option.responsive true
115+
option.layout [ layout.padding [ padding.bottom 10 ] ]
116+
option.scales [ scale.y [ y.beginAtZero true ] ]
115117
option.plugins [
116-
plugin.legend [ legend.position Top ]
117-
plugin.title [
118-
title.display true
119-
title.text "Chart.js Doughnut Chart"
120-
]
118+
plugin.legend [ legend.position Position.Top ]
119+
plugin.title [ title.display true; title.text "Chart.js Bubble Chart" ]
121120
plugin.dataLabels [
122121
dataLabels.display true
123-
dataLabels.align Bottom
122+
dataLabels.align Position.Bottom
124123
dataLabels.borderRadius 3
125124
dataLabels.color "red"
126125
dataLabels.backgroundColor "green"
127-
]
126+
]
128127
]
129128
]
130-
doughnut.data [
131-
doughnutData.labels [|
132-
"Red"
133-
"Blue"
134-
"Yellow"
135-
"Green"
136-
"Purple"
137-
"Orange"
138-
|]
139-
doughnutData.datasets [|
140-
doughnutData.dataset [
141-
doughnutDataSet.label "# of Votes"
142-
doughnutDataSet.borderColor [|
143-
"rgba(255, 99, 132, 1)"
144-
"rgba(54, 162, 235, 1)"
145-
"rgba(255, 206, 86, 1)"
146-
"rgba(75, 192, 192, 1)"
147-
"rgba(153, 102, 255, 1)"
148-
"rgba(255, 159, 64, 1)"
149-
|]
150-
doughnutDataSet.borderWidth 1
151-
doughnutDataSet.backgroundColor [|
152-
"rgba(255, 99, 132, 0.2)"
153-
"rgba(54, 162, 235, 0.2)"
154-
"rgba(255, 206, 86, 0.2)"
155-
"rgba(75, 192, 192, 0.2)"
156-
"rgba(153, 102, 255, 0.2)"
157-
"rgba(255, 159, 64, 0.2)"
158-
|]
159-
doughnutDataSet.data [|
160-
12
161-
19
162-
3
163-
5
164-
2
165-
3
129+
bubble.data [
130+
bubbleData.datasets [|
131+
bubbleData.dataset [
132+
bubbleDataSet.label "Red bubbles"
133+
bubbleDataSet.backgroundColor "rgba(255, 99, 132)"
134+
bubbleDataSet.dataPoints [|
135+
bubbleDataPoints.dataPoint [
136+
bubbleDataPoint.x 10
137+
bubbleDataPoint.y 10
138+
bubbleDataPoint.r 15
139+
]
140+
bubbleDataPoints.dataPoint [
141+
bubbleDataPoint.x 20
142+
bubbleDataPoint.y 15
143+
bubbleDataPoint.r 10
144+
]
166145
|]
167-
doughnutDataSet.datalabels [|
168-
datalabel.anchor "end"
146+
bubbleDataSet.dataLabels [| dataLabel.anchor "end" |]
147+
]
148+
bubbleData.dataset [
149+
bubbleDataSet.label "Blue bubbles"
150+
bubbleDataSet.backgroundColor "rgba(54, 162, 235)"
151+
bubbleDataSet.dataPoints [|
152+
bubbleDataPoints.dataPoint [
153+
bubbleDataPoint.x 10
154+
bubbleDataPoint.y 20
155+
bubbleDataPoint.r 15
156+
]
157+
bubbleDataPoints.dataPoint [
158+
bubbleDataPoint.x 20
159+
bubbleDataPoint.y 10
160+
bubbleDataPoint.r 10
161+
]
169162
|]
163+
bubbleDataSet.dataLabels [| dataLabel.anchor "end" |]
170164
]
171165
|]
172166
]

‎src/Docs/Pages/DoughnutChart.fs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,7 @@ let code =
136136
3
137137
|]
138138
doughnutDataSet.dataLabels [|
139-
dataLabels.anchor "end"
139+
dataLabel.anchor "end"
140140
|]
141141
]
142142
|]
@@ -152,5 +152,5 @@ let DoughnutChartView () =
152152
Bulma.content [
153153
codedView title code ChartJSChart
154154
]
155-
fixDocsView "LineChart" false
155+
fixDocsView "DoughnutChart" false
156156
]

‎src/Docs/SharedView.fs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ let codedNoExampleView (title: ReactElement) (code: string) =
9090
let fixDocsView fileName client =
9191
Html.div [
9292
Html.a [
93-
prop.href (sprintf "https://github.com/tforkmann/Feliz.ChartJS/blob/main/src/Docs/views/Feliz.ChartJS/%s.fs" fileName)
93+
prop.href (sprintf "https://github.com/tforkmann/Feliz.ChartJS/blob/main/src/Docs/Pages/%s.fs" fileName)
9494
prop.text ("Fix docs file " + fileName + " here")
9595
]
9696
]

0 commit comments

Comments
 (0)