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.
 
 
 

229 line
6.8 KiB

  1. import { lineCompositeData, barCompositeData, trendsData, heatmapData } from './data';
  2. import { HEATMAP_COLORS_YELLOW, HEATMAP_COLORS_BLUE } from '../../../src/js/utils/constants';
  3. export default {
  4. lineComposite: {
  5. config: {
  6. title: "Fireball/Bolide Events - Yearly (reported)",
  7. data: lineCompositeData,
  8. type: "line",
  9. height: 190,
  10. colors: ["green"],
  11. isNavigable: 1,
  12. valuesOverPoints: 1,
  13. lineOptions: {
  14. dotSize: 8
  15. }
  16. }
  17. },
  18. barComposite: {
  19. config: {
  20. data: barCompositeData,
  21. type: "bar",
  22. height: 210,
  23. colors: ["violet", "light-blue", "#46a9f9"],
  24. valuesOverPoints: 1,
  25. axisOptions: {
  26. xAxisMode: "tick"
  27. },
  28. barOptions: {
  29. stacked: 1
  30. }
  31. }
  32. },
  33. demoMain: {
  34. title: "Creating a Chart",
  35. contentBlocks: [
  36. {
  37. type: "text",
  38. content: `Booga wooga wooga Booga Booga wooga`,
  39. },
  40. {
  41. type: "code",
  42. lang: "html",
  43. content: ` &lt!--HTML-->
  44. <figure id="frost-chart"></figure>`,
  45. },
  46. {
  47. type: "code",
  48. lang: "javascript",
  49. content: ` // Javascript
  50. let chart = new frappe.Chart( "#frost-chart", { // or DOM element
  51. data: {
  52. labels: ["12am-3am", "3am-6am", "6am-9am", "9am-12pm",
  53. "12pm-3pm", "3pm-6pm", "6pm-9pm", "9pm-12am"],
  54. datasets: [
  55. {
  56. name: "Some Data", chartType: 'bar',
  57. values: [25, 40, 30, 35, 8, 52, 17, -4]
  58. },
  59. {
  60. name: "Another Set", chartType: 'bar',
  61. values: [25, 50, -10, 15, 18, 32, 27, 14]
  62. },
  63. {
  64. name: "Yet Another", chartType: 'line',
  65. values: [15, 20, -3, -15, 58, 12, -17, 37]
  66. }
  67. ],
  68. yMarkers: [{ label: "Marker", value: 70,
  69. options: { labelPos: 'left' }}],
  70. yRegions: [{ label: "Region", start: -10, end: 50,
  71. options: { labelPos: 'right' }}]
  72. },
  73. title: "My Awesome Chart",
  74. type: 'axis-mixed', // or 'bar', 'line', 'pie', 'percentage'
  75. height: 300,
  76. colors: ['purple', '#ffa3ef', 'light-blue'],
  77. tooltipOptions: {
  78. formatTooltipX: d => (d + '').toUpperCase(),
  79. formatTooltipY: d => d + ' pts',
  80. }
  81. });
  82. chart.export();`,
  83. },
  84. {
  85. type: "demo",
  86. config: {
  87. title: "My Awesome Chart",
  88. data: "typeData",
  89. type: "axis-mixed",
  90. height: 300,
  91. colors: ["purple", "magenta", "light-blue"],
  92. maxSlices: 10,
  93. tooltipOptions: {
  94. formatTooltipX: d => (d + '').toUpperCase(),
  95. formatTooltipY: d => d + ' pts',
  96. }
  97. },
  98. sideContent: {},
  99. options: [
  100. {
  101. name: "lineOptions",
  102. path: ["lineOptions"],
  103. type: "map",
  104. mapKeys: ['hideLine', 'hideDots', 'heatline', 'regionFill'],
  105. states: {
  106. "Line": [0, 1, 0, 0],
  107. "Dots": [1, 0, 0, 0],
  108. "HeatLine": [0, 1, 1, 0],
  109. "Region": [0, 1, 0, 1]
  110. },
  111. activeState: "HeatLine"
  112. }
  113. ],
  114. actions: [{ name: "Export ...", fn: "export", args: [] }],
  115. }
  116. ]
  117. },
  118. updateValues: { },
  119. trendsPlot: {
  120. title: "Plot Trends",
  121. contentBlocks: [
  122. {
  123. type: "demo",
  124. config: {
  125. title: "Mean Total Sunspot Count - Yearly",
  126. data: trendsData,
  127. type: 'line',
  128. height: 300,
  129. colors: ['#238e38'],
  130. axisOptions: {
  131. xAxisMode: 'tick',
  132. yAxisMode: 'span',
  133. xIsSeries: 1
  134. }
  135. },
  136. options: [
  137. {
  138. name: "lineOptions",
  139. path: ["lineOptions"],
  140. type: "map",
  141. mapKeys: ['hideLine', 'hideDots', 'heatline', 'regionFill'],
  142. states: {
  143. "Line": [0, 1, 0, 0],
  144. "Dots": [1, 0, 0, 0],
  145. "HeatLine": [0, 1, 1, 0],
  146. "Region": [0, 1, 0, 1]
  147. },
  148. activeState: "HeatLine"
  149. }
  150. ],
  151. actions: [{ name: "Export ...", fn: "export", args: [] }]
  152. }
  153. ],
  154. },
  155. stateChange: {},
  156. heatmap: {
  157. title: "And a Month-wise Heatmap",
  158. contentBlocks: [
  159. {
  160. type: "demo",
  161. config: {
  162. title: "Monthly Distribution",
  163. data: heatmapData,
  164. type: 'heatmap',
  165. discreteDomains: 1,
  166. countLabel: 'Level',
  167. colors: HEATMAP_COLORS_BLUE,
  168. legendScale: [0, 1, 2, 4, 5]
  169. },
  170. options: [
  171. {
  172. name: "Discrete domains",
  173. path: ["discreteDomains"],
  174. type: 'boolean',
  175. // boolNames: ["Continuous", "Discrete"],
  176. states: { "Discrete": 1, "Continuous": 0 }
  177. },
  178. {
  179. name: "Colors",
  180. path: ["colors"],
  181. type: "object",
  182. states: {
  183. "Green (Default)": [],
  184. "Blue": HEATMAP_COLORS_BLUE,
  185. "GitHub's Halloween": HEATMAP_COLORS_YELLOW
  186. }
  187. }
  188. ],
  189. actions: [{ name: "Export ...", fn: "export", args: [] }]
  190. },
  191. {
  192. type: "code",
  193. lang: "javascript",
  194. content: ` let heatmap = new frappe.Chart("#heatmap", {
  195. type: 'heatmap',
  196. title: "Monthly Distribution",
  197. data: {
  198. dataPoints: {'1524064033': 8, /* ... */},
  199. // object with timestamp-value pairs
  200. start: startDate
  201. end: endDate // Date objects
  202. },
  203. countLabel: 'Level',
  204. discreteDomains: 0 // default: 1
  205. colors: ['#ebedf0', '#c0ddf9', '#73b3f3', '#3886e1', '#17459e'],
  206. // Set of five incremental colors,
  207. // preferably with a low-saturation color for zero data;
  208. // def: ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127']
  209. });`,
  210. }
  211. ],
  212. }
  213. }