You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

279 lines
6.3 KiB

  1. import { sampleData, trendsData } from './data';
  2. export const docSections = [
  3. {
  4. name: "start",
  5. contentBlocks: [
  6. // Intro
  7. {
  8. type: "text",
  9. content: `A chart is generally a 2D rendition of data. For example,
  10. for a set of values across items, the data could look like:`
  11. },
  12. {
  13. type: "code",
  14. content: ` data = {
  15. labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  16. datasets: [
  17. { values: [18, 40, 30, 35, 8, 52, 17, -4] }
  18. ]
  19. }`
  20. },
  21. // type: 'bar'
  22. {
  23. type: "text",
  24. content: `Plug that in with a type <b>bar</b>, a color and height:`
  25. },
  26. {
  27. type: "code",
  28. content: ` new frappe.Chart( "#chart", {
  29. data: data,
  30. type: 'bar',
  31. height: 140,
  32. colors: ['red']
  33. });`
  34. },
  35. {
  36. type: "demo",
  37. config: {
  38. data: sampleData[0],
  39. type: 'bar',
  40. height: 140,
  41. colors: ['red'],
  42. },
  43. },
  44. // type: 'line'
  45. {
  46. type: "text",
  47. content: `And similarly, a <b>line</b> chart:`
  48. },
  49. {
  50. type: "code",
  51. content: ` ...
  52. type: 'line',
  53. ...`
  54. },
  55. {
  56. type: "demo",
  57. config: {
  58. data: sampleData[0],
  59. type: 'line',
  60. height: 140,
  61. colors: ['red'],
  62. },
  63. },
  64. // Axes lines:
  65. {
  66. type: "text",
  67. content: `Axes lines are configurable. By default they are long
  68. <b>span</b>ning lines, but can also be short <b>tick</b>s:`
  69. },
  70. {
  71. type: "code",
  72. content: ` ...
  73. axisOptions: {
  74. xAxisMode: 'tick' // default: 'span'
  75. },
  76. ...`
  77. },
  78. {
  79. type: "demo",
  80. config: {
  81. data: sampleData[2],
  82. type: 'bar',
  83. height: 140,
  84. colors: ['blue'],
  85. axisOptions: {
  86. xAxisMode: "tick",
  87. },
  88. },
  89. },
  90. // Bar width:
  91. {
  92. type: "text",
  93. content: `The bar <b>width</b> can be set by defining the <b>ratio of the space</b>
  94. between bars to the bar width.`
  95. },
  96. {
  97. type: "code",
  98. content: ` ...
  99. barOptions: {
  100. spaceRatio: 0.2 // default: 1
  101. },
  102. ...`
  103. },
  104. {
  105. type: "demo",
  106. config: {
  107. data: sampleData[3],
  108. type: 'bar',
  109. height: 140,
  110. colors: ['orange'],
  111. axisOptions: {
  112. xAxisMode: "tick"
  113. },
  114. barOptions: {
  115. spaceRatio: 0.2
  116. },
  117. },
  118. options: [
  119. {
  120. name: "barOptions",
  121. path: ["barOptions"],
  122. type: "map",
  123. mapKeys: ['spaceRatio'],
  124. states: {
  125. "0.2": [0.2],
  126. "0.5": [0.5],
  127. "1": [1],
  128. "1.5": [1.5]
  129. },
  130. activeState: "0.2"
  131. }
  132. ]
  133. },
  134. // Dot radius:
  135. {
  136. type: "text",
  137. content: 'So can the <b>dot size</b> on a line graph, with the `dotSize` property in `lineOptions`.'
  138. },
  139. {
  140. type: "code",
  141. content: ` ...
  142. lineOptions: {
  143. dotRadius: 8 // default: 4
  144. },
  145. ...`
  146. },
  147. {
  148. type: "demo",
  149. config: {
  150. data: sampleData[2],
  151. type: 'line',
  152. height: 140,
  153. colors: ['orange'],
  154. axisOptions: {
  155. xAxisMode: "tick"
  156. },
  157. lineOptions: {
  158. dotSize: 8
  159. }
  160. },
  161. options: [
  162. {
  163. name: "lineOptions",
  164. path: ["lineOptions"],
  165. type: "map",
  166. mapKeys: ['dotSize'],
  167. states: {
  168. "3": [3],
  169. "4": [4],
  170. "8": [8],
  171. "10": [10],
  172. },
  173. activeState: "8"
  174. }
  175. ]
  176. },
  177. ]
  178. },
  179. {
  180. title: "Trends and region charts",
  181. name: "trends-and-region",
  182. contentBlocks: [
  183. {
  184. type: "text",
  185. content: 'lineOptions` have a bunch of other properties too. Region charts are'
  186. },
  187. {
  188. type: "code",
  189. content: ` ...
  190. data: {
  191. labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  192. datasets: [
  193. { name: "Dataset 1", values: [18, 40, 30, 35, 8, 52, 17, -4] },
  194. { name: "Dataset 2", values: [30, 50, -10, 15, 18, 32, 27, 14] }
  195. ]
  196. },
  197. ...`
  198. },
  199. {
  200. type: "demo",
  201. config: {
  202. data: trendsData,
  203. type: 'line',
  204. height: 180,
  205. colors: ['violet'],
  206. axisOptions: {
  207. xAxisMode: 'tick',
  208. yAxisMode: 'span',
  209. xIsSeries: 1
  210. }
  211. },
  212. options: [
  213. {
  214. name: "lineOptions",
  215. path: ["lineOptions"],
  216. type: "map",
  217. mapKeys: ['hideLine', 'hideDots', 'heatline', 'regionFill'],
  218. states: {
  219. "Line": [0, 1, 0, 0],
  220. "Dots": [1, 0, 0, 0],
  221. "HeatLine": [0, 1, 1, 0],
  222. "Region": [0, 1, 0, 1]
  223. },
  224. activeState: "HeatLine"
  225. }
  226. ]
  227. }
  228. ]
  229. },
  230. {
  231. title: "Adding more datasets",
  232. name: "multi-dataset",
  233. contentBlocks: [
  234. {
  235. type: "text",
  236. content: `A chart can have multiple datasets. In an axis chart, every dataset is represented individually.`
  237. },
  238. {
  239. type: "code",
  240. content: ` ...
  241. data: {
  242. labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  243. datasets: [
  244. { name: "Dataset 1", values: [18, 40, 30, 35, 8, 52, 17, -4] },
  245. { name: "Dataset 2", values: [30, 50, -10, 15, 18, 32, 27, 14] }
  246. ]
  247. },
  248. ...`
  249. },
  250. {
  251. type: "demo",
  252. config: {
  253. data: sampleData[1],
  254. type: 'line',
  255. height: 200,
  256. colors: ['green', 'light-green'],
  257. },
  258. options: [
  259. {
  260. name: "type",
  261. path: ["type"],
  262. type: "string",
  263. states: {
  264. "Line": 'line',
  265. "Bar": 'bar',
  266. },
  267. activeState: "Mixed"
  268. }
  269. ],
  270. }
  271. ]
  272. }
  273. ]