https://www.impactpool.org/assets/controllers/google_charts_controller-6b42a88b.js

1import { Controller } from "@hotwired/stimulus";
2import { GoogleCharts } from "google-charts";
3
4export default class extends Controller {
5  connect() {
6    GoogleCharts.load(drawSignupPerWeekChart);
7    GoogleCharts.load(drawPatronsDaysChart);
8    GoogleCharts.load(drawOrdersPerDayChart);
9
10    GoogleCharts.load(drawTalentsPerDayChart);
11    GoogleCharts.load(drawTalentsPerWeekChart);
12    GoogleCharts.load(drawTalentsPerClient);
13  }
14}
15
16function drawTalentsPerClient() {
17  var data = new google.visualization.DataTable();
18
19  data.addColumn("string", "client");
20  data.addColumn("number", "talents");
21
22  const clients = document.querySelector("#talents-per-client").dataset.perClient;
23
24  data.addRows(JSON.parse(clients));
25
26  var options = {
27    legend: {
28      position: "bottom",
29      alignment: "center",
30      maxLines: 3,
31    },
32    height: 500,
33  };
34
35  var chart = new google.visualization.PieChart(document.getElementById("talents-per-client"));
36
37  chart.draw(data, options);
38}
39
40function drawTalentsPerDayChart() {
41  var data = new google.visualization.DataTable();
42
43  data.addColumn("string", "date");
44  data.addColumn("number", "talents");
45
46  const talents = document.querySelector("#talents-days-chart-div").dataset.days;
47
48  data.addRows(JSON.parse(talents));
49
50  var options = {
51    title: "Talents growth in last 30 days",
52    curveType: "function",
53    pointSize: 4,
54    legend: { position: "none" },
55  };
56
57  var chart = new google.visualization.LineChart(document.getElementById("talents-days-chart-div"));
58
59  chart.draw(data, options);
60}
61
62function drawTalentsPerWeekChart() {
63  var data = new google.visualization.DataTable();
64
65  data.addColumn("string", "date");
66  data.addColumn("number", "talents");
67
68  const weeks = document.querySelector("#talents-week-chart-div").dataset.weeks;
69
70  data.addRows(JSON.parse(weeks));
71
72  var options = {
73    title: "Talents growth in last 12 weeks",
74    curveType: "function",
75    pointSize: 4,
76    legend: { position: "none" },
77  };
78
79  var chart = new google.visualization.LineChart(document.getElementById("talents-week-chart-div"));
80
81  chart.draw(data, options);
82}
83
84function drawSignupPerWeekChart() {
85  var data = new google.visualization.DataTable();
86
87  data.addColumn("string", "date");
88  data.addColumn("number", "signups");
89
90  const weeks = document.querySelector("#week-chart-div").dataset.weeks;
91
92  data.addRows(JSON.parse(weeks));
93
94  var options = {
95    title: "Patron Signups per Week",
96    curveType: "function",
97    pointSize: 4,
98    legend: { position: "none" },
99  };
100
101  var chart = new google.visualization.LineChart(document.getElementById("week-chart-div"));
102
103  chart.draw(data, options);
104}
105
106function drawOrdersPerDayChart() {
107  var data = new google.visualization.DataTable();
108
109  data.addColumn("string", "date");
110  data.addColumn("number", "orders");
111
112  const orders = document.querySelector("#orders-chart-div").dataset.orders;
113
114  data.addRows(JSON.parse(orders));
115
116  var options = {
117    title: "Orders per day",
118    curveType: "function",
119    pointSize: 4,
120    legend: { position: "none" },
121  };
122
123  var chart = new google.visualization.LineChart(document.getElementById("orders-chart-div"));
124
125  chart.draw(data, options);
126}
127
128function drawPatronsDaysChart() {
129  var data = new google.visualization.DataTable();
130  data.addColumn("string", "date");
131  data.addColumn("number", "signups");
132
133  const days = document.querySelector("#days-chart-div").dataset.days;
134
135  data.addRows(JSON.parse(days));
136
137  // Set chart options
138  var options = {
139    title: "Patron Signups per Day",
140    curveType: "function",
141    pointSize: 4,
142    pointShape: "circle",
143    legend: { position: "none" },
144  };
145
146  var chart = new google.visualization.LineChart(document.getElementById("days-chart-div"));
147  chart.draw(data, options);
148}