activeinsights 1.0.0 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: e5f5b2bf3d3ddf98282ce8f6af1bf20c3031d4c6cb0c96aee19181a299c3188e
4
- data.tar.gz: 9ba2322043de81074333f23d904d16db5f8e34eaecb550daf8181b4cddb5ff44
3
+ metadata.gz: e21f51380257d374bfb3f74d006a2123a722ca864bf1e369512fc9e4c6dda903
4
+ data.tar.gz: bbe3b3f8ce4ead3694eaa95b4ac6fde74dff9eea40cbd5ae26adc79bb690393b
5
5
  SHA512:
6
- metadata.gz: b6cd3afb0ea5820a67b8b8ffd751b23a33a4d6562ef10d7bbfe42b9eea4ece0949b4be4bf4b1cc13cbd2a5287b31c90316562fb81108e202d3fda1c408571828
7
- data.tar.gz: 3c8c39842143851332bd71bf98c6bbffa74d95c883b39f163756e5892f105505630cfa2a33ac137f4ac49b3a24d7a3d844728acc1b0a9eab53048dd17b6836a6
6
+ metadata.gz: 5508290b981d052175899002bd7cc9b7a4e3793d84ac01ced88a524fd25bf5442545607e28989c25fc9cf31c2c9e898cc1c9f73e92e4f6c811c332064f7649a1
7
+ data.tar.gz: 497aa561b86eb8b1fbc7f930dde745b009dafcb447f37339b8747c19a56888ebd0f60b433b3a8f2fe3f07317c588b52405a74feb00e9ab0ec6035f39433a4daf
data/README.md CHANGED
@@ -36,7 +36,7 @@ $ gem install activeinsights
36
36
 
37
37
  And then install migrations:
38
38
  ```bash
39
- bin/rails active_insights:install
39
+ bin/rails g active_insights:install
40
40
  bin/rails rails db:migrate
41
41
  ```
42
42
 
@@ -0,0 +1,396 @@
1
+ @font-face {
2
+ font-family: 'Calibre';
3
+ font-style: normal;
4
+ font-weight: 400;
5
+ src: url('./calibre-regular.woff2') format('woff2');
6
+ font-display: swap;
7
+ }
8
+
9
+ @font-face {
10
+ font-family: 'Calibre';
11
+ font-style: italic;
12
+ font-weight: 400;
13
+ src: url('./calibre-regular-italic.woff2') format('woff2');
14
+ font-display: swap;
15
+ }
16
+
17
+ @font-face {
18
+ font-family: 'Calibre';
19
+ font-style: normal;
20
+ font-weight: 600;
21
+ src: url('./calibre-semibold.woff2') format('woff2');
22
+ font-display: swap;
23
+ }
24
+
25
+ @font-face {
26
+ font-family: 'Calibre';
27
+ font-style: italic;
28
+ font-weight: 600;
29
+ src: url('./calibre-semibold-italic.woff2') format('woff2');
30
+ font-display: swap;
31
+ }
32
+
33
+ @font-face {
34
+ font-family: 'Calibre';
35
+ font-style: normal;
36
+ font-weight: 700;
37
+ src: url('./calibre-bold.woff2') format('woff2');
38
+ font-display: swap;
39
+ }
40
+
41
+ body {
42
+ background-color: #fff;
43
+ color: #333;
44
+ color-scheme: light dark;
45
+ supported-color-schemes: light dark;
46
+ margin: 0px;
47
+ }
48
+
49
+ body, p, ol, ul, td, input {
50
+ font-family: helvetica, verdana, arial, sans-serif;
51
+ font-size: 15px;
52
+ line-height: 18px;
53
+ }
54
+
55
+ form {
56
+ margin-bottom: 0px;
57
+ }
58
+
59
+ pre {
60
+ font-size: 11px;
61
+ white-space: pre-wrap;
62
+ }
63
+
64
+ pre.box {
65
+ border: 1px solid #EEE;
66
+ padding: 10px;
67
+ margin: 0px;
68
+ width: 958px;
69
+ }
70
+
71
+ header {
72
+ color: #D30001;
73
+ background: rgb(238, 231, 233);
74
+ padding: 0.5em 1.5em;
75
+ display: flex;
76
+ flex-direction: row;
77
+ justify-content: space-between;
78
+ align-items: center;
79
+ }
80
+
81
+ .tooltip {
82
+ background: rgb(238, 231, 233);
83
+ }
84
+
85
+ header h1 {
86
+ font-family: 'Calibre';
87
+ }
88
+
89
+ h1 {
90
+ overflow-wrap: break-word;
91
+ margin: 0.2em 0;
92
+ line-height: 1.1em;
93
+ font-size: 2em;
94
+ }
95
+
96
+ h2 {
97
+ color: #C00;
98
+ line-height: 25px;
99
+ }
100
+
101
+ code.traces {
102
+ font-size: 11px;
103
+ }
104
+
105
+ .response-heading, .request-heading {
106
+ margin-top: 30px;
107
+ }
108
+
109
+ .exception-message {
110
+ padding: 8px 0;
111
+ }
112
+
113
+ .exception-message .message {
114
+ margin-bottom: 8px;
115
+ line-height: 25px;
116
+ font-size: 1.5em;
117
+ font-weight: bold;
118
+ color: #C00;
119
+ }
120
+
121
+ .details {
122
+ border: 1px solid #D0D0D0;
123
+ border-radius: 4px;
124
+ margin: 1em 0px;
125
+ display: block;
126
+ max-width: 978px;
127
+ }
128
+
129
+ .summary {
130
+ padding: 8px 15px;
131
+ border-bottom: 1px solid #D0D0D0;
132
+ display: block;
133
+ }
134
+
135
+ a.summary {
136
+ color: #F0F0F0;
137
+ text-decoration: none;
138
+ background: #C52F24;
139
+ border-bottom: none;
140
+ }
141
+
142
+ .details pre {
143
+ margin: 5px;
144
+ border: none;
145
+ }
146
+
147
+ #container {
148
+ box-sizing: border-box;
149
+ width: 100%;
150
+ padding: 0 1.5em;
151
+ }
152
+
153
+ .source * {
154
+ margin: 0px;
155
+ padding: 0px;
156
+ }
157
+
158
+ .source {
159
+ border: 1px solid #D9D9D9;
160
+ background: #ECECEC;
161
+ max-width: 978px;
162
+ }
163
+
164
+ .source pre {
165
+ padding: 10px 0px;
166
+ border: none;
167
+ }
168
+
169
+ .source .data {
170
+ font-size: 80%;
171
+ overflow: auto;
172
+ background-color: #FFF;
173
+ }
174
+
175
+ .info {
176
+ padding: 0.5em;
177
+ }
178
+
179
+ .source .data .line_numbers {
180
+ background-color: #ECECEC;
181
+ color: #555;
182
+ padding: 1em .5em;
183
+ border-right: 1px solid #DDD;
184
+ text-align: right;
185
+ }
186
+
187
+ .line {
188
+ padding-left: 10px;
189
+ white-space: pre;
190
+ }
191
+
192
+ .line:hover {
193
+ background-color: #F6F6F6;
194
+ }
195
+
196
+ .line.active {
197
+ background-color: #FCC;
198
+ }
199
+
200
+ .error_highlight {
201
+ display: inline-block;
202
+ background-color: #FF9;
203
+ text-decoration: #F00 wavy underline;
204
+ }
205
+
206
+ .error_highlight_tip {
207
+ color: #666;
208
+ padding: 2px 2px;
209
+ font-size: 10px;
210
+ }
211
+
212
+ .button_to {
213
+ display: inline-block;
214
+ margin-top: 0.75em;
215
+ margin-bottom: 0.75em;
216
+ }
217
+
218
+ .hidden {
219
+ display: none;
220
+ }
221
+
222
+ .red {
223
+ color: #D30001;
224
+ }
225
+
226
+ .calibre {
227
+ font-family: 'Calibre';
228
+ }
229
+
230
+ .link {
231
+ color: #261B23;
232
+ font-size: 20px;
233
+ &:hover {
234
+ color: #D30001;
235
+ }
236
+ }
237
+
238
+ .datepicker {
239
+ background-color: #D30001;
240
+ border-radius: 9999px;
241
+ padding-left: 15px;
242
+ padding-right: 15px;
243
+ padding-top: 5px;
244
+ padding-bottom: 5px;
245
+ border: none;
246
+ cursor: pointer;
247
+ }
248
+
249
+ .correction {
250
+ list-style-type: none;
251
+ }
252
+
253
+ input[type="submit"] {
254
+ color: white;
255
+ background-color: #C00;
256
+ border: none;
257
+ border-radius: 12px;
258
+ box-shadow: 0 3px #F99;
259
+ font-size: 13px;
260
+ font-weight: bold;
261
+ margin: 0;
262
+ padding: 10px 18px;
263
+ cursor: pointer;
264
+ -webkit-appearance: none;
265
+ }
266
+ input[type="submit"]:focus,
267
+ input[type="submit"]:hover {
268
+ opacity: 0.8;
269
+ }
270
+ input[type="submit"]:active {
271
+ box-shadow: 0 2px #F99;
272
+ transform: translateY(1px)
273
+ }
274
+
275
+ a.trace-frames {
276
+ color: #666;
277
+ overflow-wrap: break-word;
278
+ }
279
+ a:hover, a.trace-frames.selected { color: #C00; }
280
+ a.summary:hover { color: #FFF; }
281
+
282
+ table {
283
+ margin: 0;
284
+ border-collapse: collapse;
285
+ word-wrap:break-word;
286
+ table-layout: auto;
287
+ width: 100%;
288
+ margin-top: 50px;
289
+ }
290
+
291
+ table thead tr {
292
+ border-bottom: 3px solid rgba(38,27,35,0.1);
293
+ }
294
+
295
+ table th {
296
+ padding-left: 30px;
297
+ text-align: left;
298
+ font-family: 'Calibre';
299
+ font-size: 20px;
300
+ }
301
+
302
+ table tbody tr {
303
+ border-bottom: 3px solid rgba(38,27,35,0.1);
304
+ td {
305
+ font-family: 'Calibre';
306
+ font-size: 20px;
307
+
308
+ a {
309
+ color: #261B23;
310
+ &:hover {
311
+ color: #D30001;
312
+ }
313
+ }
314
+ }
315
+ }
316
+
317
+ table tbody tr:nth-child(odd) {
318
+ background: rgb(238, 231, 233);
319
+ }
320
+
321
+ table td {
322
+ padding: 10px 30px;
323
+ }
324
+
325
+ .pl-30px {
326
+ padding-left: 30px;
327
+ }
328
+
329
+ .pt-30px {
330
+ padding-top: 30px;
331
+ }
332
+
333
+ .flex {
334
+ display: flex;
335
+ }
336
+
337
+ .flex-col {
338
+ flex-direction: column;
339
+ }
340
+ .flex-row {
341
+ flex-direction: row;
342
+ }
343
+ .justify-around {
344
+ justify-content: space-around;
345
+ }
346
+
347
+ .justify-center {
348
+ justify-content: center;
349
+ }
350
+ .items-center {
351
+ align-items: center;
352
+ }
353
+ .font-size-30 {
354
+ font-size: 30px;
355
+ line-height: 30px;
356
+ }
357
+ .no-underline {
358
+ text-decoration: none;
359
+ }
360
+ .p-16px {
361
+ padding: 16px;
362
+ }
363
+
364
+ a.white {
365
+ color: #fff;
366
+ }
367
+ .mr-15px {
368
+ margin-right: 15px;
369
+ }
370
+ .button {
371
+ transition: all 0.25s cubic-bezier(0.33, 1, 0.68, 1);
372
+ padding: 5px 20px;
373
+ border-radius: 6px;
374
+
375
+ &:hover {
376
+ background: #F0E7E9;
377
+ }
378
+ }
379
+ .relative {
380
+ position: relative;
381
+ }
382
+ .absolute {
383
+ position: absolute;
384
+ }
385
+ .h-400px {
386
+ height: 400px;
387
+ }
388
+ .h-100 {
389
+ height: 100%;
390
+ }
391
+ .text-center {
392
+ text-align: center;
393
+ }
394
+ .w-175px {
395
+ width: 175px;
396
+ }
@@ -6,6 +6,8 @@ module ActiveInsights
6
6
  @p50 = minutes.map{ |minute| [minute.pretty_started_at, minute.p50] }
7
7
  @p95 = minutes.map{ |minute| [minute.pretty_started_at, minute.p95] }
8
8
  @p99 = minutes.map{ |minute| [minute.pretty_started_at, minute.p99] }
9
+
10
+ fetch_jpm
9
11
  end
10
12
 
11
13
  def redirection
@@ -29,5 +31,14 @@ module ActiveInsights
29
31
  def job
30
32
  params[:job].presence
31
33
  end
34
+
35
+ def fetch_jpm
36
+ return if job.blank?
37
+
38
+ @jpm =
39
+ minutes.select("COUNT(id) AS jpm").map do |minute|
40
+ [minute.started_at.strftime("%-l:%M%P"), minute.jpm]
41
+ end
42
+ end
32
43
  end
33
44
  end
@@ -6,6 +6,8 @@ module ActiveInsights
6
6
  @p50 = minutes.map{ |minute| [minute.pretty_started_at, minute.p50] }
7
7
  @p95 = minutes.map{ |minute| [minute.pretty_started_at, minute.p95] }
8
8
  @p99 = minutes.map{ |minute| [minute.pretty_started_at, minute.p99] }
9
+
10
+ fetch_rpm
9
11
  end
10
12
 
11
13
  def redirection
@@ -31,5 +33,14 @@ module ActiveInsights
31
33
  def formatted_controller
32
34
  params[:formatted_controller].presence
33
35
  end
36
+
37
+ def fetch_rpm
38
+ return if formatted_controller.blank?
39
+
40
+ @rpm =
41
+ minutes.select("COUNT(id) AS rpm").map do |minute|
42
+ [minute.started_at.strftime("%-l:%M%P"), minute.rpm]
43
+ end
44
+ end
34
45
  end
35
46
  end
@@ -9,5 +9,9 @@ module ActiveInsights
9
9
  :db_runtime
10
10
  ))
11
11
  end
12
+
13
+ def percentage(others)
14
+ (parsed_durations.sum / others.flat_map(&:parsed_durations).sum) * 100.0
15
+ end
12
16
  end
13
17
  end
@@ -1,10 +1,10 @@
1
1
  <header>
2
2
  <h1>Metrics for <%= display_date(@date.first) %></h1>
3
3
  <div class="flex flex-row items-center">
4
- <%= link_to "View request metrics", active_insights.requests_path, class: "white mr-15px" %>
4
+ <%= link_to "View request metrics", active_insights.requests_path, class: "link calibre mr-15px" %>
5
5
 
6
6
  <%= form_with url: active_insights.jobs_path, method: :get do |f| %>
7
- <%= f.date_field :date, max: Date.current, onchange: "this.form.submit()", value: @date.first.to_date %>
7
+ <%= f.date_field :date, max: Date.current, onchange: "this.form.submit()", class: "datepicker", value: @date.first.to_date %>
8
8
  <% f.submit "submit", class: "hidden" %>
9
9
  <% end %>
10
10
  </div>
@@ -12,27 +12,27 @@
12
12
 
13
13
  <div class="pl-30px pt-30px flex flex-row justify-around font-size-30">
14
14
  <% @jobs.flat_map(&:parsed_durations).tap do |durations| %>
15
- <%= link_to jpm_path(@date.first.to_date), class: "flex flex-col justify-center items-center no-underline" do %>
15
+ <%= link_to jpm_path(@date.first.to_date), class: "button calibre red flex flex-col justify-center items-center no-underline" do %>
16
16
  <div><%= per_minute(durations.size, (@date.last - @date.first).seconds) %></div>
17
17
  <b>JPM</b>
18
18
  <% end %>
19
19
 
20
- <%= link_to jobs_p_values_path(@date.first.to_date), class: "flex flex-col justify-center items-center no-underline" do %>
20
+ <%= link_to jobs_p_values_path(@date.first.to_date), class: "button calibre red flex flex-col justify-center items-center no-underline" do %>
21
21
  <div><%= p50(durations) %> ms</div>
22
22
  <b>p50</b>
23
23
  <% end %>
24
24
 
25
- <%= link_to jobs_p_values_path(@date.first.to_date), class: "flex flex-col justify-center items-center no-underline" do %>
25
+ <%= link_to jobs_p_values_path(@date.first.to_date), class: "button calibre red flex flex-col justify-center items-center no-underline" do %>
26
26
  <div><%= p95(durations) %> ms</div>
27
27
  <b>p95</b>
28
28
  <% end %>
29
29
 
30
- <%= link_to jobs_p_values_path(@date.first.to_date), class: "flex flex-col justify-center items-center no-underline" do %>
30
+ <%= link_to jobs_p_values_path(@date.first.to_date), class: "button calibre red flex flex-col justify-center items-center no-underline" do %>
31
31
  <div><%= p99(durations) %> ms</div>
32
32
  <b>p99</b>
33
33
  <% end %>
34
34
 
35
- <%= link_to jobs_latency_path(@date.first.to_date), class: "flex flex-col justify-center items-center no-underline" do %>
35
+ <%= link_to jobs_latency_path(@date.first.to_date), class: "button calibre red flex flex-col justify-center items-center no-underline" do %>
36
36
  <div><%= @latency.to_f.round(1) %> ms</div>
37
37
  <b>Latency</b>
38
38
  <% end %>
@@ -2,26 +2,17 @@
2
2
  <h1>Job Latency for <%= display_date(@date.first) %> (in ms)</h1>
3
3
 
4
4
  <%= form_with url: active_insights.jobs_latency_redirection_path, method: :get do |f| %>
5
- <%= f.date_field :date, max: Date.current, onchange: "this.form.submit()", value: @date.first.to_date %>
5
+ <%= f.date_field :date, max: Date.current, onchange: "this.form.submit()", class: "datepicker", value: @date.first.to_date %>
6
6
  <% f.submit "submit", class: "hidden" %>
7
7
  <% end %>
8
8
  </header>
9
9
 
10
10
  <div class="p-16px">
11
- <%= column_chart @latencies, height: "80%", colors: ["#C00"], library: {
11
+ <%= column_chart @latencies, height: "400px", colors: ["#C00"], library: {
12
12
  borderSkipped: true, barPercentage: 1, categoryPercentage: 1,
13
- plugins: { zoom: { zoom: { wheel: { enabled: false }, drag: { enabled: true, backgroundColor: 'rgba(225,225,225,0.5)' }, mode: 'x' } } },
13
+ plugins: { tooltip: { backgroundColor: 'rgb(238, 231, 233)', cornerRadius: 5, bodyColor: "#000", bodyAlign: 'center', bodyFont: { size: 20, family: "Calibre" }, titleColor: "#000", titleFont: { size: 20, family: "Calibre" } }, zoom: { zoom: { wheel: { enabled: false }, drag: { enabled: true, backgroundColor: 'rgb(238, 231, 233)' }, mode: 'x' } } },
14
14
  scales: {
15
- x: { barPercentage: 1.0, autoSkip: false, display: false },
16
- y: { grid: { display: false }, ticks: { color: "white" }, min: (@latencies.map(&:second).min.to_f * 0.98).ceil, max: (@latencies.map(&:second).max) }
15
+ x: { border: { color: "rgb(238, 231, 233)" }, barPercentage: 1.0, grid: { color: "rgb(238, 231, 233)" }, ticks: { color: "#000", font: { size: 16, family: "Calibre" } }, autoSkip: false, display: true },
16
+ y: { border: { color: "rgb(238, 231, 233)" }, grid: { display: false }, ticks: { font: { size: 16, family: "Calibre" }, color: "#000" }, min: (@latencies.map(&:second).min.to_f * 0.98).ceil, max: (@latencies.map(&:second).max) }
17
17
  } } %>
18
18
  </div>
19
-
20
- <script>
21
- document.addEventListener('keydown',(event) => {
22
- const chart = Chartkick.charts[Object.keys(Chartkick.charts)[0]].getChartObject()
23
- if (event.key === 'Escape' || event.key === 'Esc') {
24
- chart.resetZoom()
25
- }
26
- });
27
- </script>
@@ -1,32 +1,37 @@
1
1
  <header>
2
2
  <% if params[:job].present? %>
3
- <h1><%= params[:job] %> metrics for <%= display_date(@date.first) %> (in ms)</h1>
3
+ <h1><%= params[:job] %> metrics for <%= display_date(@date.first) %></h1>
4
4
  <% else %>
5
5
  <h1>Job Metrics for <%= display_date(@date.first) %> (in ms)</h1>
6
6
  <% end %>
7
7
 
8
8
  <%= form_with url: active_insights.jobs_p_values_redirection_path, method: :get do |f| %>
9
9
  <%= f.hidden_field :job, value: params[:job] %>
10
- <%= f.date_field :date, max: Date.current, onchange: "this.form.submit()", value: @date.first.to_date %>
10
+ <%= f.date_field :date, max: Date.current, onchange: "this.form.submit()", class: "datepicker", value: @date.first.to_date %>
11
11
  <% f.submit "submit", class: "hidden" %>
12
12
  <% end %>
13
13
  </header>
14
14
 
15
- <div class="p-16px">
16
- <%= line_chart [{ name: "p50", data: @p50 }, { name: "p95", data: @p95 }, { name: "p99", data: @p99 }], height: "80%", colors: ["rgb(255, 249, 216)", "green", "#C00"], library: {
17
- plugins: { zoom: { zoom: { wheel: { enabled: false }, drag: { enabled: true, backgroundColor: 'rgba(225,225,225,0.5)' }, mode: 'x' } }, decimation: { enabled: true, algorithm: 'lttb' } },
15
+ <div class="p-16px flex items-center">
16
+ <h1 class="red calibre text-center w-175px">Response Times <br> (in ms)</h1>
17
+ <%= line_chart [{ name: "p50", data: @p50 }, { name: "p95", data: @p95 }, { name: "p99", data: @p99 }], height: "500px", colors: ["#C00", "rgb(223, 180, 115)", "#000"], library: {
18
+ plugins: { legend: { position: "bottom" }, tooltip: { backgroundColor: 'rgb(238, 231, 233)', cornerRadius: 5, bodyColor: "#000", bodyAlign: 'center', bodyFont: { size: 20, family: "Calibre" }, titleColor: "#000", titleFont: { size: 20, family: "Calibre" } }, zoom: { zoom: { wheel: { enabled: false }, drag: { enabled: true, backgroundColor: 'rgb(238, 231, 233)' }, mode: 'x' } } },
18
19
  elements: { point: { radius: 0 } },
19
20
  scales: {
20
- x: { autoSkip: false, display: false },
21
- y: { grid: { display: false }, ticks: { color: "white" }, min: (@p50.map(&:second).min.to_f * 0.98).ceil, max: (@p99.map(&:second).max) }
21
+ x: { border: { color: "rgb(238, 231, 233)" }, grid: { color: "rgb(238, 231, 233)" }, ticks: { color: "#000", font: { size: 16, family: "Calibre" } }, autoSkip: false, display: true },
22
+ y: { border: { color: "rgb(238, 231, 233)" }, grid: { display: false }, ticks: { font: { size: 16, family: "Calibre" }, color: "#000" }, min: (@p50.map(&:second).min.to_f * 0.98).ceil, max: (@p99.map(&:second).max) }
22
23
  } } %>
23
24
  </div>
24
25
 
25
- <script>
26
- document.addEventListener('keydown',(event) => {
27
- const chart = Chartkick.charts[Object.keys(Chartkick.charts)[0]].getChartObject()
28
- if (event.key === 'Escape' || event.key === 'Esc') {
29
- chart.resetZoom()
30
- }
31
- });
32
- </script>
26
+ <% if @jpm %>
27
+ <div class="p-16px flex items-center">
28
+ <h1 class="red calibre text-center w-175px">JPM</h1>
29
+ <%= column_chart @jpm, height: "400px", colors: ["#C00"], library: {
30
+ borderSkipped: true, barPercentage: 1, categoryPercentage: 1,
31
+ plugins: { tooltip: { backgroundColor: 'rgb(238, 231, 233)', cornerRadius: 5, bodyColor: "#000", bodyAlign: 'center', bodyFont: { size: 20, family: "Calibre" }, titleColor: "#000", titleFont: { size: 20, family: "Calibre" } }, zoom: { zoom: { wheel: { enabled: false }, drag: { enabled: true, backgroundColor: 'rgb(238, 231, 233)' }, mode: 'x' } } },
32
+ scales: {
33
+ x: { border: { color: "rgb(238, 231, 233)" }, barPercentage: 1.0, grid: { color: "rgb(238, 231, 233)" }, ticks: { color: "#000", font: { size: 16, family: "Calibre" } }, autoSkip: false, display: true },
34
+ y: { border: { color: "rgb(238, 231, 233)" }, grid: { display: false }, ticks: { font: { size: 16, family: "Calibre" }, color: "#000" }, min: (@jpm.map(&:second).min.to_f * 0.98).ceil, max: (@jpm.map(&:second).max) }
35
+ } } %>
36
+ </div>
37
+ <% end %>
@@ -1,26 +1,17 @@
1
1
  <header>
2
2
  <h1>JPM Metrics for <%= display_date(@date.first) %></h1>
3
3
  <%= form_with url: active_insights.jpm_redirection_path, method: :get do |f| %>
4
- <%= f.date_field :date, max: Date.current, onchange: "this.form.submit()", value: @date.first.to_date %>
4
+ <%= f.date_field :date, max: Date.current, onchange: "this.form.submit()", class: "datepicker", value: @date.first.to_date %>
5
5
  <% f.submit "submit", class: "hidden" %>
6
6
  <% end %>
7
7
  </header>
8
8
 
9
- <div class="p-16px">
10
- <%= column_chart @minutes, height: "80%", colors: ["#C00"], library: {
9
+ <div class="p-16px flex items-center h-100">
10
+ <%= column_chart @minutes, height: "400px", colors: ["#C00"], library: {
11
11
  borderSkipped: true, barPercentage: 1, categoryPercentage: 1,
12
- plugins: { zoom: { zoom: { wheel: { enabled: false }, drag: { enabled: true, backgroundColor: 'rgba(225,225,225,0.5)' }, mode: 'x' } } },
12
+ plugins: { tooltip: { backgroundColor: 'rgb(238, 231, 233)', cornerRadius: 5, bodyColor: "#000", bodyAlign: 'center', bodyFont: { size: 20, family: "Calibre" }, titleColor: "#000", titleFont: { size: 20, family: "Calibre" } }, zoom: { zoom: { wheel: { enabled: false }, drag: { enabled: true, backgroundColor: 'rgb(238, 231, 233)' }, mode: 'x' } } },
13
13
  scales: {
14
- x: { barPercentage: 1.0, autoSkip: false, display: false },
15
- y: { grid: { display: false }, ticks: { color: "white" }, min: (@minutes.map(&:second).min.to_f * 0.98).ceil, max: (@minutes.map(&:second).max) }
14
+ x: { border: { color: "rgb(238, 231, 233)" }, barPercentage: 1.0, grid: { color: "rgb(238, 231, 233)" }, ticks: { color: "#000", font: { size: 16, family: "Calibre" } }, autoSkip: false, display: true },
15
+ y: { border: { color: "rgb(238, 231, 233)" }, grid: { display: false }, ticks: { font: { size: 16, family: "Calibre" }, color: "#000" }, min: (@minutes.map(&:second).min.to_f * 0.98).ceil, max: (@minutes.map(&:second).max) }
16
16
  } } %>
17
17
  </div>
18
-
19
- <script>
20
- document.addEventListener('keydown',(event) => {
21
- const chart = Chartkick.charts[Object.keys(Chartkick.charts)[0]].getChartObject()
22
- if (event.key === 'Escape' || event.key === 'Esc') {
23
- chart.resetZoom()
24
- }
25
- });
26
- </script>