diff --git a/docs/HistogramTable.js b/docs/HistogramTable.js
index f4ff2b6ed14..ec40d963820 100644
--- a/docs/HistogramTable.js
+++ b/docs/HistogramTable.js
@@ -40,15 +40,14 @@ class HistogramTable {
                             ]
                         },
                         {
-                            render: (data, type, row, meta) => {
-                                // FK-TODO: refactor
-                                const numberWithBar = UIUtils.instantiateTemplate('template-number-with-bar');
-                                const bar = numberWithBar.querySelector('.bar');
-                                bar.style.width = (data / this.#sumFrequencies * 100).toString() + "%";
-                                const number = numberWithBar.querySelector('.number');
-                                number.textContent = data;
-                                return numberWithBar.outerHTML;
-                            },
+                            render: frequency =>
+                                NumberWithBarElementFactory
+                                    .createNumberWithBarElement(
+                                        {
+                                            number: frequency,
+                                            barLenInPercent: frequency / this.#sumFrequencies * 100
+                                        })
+                                    .outerHTML,
                             targets: [this.#getColumnIndex('Frequency')]
                         }
                     ]
diff --git a/docs/NumberWithBarElementFactory.js b/docs/NumberWithBarElementFactory.js
new file mode 100644
index 00000000000..a2fffa6c4bc
--- /dev/null
+++ b/docs/NumberWithBarElementFactory.js
@@ -0,0 +1,14 @@
+class NumberWithBarElementFactory {
+
+    static createNumberWithBarElement({ number, barLenInPercent }) {
+        const numberWithBarElement = UIUtils.instantiateTemplate('template-number-with-bar');
+
+        const barElement = numberWithBarElement.querySelector('.bar');
+        barElement.style.width = barLenInPercent.toString() + "%";
+
+        const numberElement = numberWithBarElement.querySelector('.number');
+        numberElement.textContent = number;
+
+        return numberWithBarElement;
+    }
+}
\ No newline at end of file
diff --git a/docs/batchCodeTable.html b/docs/batchCodeTable.html
index 3c249237e5d..0b2dae62754 100644
--- a/docs/batchCodeTable.html
+++ b/docs/batchCodeTable.html
@@ -28,6 +28,7 @@
   <link href="forkMeOnGitHub.css" rel="stylesheet" type="text/css" />
   <script src="./Utils.js"></script>
   <script src="./UIUtils.js"></script>
+  <script src="./NumberWithBarElementFactory.js"></script>
   <script src="./GoogleAnalytics.js"></script>
   <script src="./BatchCodeSelectInitializer.js"></script>
   <script src="./HistoDescrsProvider.js"></script>