j1-template 2022.5.0.rc1 → 2022.5.0.rc4

data/lib/starter_web/pages/public/_jupyter/notebooks/textbooks/Logs Dashboard.html

@@ -0,0 +1,455 @@
+  <div class="cell text_cell">
+    <button class="js-nbinteract-widget">
+      Loading widgets...
+    </button>
+  </div>
+
+
+
+<div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
+<div class="text_cell_render border-box-sizing rendered_html">
+<h2 id="Logs-Analytics-Dashboard">Logs Analytics Dashboard<a class="anchor-link" href="#Logs-Analytics-Dashboard">&#182;</a></h2><p>This dashboard can be used for performing visual analytics on the server log files. You can interact with any chart in the dashboard, like so:</p>
+<ol>
+<li>Click on a bar in any bar chart to filter the whole dataset by that bar's value</li>
+<li>Click on a slice of any pie chart to filter the whole dataset by that pie slices value</li>
+</ol>
+<p>Fun things to try:</p>
+<ol>
+<li>Select any specific day in the <code>Daily Events</code> bar chart (for e.g. why do first and last days have fewer events?)</li>
+<li>Find out which product queries resulted in server error (click on <code>Server Error</code> slice of <code>Events By Status</code> pie chart)</li>
+</ol>
+
+</div>
+</div>
+</div>
+
+  
+
+  <div class="
+      cell border-box-sizing code_cell rendered">
+    <div class="input">
+
+<div class="inner_cell">
+    <div class="input_area">
+<div class=" highlight hl-ipython3"><pre><span></span><span class="kn">import</span> <span class="nn">numpy</span> <span class="k">as</span> <span class="nn">np</span>
+<span class="kn">import</span> <span class="nn">pandas</span> <span class="k">as</span> <span class="nn">pd</span>
+
+<span class="kn">import</span> <span class="nn">ipywidgets</span> <span class="k">as</span> <span class="nn">widgets</span>
+<span class="kn">import</span> <span class="nn">bqplot</span> <span class="k">as</span> <span class="nn">bq</span>
+<span class="kn">import</span> <span class="nn">bqplot.pyplot</span> <span class="k">as</span> <span class="nn">plt</span>
+</pre></div>
+
+    </div>
+</div>
+</div>
+
+  </div>
+
+  
+
+  <div class="
+      cell border-box-sizing code_cell rendered">
+    <div class="input">
+
+<div class="inner_cell">
+    <div class="input_area">
+<div class=" highlight hl-ipython3"><pre><span></span><span class="k">def</span> <span class="nf">get_status_code</span><span class="p">(</span><span class="n">x</span><span class="p">):</span>
+    <span class="sd">&quot;&quot;&quot;</span>
+<span class="sd">    map integer http status to  string status code</span>
+<span class="sd">    &quot;&quot;&quot;</span>
+    <span class="k">if</span> <span class="n">x</span> <span class="o">&gt;=</span> <span class="mi">200</span> <span class="ow">and</span> <span class="n">x</span> <span class="o">&lt;</span> <span class="mi">300</span><span class="p">:</span>
+        <span class="k">return</span> <span class="s2">&quot;SUCCESS&quot;</span>
+    <span class="k">elif</span> <span class="n">x</span> <span class="o">&gt;=</span> <span class="mi">300</span> <span class="ow">and</span> <span class="n">x</span> <span class="o">&lt;</span> <span class="mi">400</span><span class="p">:</span>
+        <span class="k">return</span> <span class="s2">&quot;REDIRECT&quot;</span>
+    <span class="k">elif</span> <span class="n">x</span> <span class="o">&gt;=</span> <span class="mi">400</span> <span class="ow">and</span> <span class="n">x</span> <span class="o">&lt;</span> <span class="mi">500</span><span class="p">:</span>
+        <span class="k">return</span> <span class="s2">&quot;CLIENT ERROR&quot;</span>
+    <span class="k">elif</span> <span class="n">x</span> <span class="o">&gt;=</span> <span class="mi">500</span><span class="p">:</span>
+        <span class="k">return</span> <span class="s2">&quot;SERVER ERROR&quot;</span>
+</pre></div>
+
+    </div>
+</div>
+</div>
+
+  </div>
+
+  
+
+  <div class="
+      cell border-box-sizing code_cell rendered">
+    <div class="input">
+
+<div class="inner_cell">
+    <div class="input_area">
+<div class=" highlight hl-ipython3"><pre><span></span><span class="k">def</span> <span class="nf">get_events_by_hour</span><span class="p">(</span><span class="n">log_data_slice</span><span class="p">):</span>
+    <span class="sd">&quot;&quot;&quot;</span>
+<span class="sd">    get event counts by hour</span>
+<span class="sd">    &quot;&quot;&quot;</span>
+    <span class="k">return</span> <span class="p">(</span>
+        <span class="n">log_data_slice</span><span class="p">[</span><span class="s2">&quot;status_code&quot;</span><span class="p">]</span>
+        <span class="o">.</span><span class="n">groupby</span><span class="p">(</span><span class="k">lambda</span> <span class="n">x</span><span class="p">:</span> <span class="n">x</span><span class="o">.</span><span class="n">hour</span><span class="p">)</span>
+        <span class="o">.</span><span class="n">count</span><span class="p">()</span>
+        <span class="o">.</span><span class="n">reindex</span><span class="p">(</span><span class="n">np</span><span class="o">.</span><span class="n">arange</span><span class="p">(</span><span class="mi">24</span><span class="p">))</span>
+        <span class="o">.</span><span class="n">fillna</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span>
+    <span class="p">)</span>
+</pre></div>
+
+    </div>
+</div>
+</div>
+
+  </div>
+
+  
+
+  <div class="
+      cell border-box-sizing code_cell rendered">
+    <div class="input">
+
+<div class="inner_cell">
+    <div class="input_area">
+<div class=" highlight hl-ipython3"><pre><span></span><span class="c1"># load data into pandas and do some munging</span>
+<span class="n">log_data</span> <span class="o">=</span> <span class="n">pd</span><span class="o">.</span><span class="n">read_csv</span><span class="p">(</span><span class="s2">&quot;access.log&quot;</span><span class="p">,</span> <span class="n">sep</span><span class="o">=</span><span class="s2">&quot; &quot;</span><span class="p">,</span> <span class="n">header</span><span class="o">=</span><span class="kc">None</span><span class="p">)</span>
+<span class="n">log_data</span><span class="o">.</span><span class="n">drop</span><span class="p">([</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">],</span> <span class="n">axis</span><span class="o">=</span><span class="mi">1</span><span class="p">,</span> <span class="n">inplace</span><span class="o">=</span><span class="kc">True</span><span class="p">)</span>
+<span class="n">log_data</span><span class="o">.</span><span class="n">columns</span> <span class="o">=</span> <span class="p">[</span>
+    <span class="s2">&quot;ip_address&quot;</span><span class="p">,</span>
+    <span class="s2">&quot;timestamp&quot;</span><span class="p">,</span>
+    <span class="s2">&quot;request&quot;</span><span class="p">,</span>
+    <span class="s2">&quot;status&quot;</span><span class="p">,</span>
+    <span class="s2">&quot;col1&quot;</span><span class="p">,</span>
+    <span class="s2">&quot;url&quot;</span><span class="p">,</span>
+    <span class="s2">&quot;agent&quot;</span><span class="p">,</span>
+    <span class="s2">&quot;col2&quot;</span><span class="p">,</span>
+<span class="p">]</span>
+
+<span class="n">log_data</span><span class="o">.</span><span class="n">index</span> <span class="o">=</span> <span class="n">pd</span><span class="o">.</span><span class="n">to_datetime</span><span class="p">(</span>
+    <span class="n">log_data</span><span class="p">[</span><span class="s2">&quot;timestamp&quot;</span><span class="p">]</span><span class="o">.</span><span class="n">str</span><span class="o">.</span><span class="n">replace</span><span class="p">(</span><span class="s2">&quot;[\[\]]&quot;</span><span class="p">,</span> <span class="s2">&quot;&quot;</span><span class="p">),</span> <span class="nb">format</span><span class="o">=</span><span class="s2">&quot;</span><span class="si">%d</span><span class="s2">/%b/%Y:%H:%M:%S&quot;</span>
+<span class="p">)</span>
+<span class="n">log_data</span><span class="o">.</span><span class="n">drop</span><span class="p">(</span><span class="s2">&quot;timestamp&quot;</span><span class="p">,</span> <span class="n">axis</span><span class="o">=</span><span class="mi">1</span><span class="p">,</span> <span class="n">inplace</span><span class="o">=</span><span class="kc">True</span><span class="p">)</span>
+
+<span class="c1"># add extra columns for easy querying</span>
+<span class="n">log_data</span><span class="p">[</span><span class="s2">&quot;status_code&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="n">log_data</span><span class="p">[</span><span class="s2">&quot;status&quot;</span><span class="p">]</span><span class="o">.</span><span class="n">map</span><span class="p">(</span><span class="n">get_status_code</span><span class="p">)</span>
+<span class="n">log_data</span><span class="p">[</span><span class="s2">&quot;category&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="n">log_data</span><span class="p">[</span><span class="s2">&quot;request&quot;</span><span class="p">]</span><span class="o">.</span><span class="n">str</span><span class="o">.</span><span class="n">extract</span><span class="p">(</span><span class="s2">&quot;categoryId=(.*)&amp;&quot;</span><span class="p">,</span> <span class="n">expand</span><span class="o">=</span><span class="kc">False</span><span class="p">)</span>
+<span class="n">log_data</span><span class="p">[</span><span class="s2">&quot;product&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="n">log_data</span><span class="p">[</span><span class="s2">&quot;request&quot;</span><span class="p">]</span><span class="o">.</span><span class="n">str</span><span class="o">.</span><span class="n">extract</span><span class="p">(</span><span class="s2">&quot;productId=(.*)&amp;&quot;</span><span class="p">,</span> <span class="n">expand</span><span class="o">=</span><span class="kc">False</span><span class="p">)</span>
+<span class="n">log_data</span><span class="p">[</span><span class="s2">&quot;hour&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="n">log_data</span><span class="o">.</span><span class="n">index</span><span class="o">.</span><span class="n">map</span><span class="p">(</span><span class="k">lambda</span> <span class="n">x</span><span class="p">:</span> <span class="n">x</span><span class="o">.</span><span class="n">hour</span><span class="p">)</span>
+<span class="n">log_data</span><span class="p">[</span><span class="s2">&quot;day&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="n">log_data</span><span class="o">.</span><span class="n">index</span><span class="o">.</span><span class="n">strftime</span><span class="p">(</span><span class="s2">&quot;%Y-%m-</span><span class="si">%d</span><span class="s2">&quot;</span><span class="p">)</span>
+</pre></div>
+
+    </div>
+</div>
+</div>
+
+  </div>
+
+  
+
+  <div class="
+      cell border-box-sizing code_cell rendered">
+    <div class="input">
+
+<div class="inner_cell">
+    <div class="input_area">
+<div class=" highlight hl-ipython3"><pre><span></span><span class="n">all_days</span> <span class="o">=</span> <span class="n">log_data</span><span class="p">[</span><span class="s2">&quot;day&quot;</span><span class="p">]</span><span class="o">.</span><span class="n">value_counts</span><span class="p">()</span><span class="o">.</span><span class="n">index</span>
+<span class="n">all_hours</span> <span class="o">=</span> <span class="n">np</span><span class="o">.</span><span class="n">arange</span><span class="p">(</span><span class="mi">24</span><span class="p">)</span>
+<span class="n">all_categories</span> <span class="o">=</span> <span class="nb">list</span><span class="p">(</span><span class="n">log_data</span><span class="p">[</span><span class="s2">&quot;category&quot;</span><span class="p">]</span><span class="o">.</span><span class="n">value_counts</span><span class="p">()</span><span class="o">.</span><span class="n">index</span><span class="p">)</span>
+<span class="n">all_products</span> <span class="o">=</span> <span class="nb">list</span><span class="p">(</span><span class="n">log_data</span><span class="p">[</span><span class="s2">&quot;product&quot;</span><span class="p">]</span><span class="o">.</span><span class="n">value_counts</span><span class="p">()</span><span class="o">.</span><span class="n">index</span><span class="p">)</span>
+<span class="n">all_status_codes</span> <span class="o">=</span> <span class="nb">list</span><span class="p">(</span><span class="n">log_data</span><span class="p">[</span><span class="s2">&quot;status_code&quot;</span><span class="p">]</span><span class="o">.</span><span class="n">value_counts</span><span class="p">()</span><span class="o">.</span><span class="n">index</span><span class="p">)</span>
+
+<span class="n">category_colors</span> <span class="o">=</span> <span class="nb">dict</span><span class="p">(</span><span class="nb">zip</span><span class="p">(</span><span class="n">all_categories</span><span class="p">,</span> <span class="n">bq</span><span class="o">.</span><span class="n">CATEGORY10</span><span class="p">))</span>
+<span class="n">status_label_colors</span> <span class="o">=</span> <span class="nb">dict</span><span class="p">(</span>
+    <span class="p">[(</span><span class="s2">&quot;SUCCESS&quot;</span><span class="p">,</span> <span class="s2">&quot;#006d2c&quot;</span><span class="p">),</span> <span class="p">(</span><span class="s2">&quot;CLIENT ERROR&quot;</span><span class="p">,</span> <span class="s2">&quot;#fc8d59&quot;</span><span class="p">),</span> <span class="p">(</span><span class="s2">&quot;SERVER ERROR&quot;</span><span class="p">,</span> <span class="s2">&quot;#a63603&quot;</span><span class="p">)]</span>
+<span class="p">)</span>
+</pre></div>
+
+    </div>
+</div>
+</div>
+
+  </div>
+
+  
+
+  <div class="
+      cell border-box-sizing code_cell rendered">
+    <div class="input">
+
+<div class="inner_cell">
+    <div class="input_area">
+<div class=" highlight hl-ipython3"><pre><span></span><span class="c1"># daily events bar chart</span>
+<span class="n">daily_events_fig</span> <span class="o">=</span> <span class="n">plt</span><span class="o">.</span><span class="n">figure</span><span class="p">(</span>
+    <span class="n">title</span><span class="o">=</span><span class="s2">&quot;Daily Events&quot;</span><span class="p">,</span>
+    <span class="n">animation_duration</span><span class="o">=</span><span class="mi">1000</span><span class="p">,</span>
+    <span class="n">layout</span><span class="o">=</span><span class="n">widgets</span><span class="o">.</span><span class="n">Layout</span><span class="p">(</span><span class="n">width</span><span class="o">=</span><span class="s2">&quot;900px&quot;</span><span class="p">,</span> <span class="n">height</span><span class="o">=</span><span class="s2">&quot;500px&quot;</span><span class="p">),</span>
+<span class="p">)</span>
+
+<span class="n">plt</span><span class="o">.</span><span class="n">scales</span><span class="p">(</span><span class="n">scales</span><span class="o">=</span><span class="p">{</span><span class="s2">&quot;x&quot;</span><span class="p">:</span> <span class="n">bq</span><span class="o">.</span><span class="n">DateScale</span><span class="p">()})</span>
+
+<span class="c1"># intsel = BrushIntervalSelector(scale=, marks=[hist])</span>
+<span class="n">bar_axes_options</span> <span class="o">=</span> <span class="p">{</span><span class="s2">&quot;x&quot;</span><span class="p">:</span> <span class="p">{</span><span class="s2">&quot;grid_lines&quot;</span><span class="p">:</span> <span class="s2">&quot;none&quot;</span><span class="p">},</span> <span class="s2">&quot;y&quot;</span><span class="p">:</span> <span class="p">{</span><span class="s2">&quot;tick_format&quot;</span><span class="p">:</span> <span class="s2">&quot;,&quot;</span><span class="p">}}</span>
+<span class="n">common_bar_options</span> <span class="o">=</span> <span class="nb">dict</span><span class="p">(</span>
+    <span class="n">interactions</span><span class="o">=</span><span class="p">{</span><span class="s2">&quot;click&quot;</span><span class="p">:</span> <span class="s2">&quot;select&quot;</span><span class="p">},</span>
+    <span class="n">selected_style</span><span class="o">=</span><span class="p">{</span><span class="s2">&quot;stroke&quot;</span><span class="p">:</span> <span class="s2">&quot;Red&quot;</span><span class="p">,</span> <span class="s2">&quot;stroke-width&quot;</span><span class="p">:</span> <span class="mi">4</span><span class="p">},</span>
+    <span class="n">axes_options</span><span class="o">=</span><span class="n">bar_axes_options</span><span class="p">,</span>
+<span class="p">)</span>
+<span class="n">daily_events_bar</span> <span class="o">=</span> <span class="n">plt</span><span class="o">.</span><span class="n">bar</span><span class="p">(</span>
+    <span class="n">pd</span><span class="o">.</span><span class="n">to_datetime</span><span class="p">(</span><span class="n">all_days</span><span class="p">),</span>
+    <span class="p">[],</span>
+    <span class="n">colors</span><span class="o">=</span><span class="p">[</span><span class="s2">&quot;dodgerblue&quot;</span><span class="p">],</span>
+    <span class="n">opacities</span><span class="o">=</span><span class="p">[</span><span class="mf">0.8</span><span class="p">]</span> <span class="o">*</span> <span class="nb">len</span><span class="p">(</span><span class="n">all_days</span><span class="p">),</span>
+    <span class="o">**</span><span class="n">common_bar_options</span>
+<span class="p">)</span>
+
+<span class="n">num_days</span> <span class="o">=</span> <span class="nb">len</span><span class="p">(</span><span class="n">all_days</span><span class="p">)</span>
+<span class="n">filtered_daily_events_bar</span> <span class="o">=</span> <span class="n">plt</span><span class="o">.</span><span class="n">bar</span><span class="p">(</span>
+    <span class="n">pd</span><span class="o">.</span><span class="n">to_datetime</span><span class="p">(</span><span class="n">all_days</span><span class="p">),</span>
+    <span class="n">np</span><span class="o">.</span><span class="n">zeros</span><span class="p">(</span><span class="n">num_days</span><span class="p">),</span>
+    <span class="n">colors</span><span class="o">=</span><span class="p">[</span><span class="s2">&quot;lightgreen&quot;</span><span class="p">],</span>
+    <span class="n">opacities</span><span class="o">=</span><span class="p">[</span><span class="mf">0.8</span><span class="p">]</span> <span class="o">*</span> <span class="n">num_days</span><span class="p">,</span>
+    <span class="n">axes_options</span><span class="o">=</span><span class="n">bar_axes_options</span><span class="p">,</span>
+<span class="p">)</span>
+
+<span class="c1"># hourly events line chart</span>
+<span class="n">hourly_events_fig</span> <span class="o">=</span> <span class="n">plt</span><span class="o">.</span><span class="n">figure</span><span class="p">(</span>
+    <span class="n">title</span><span class="o">=</span><span class="s2">&quot;Hourly Events&quot;</span><span class="p">,</span>
+    <span class="n">animation_duration</span><span class="o">=</span><span class="mi">1000</span><span class="p">,</span>
+    <span class="n">layout</span><span class="o">=</span><span class="n">widgets</span><span class="o">.</span><span class="n">Layout</span><span class="p">(</span><span class="n">width</span><span class="o">=</span><span class="s2">&quot;600px&quot;</span><span class="p">,</span> <span class="n">height</span><span class="o">=</span><span class="s2">&quot;500px&quot;</span><span class="p">),</span>
+<span class="p">)</span>
+
+<span class="n">plt</span><span class="o">.</span><span class="n">scales</span><span class="p">(</span><span class="n">scales</span><span class="o">=</span><span class="p">{</span><span class="s2">&quot;x&quot;</span><span class="p">:</span> <span class="n">bq</span><span class="o">.</span><span class="n">OrdinalScale</span><span class="p">()})</span>
+<span class="n">hourly_events_bar</span> <span class="o">=</span> <span class="n">plt</span><span class="o">.</span><span class="n">bar</span><span class="p">(</span>
+    <span class="n">all_hours</span><span class="p">,</span>
+    <span class="p">[],</span>
+    <span class="n">colors</span><span class="o">=</span><span class="p">[</span><span class="s2">&quot;goldenrod&quot;</span><span class="p">],</span>
+    <span class="n">opacities</span><span class="o">=</span><span class="p">[</span><span class="mf">0.8</span><span class="p">]</span> <span class="o">*</span> <span class="mi">24</span><span class="p">,</span>
+    <span class="n">padding</span><span class="o">=</span><span class="mf">0.2</span><span class="p">,</span>
+    <span class="o">**</span><span class="n">common_bar_options</span>
+<span class="p">)</span>
+
+<span class="n">filtered_hourly_events_bar</span> <span class="o">=</span> <span class="n">plt</span><span class="o">.</span><span class="n">bar</span><span class="p">(</span>
+    <span class="n">all_hours</span><span class="p">,</span>
+    <span class="p">[],</span>
+    <span class="n">colors</span><span class="o">=</span><span class="p">[</span><span class="s2">&quot;lightgreen&quot;</span><span class="p">],</span>
+    <span class="n">opacities</span><span class="o">=</span><span class="p">[</span><span class="mf">0.8</span><span class="p">]</span> <span class="o">*</span> <span class="mi">24</span><span class="p">,</span>
+    <span class="n">padding</span><span class="o">=</span><span class="mf">0.2</span><span class="p">,</span>
+    <span class="n">axes_options</span><span class="o">=</span><span class="n">bar_axes_options</span><span class="p">,</span>
+<span class="p">)</span>
+
+<span class="n">products_fig</span> <span class="o">=</span> <span class="n">plt</span><span class="o">.</span><span class="n">figure</span><span class="p">(</span>
+    <span class="n">title</span><span class="o">=</span><span class="s2">&quot;Events By Product&quot;</span><span class="p">,</span>
+    <span class="n">animation_duration</span><span class="o">=</span><span class="mi">1000</span><span class="p">,</span>
+    <span class="n">fig_margin</span><span class="o">=</span><span class="nb">dict</span><span class="p">(</span><span class="n">top</span><span class="o">=</span><span class="mi">60</span><span class="p">,</span> <span class="n">bottom</span><span class="o">=</span><span class="mi">20</span><span class="p">,</span> <span class="n">left</span><span class="o">=</span><span class="mi">100</span><span class="p">,</span> <span class="n">right</span><span class="o">=</span><span class="mi">40</span><span class="p">),</span>
+    <span class="n">layout</span><span class="o">=</span><span class="n">widgets</span><span class="o">.</span><span class="n">Layout</span><span class="p">(</span><span class="n">width</span><span class="o">=</span><span class="s2">&quot;550px&quot;</span><span class="p">,</span> <span class="n">height</span><span class="o">=</span><span class="s2">&quot;500px&quot;</span><span class="p">),</span>
+<span class="p">)</span>
+<span class="n">products_bar</span> <span class="o">=</span> <span class="n">plt</span><span class="o">.</span><span class="n">bar</span><span class="p">(</span>
+    <span class="n">all_products</span><span class="p">,</span>
+    <span class="p">[],</span>
+    <span class="n">colors</span><span class="o">=</span><span class="p">[</span><span class="s2">&quot;salmon&quot;</span><span class="p">],</span>
+    <span class="n">orientation</span><span class="o">=</span><span class="s2">&quot;horizontal&quot;</span><span class="p">,</span>
+    <span class="n">opacities</span><span class="o">=</span><span class="p">[</span><span class="mf">0.8</span><span class="p">]</span> <span class="o">*</span> <span class="nb">len</span><span class="p">(</span><span class="n">all_products</span><span class="p">),</span>
+    <span class="n">padding</span><span class="o">=</span><span class="mf">0.2</span><span class="p">,</span>
+    <span class="o">**</span><span class="n">common_bar_options</span>
+<span class="p">)</span>
+
+<span class="n">common_pie_args</span> <span class="o">=</span> <span class="nb">dict</span><span class="p">(</span>
+    <span class="n">display_labels</span><span class="o">=</span><span class="s2">&quot;outside&quot;</span><span class="p">,</span>
+    <span class="n">interactions</span><span class="o">=</span><span class="p">{</span><span class="s2">&quot;click&quot;</span><span class="p">:</span> <span class="s2">&quot;select&quot;</span><span class="p">},</span>
+    <span class="n">selected_style</span><span class="o">=</span><span class="p">{</span><span class="s2">&quot;stroke&quot;</span><span class="p">:</span> <span class="s2">&quot;white&quot;</span><span class="p">,</span> <span class="s2">&quot;stroke-width&quot;</span><span class="p">:</span> <span class="mi">3</span><span class="p">},</span>
+    <span class="n">inner_radius</span><span class="o">=</span><span class="mi">80</span><span class="p">,</span>
+    <span class="n">apply_clip</span><span class="o">=</span><span class="kc">False</span><span class="p">,</span>
+<span class="p">)</span>
+<span class="c1"># categories pie chart</span>
+<span class="n">categories_fig</span> <span class="o">=</span> <span class="n">plt</span><span class="o">.</span><span class="n">figure</span><span class="p">(</span>
+    <span class="n">title</span><span class="o">=</span><span class="s2">&quot;Events By Category&quot;</span><span class="p">,</span>
+    <span class="n">animation_duration</span><span class="o">=</span><span class="mi">1000</span><span class="p">,</span>
+    <span class="n">layout</span><span class="o">=</span><span class="n">widgets</span><span class="o">.</span><span class="n">Layout</span><span class="p">(</span><span class="n">width</span><span class="o">=</span><span class="s2">&quot;550px&quot;</span><span class="p">,</span> <span class="n">height</span><span class="o">=</span><span class="s2">&quot;500px&quot;</span><span class="p">),</span>
+<span class="p">)</span>
+<span class="n">categories_pie</span> <span class="o">=</span> <span class="n">plt</span><span class="o">.</span><span class="n">pie</span><span class="p">([],</span> <span class="n">labels</span><span class="o">=</span><span class="n">all_categories</span><span class="p">,</span> <span class="o">**</span><span class="n">common_pie_args</span><span class="p">)</span>
+
+<span class="c1"># status codes pie chart</span>
+<span class="n">status_codes_fig</span> <span class="o">=</span> <span class="n">plt</span><span class="o">.</span><span class="n">figure</span><span class="p">(</span>
+    <span class="n">title</span><span class="o">=</span><span class="s2">&quot;Events By Status&quot;</span><span class="p">,</span>
+    <span class="n">animation_duration</span><span class="o">=</span><span class="mi">1000</span><span class="p">,</span>
+    <span class="n">layout</span><span class="o">=</span><span class="n">widgets</span><span class="o">.</span><span class="n">Layout</span><span class="p">(</span><span class="n">width</span><span class="o">=</span><span class="s2">&quot;550px&quot;</span><span class="p">,</span> <span class="n">height</span><span class="o">=</span><span class="s2">&quot;500px&quot;</span><span class="p">),</span>
+<span class="p">)</span>
+<span class="n">status_codes_pie</span> <span class="o">=</span> <span class="n">plt</span><span class="o">.</span><span class="n">pie</span><span class="p">([],</span> <span class="n">labels</span><span class="o">=</span><span class="n">all_status_codes</span><span class="p">,</span> <span class="o">**</span><span class="n">common_pie_args</span><span class="p">)</span>
+
+<span class="c1"># buttons for updating and resetting filters</span>
+<span class="n">update_btn</span> <span class="o">=</span> <span class="n">widgets</span><span class="o">.</span><span class="n">Button</span><span class="p">(</span><span class="n">description</span><span class="o">=</span><span class="s2">&quot;Update&quot;</span><span class="p">,</span> <span class="n">button_style</span><span class="o">=</span><span class="s2">&quot;Success&quot;</span><span class="p">)</span>
+<span class="n">reset_btn</span> <span class="o">=</span> <span class="n">widgets</span><span class="o">.</span><span class="n">Button</span><span class="p">(</span><span class="n">description</span><span class="o">=</span><span class="s2">&quot;Reset&quot;</span><span class="p">,</span> <span class="n">button_style</span><span class="o">=</span><span class="s2">&quot;Success&quot;</span><span class="p">)</span>
+</pre></div>
+
+    </div>
+</div>
+</div>
+
+  </div>
+
+  
+
+  <div class="
+      cell border-box-sizing code_cell rendered">
+    <div class="input">
+
+<div class="inner_cell">
+    <div class="input_area">
+<div class=" highlight hl-ipython3"><pre><span></span><span class="n">fields</span> <span class="o">=</span> <span class="p">[</span><span class="s2">&quot;day&quot;</span><span class="p">,</span> <span class="s2">&quot;hour&quot;</span><span class="p">,</span> <span class="s2">&quot;product&quot;</span><span class="p">,</span> <span class="s2">&quot;category&quot;</span><span class="p">,</span> <span class="s2">&quot;status_code&quot;</span><span class="p">]</span>
+<span class="n">field_vals</span> <span class="o">=</span> <span class="p">[</span><span class="n">all_days</span><span class="p">,</span> <span class="n">all_hours</span><span class="p">,</span> <span class="n">all_products</span><span class="p">,</span> <span class="n">all_categories</span><span class="p">,</span> <span class="n">all_status_codes</span><span class="p">]</span>
+<span class="n">plots</span> <span class="o">=</span> <span class="p">[</span>
+    <span class="n">daily_events_bar</span><span class="p">,</span>
+    <span class="n">hourly_events_bar</span><span class="p">,</span>
+    <span class="n">products_bar</span><span class="p">,</span>
+    <span class="n">categories_pie</span><span class="p">,</span>
+    <span class="n">status_codes_pie</span><span class="p">,</span>
+<span class="p">]</span>
+</pre></div>
+
+    </div>
+</div>
+</div>
+
+  </div>
+
+  
+
+  <div class="
+      cell border-box-sizing code_cell rendered">
+    <div class="input">
+
+<div class="inner_cell">
+    <div class="input_area">
+<div class=" highlight hl-ipython3"><pre><span></span><span class="k">def</span> <span class="nf">generate_filters</span><span class="p">():</span>
+    <span class="n">filters_dict</span> <span class="o">=</span> <span class="p">{}</span>
+    <span class="k">for</span> <span class="n">field</span><span class="p">,</span> <span class="n">field_val</span><span class="p">,</span> <span class="n">plot</span> <span class="ow">in</span> <span class="nb">zip</span><span class="p">(</span><span class="n">fields</span><span class="p">,</span> <span class="n">field_vals</span><span class="p">,</span> <span class="n">plots</span><span class="p">):</span>
+        <span class="k">if</span> <span class="n">plot</span><span class="o">.</span><span class="n">selected</span><span class="p">:</span>
+            <span class="n">selected_vals</span> <span class="o">=</span> <span class="p">[</span><span class="n">field_val</span><span class="p">[</span><span class="n">i</span><span class="p">]</span> <span class="k">for</span> <span class="n">i</span> <span class="ow">in</span> <span class="n">plot</span><span class="o">.</span><span class="n">selected</span><span class="p">]</span>
+            <span class="n">filters_dict</span><span class="p">[</span><span class="n">field</span><span class="p">]</span> <span class="o">=</span> <span class="n">selected_vals</span>
+    <span class="k">return</span> <span class="n">filters_dict</span>
+</pre></div>
+
+    </div>
+</div>
+</div>
+
+  </div>
+
+  
+
+  <div class="
+      cell border-box-sizing code_cell rendered">
+    <div class="input">
+
+<div class="inner_cell">
+    <div class="input_area">
+<div class=" highlight hl-ipython3"><pre><span></span><span class="k">def</span> <span class="nf">apply_filters</span><span class="p">(</span><span class="n">df</span><span class="p">,</span> <span class="n">filters</span><span class="p">):</span>
+    <span class="n">filtered_df</span> <span class="o">=</span> <span class="n">df</span>
+
+    <span class="k">for</span> <span class="n">k</span><span class="p">,</span> <span class="n">v</span> <span class="ow">in</span> <span class="n">filters</span><span class="o">.</span><span class="n">items</span><span class="p">():</span>
+        <span class="k">if</span> <span class="n">v</span> <span class="ow">and</span> <span class="nb">len</span><span class="p">(</span><span class="n">v</span><span class="p">)</span> <span class="o">&gt;</span> <span class="mi">0</span><span class="p">:</span>
+            <span class="n">filtered_df</span> <span class="o">=</span> <span class="n">filtered_df</span><span class="p">[</span><span class="n">filtered_df</span><span class="p">[</span><span class="n">k</span><span class="p">]</span><span class="o">.</span><span class="n">isin</span><span class="p">(</span><span class="n">v</span><span class="p">)]</span>
+    <span class="k">return</span> <span class="n">filtered_df</span>
+</pre></div>
+
+    </div>
+</div>
+</div>
+
+  </div>
+
+  
+
+  <div class="
+      cell border-box-sizing code_cell rendered">
+    <div class="input">
+
+<div class="inner_cell">
+    <div class="input_area">
+<div class=" highlight hl-ipython3"><pre><span></span><span class="k">def</span> <span class="nf">update_plots</span><span class="p">(</span><span class="o">*</span><span class="n">args</span><span class="p">):</span>
+    <span class="k">global</span> <span class="n">filters</span><span class="p">,</span> <span class="n">filtered_log_data</span>
+    <span class="n">filters</span> <span class="o">=</span> <span class="n">generate_filters</span><span class="p">()</span>
+    <span class="n">filtered_log_data</span> <span class="o">=</span> <span class="n">apply_filters</span><span class="p">(</span><span class="n">log_data</span><span class="p">,</span> <span class="n">filters</span><span class="p">)</span>
+
+    <span class="n">daily_events</span> <span class="o">=</span> <span class="p">(</span>
+        <span class="n">filtered_log_data</span><span class="o">.</span><span class="n">resample</span><span class="p">(</span><span class="s2">&quot;D&quot;</span><span class="p">)</span>
+        <span class="o">.</span><span class="n">count</span><span class="p">()[</span><span class="s2">&quot;status_code&quot;</span><span class="p">]</span>
+        <span class="o">.</span><span class="n">reindex</span><span class="p">(</span><span class="n">pd</span><span class="o">.</span><span class="n">to_datetime</span><span class="p">(</span><span class="n">all_days</span><span class="p">))</span>
+        <span class="o">.</span><span class="n">fillna</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span>
+    <span class="p">)</span>
+    <span class="n">daily_events_bar</span><span class="o">.</span><span class="n">y</span> <span class="o">=</span> <span class="n">daily_events</span>
+
+    <span class="n">hourly_events_bar</span><span class="o">.</span><span class="n">y</span> <span class="o">=</span> <span class="n">get_events_by_hour</span><span class="p">(</span><span class="n">filtered_log_data</span><span class="p">)</span>
+
+    <span class="n">products_bar</span><span class="o">.</span><span class="n">y</span> <span class="o">=</span> <span class="p">(</span>
+        <span class="n">filtered_log_data</span><span class="p">[</span><span class="s2">&quot;product&quot;</span><span class="p">]</span><span class="o">.</span><span class="n">value_counts</span><span class="p">()</span><span class="o">.</span><span class="n">reindex</span><span class="p">(</span><span class="n">all_products</span><span class="p">)</span><span class="o">.</span><span class="n">fillna</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span>
+    <span class="p">)</span>
+
+    <span class="n">events_by_category</span> <span class="o">=</span> <span class="n">filtered_log_data</span><span class="p">[</span><span class="s2">&quot;category&quot;</span><span class="p">]</span><span class="o">.</span><span class="n">value_counts</span><span class="p">()</span>
+
+    <span class="k">with</span> <span class="n">categories_pie</span><span class="o">.</span><span class="n">hold_sync</span><span class="p">():</span>
+        <span class="n">categories_pie</span><span class="o">.</span><span class="n">labels</span> <span class="o">=</span> <span class="nb">list</span><span class="p">(</span><span class="n">events_by_category</span><span class="o">.</span><span class="n">index</span><span class="p">)</span>
+        <span class="n">categories_pie</span><span class="o">.</span><span class="n">sizes</span> <span class="o">=</span> <span class="n">events_by_category</span>
+        <span class="n">categories_pie</span><span class="o">.</span><span class="n">colors</span> <span class="o">=</span> <span class="p">[</span><span class="n">category_colors</span><span class="p">[</span><span class="n">d</span><span class="p">]</span> <span class="k">for</span> <span class="n">d</span> <span class="ow">in</span> <span class="n">categories_pie</span><span class="o">.</span><span class="n">labels</span><span class="p">]</span>
+
+    <span class="n">events_by_status_code</span> <span class="o">=</span> <span class="n">filtered_log_data</span><span class="p">[</span><span class="s2">&quot;status_code&quot;</span><span class="p">]</span><span class="o">.</span><span class="n">value_counts</span><span class="p">()</span>
+
+    <span class="k">with</span> <span class="n">status_codes_pie</span><span class="o">.</span><span class="n">hold_sync</span><span class="p">():</span>
+        <span class="n">status_codes_pie</span><span class="o">.</span><span class="n">labels</span> <span class="o">=</span> <span class="nb">list</span><span class="p">(</span><span class="n">events_by_status_code</span><span class="o">.</span><span class="n">index</span><span class="p">)</span>
+        <span class="n">status_codes_pie</span><span class="o">.</span><span class="n">sizes</span> <span class="o">=</span> <span class="n">events_by_status_code</span><span class="o">.</span><span class="n">values</span>
+        <span class="n">status_codes_pie</span><span class="o">.</span><span class="n">colors</span> <span class="o">=</span> <span class="p">[</span>
+            <span class="n">status_label_colors</span><span class="p">[</span><span class="n">d</span><span class="p">]</span> <span class="k">for</span> <span class="n">d</span> <span class="ow">in</span> <span class="n">status_codes_pie</span><span class="o">.</span><span class="n">labels</span>
+        <span class="p">]</span>
+</pre></div>
+
+    </div>
+</div>
+</div>
+
+  </div>
+
+  
+
+  <div class="
+      cell border-box-sizing code_cell rendered">
+    <div class="input">
+
+<div class="inner_cell">
+    <div class="input_area">
+<div class=" highlight hl-ipython3"><pre><span></span><span class="k">def</span> <span class="nf">reset_filters</span><span class="p">(</span><span class="o">*</span><span class="n">args</span><span class="p">):</span>
+    <span class="k">for</span> <span class="n">plot</span> <span class="ow">in</span> <span class="n">plots</span><span class="p">:</span>
+        <span class="n">plot</span><span class="o">.</span><span class="n">selected</span> <span class="o">=</span> <span class="kc">None</span>
+    <span class="n">update_plots</span><span class="p">(</span><span class="kc">None</span><span class="p">)</span>
+
+
+<span class="n">update_btn</span><span class="o">.</span><span class="n">on_click</span><span class="p">(</span><span class="k">lambda</span> <span class="n">btn</span><span class="p">:</span> <span class="n">update_plots</span><span class="p">(</span><span class="kc">None</span><span class="p">))</span>
+<span class="n">reset_btn</span><span class="o">.</span><span class="n">on_click</span><span class="p">(</span><span class="k">lambda</span> <span class="n">btn</span><span class="p">:</span> <span class="n">reset_filters</span><span class="p">())</span>
+<span class="n">btns_layout</span> <span class="o">=</span> <span class="n">widgets</span><span class="o">.</span><span class="n">VBox</span><span class="p">(</span>
+    <span class="p">[</span><span class="n">update_btn</span><span class="p">,</span> <span class="n">reset_btn</span><span class="p">],</span> <span class="n">layout</span><span class="o">=</span><span class="n">widgets</span><span class="o">.</span><span class="n">Layout</span><span class="p">(</span><span class="n">overflow_x</span><span class="o">=</span><span class="s2">&quot;hidden&quot;</span><span class="p">)</span>
+<span class="p">)</span>
+</pre></div>
+
+    </div>
+</div>
+</div>
+
+  </div>
+
+  
+
+  <div class="
+      cell border-box-sizing code_cell rendered">
+    <div class="input">
+
+<div class="inner_cell">
+    <div class="input_area">
+<div class=" highlight hl-ipython3"><pre><span></span><span class="n">update_plots</span><span class="p">(</span><span class="kc">None</span><span class="p">)</span>
+
+<span class="n">parent_plots</span> <span class="o">=</span> <span class="n">widgets</span><span class="o">.</span><span class="n">HBox</span><span class="p">([</span><span class="n">daily_events_fig</span><span class="p">,</span> <span class="n">hourly_events_fig</span><span class="p">])</span>
+<span class="n">child_plots</span> <span class="o">=</span> <span class="n">widgets</span><span class="o">.</span><span class="n">HBox</span><span class="p">([</span><span class="n">products_fig</span><span class="p">,</span> <span class="n">categories_fig</span><span class="p">,</span> <span class="n">status_codes_fig</span><span class="p">])</span>
+<span class="n">widgets</span><span class="o">.</span><span class="n">VBox</span><span class="p">([</span><span class="n">widgets</span><span class="o">.</span><span class="n">HBox</span><span class="p">([</span><span class="n">parent_plots</span><span class="p">,</span> <span class="n">btns_layout</span><span class="p">]),</span> <span class="n">child_plots</span><span class="p">])</span>
+</pre></div>
+
+    </div>
+</div>
+</div>
+
+  </div>
+