Better report chart

samples/templates/50-advanced.report.md

@@ -22,7 +22,7 @@ Trying the language capabilities of GPT models.
 | Template                       | Timeline                             |
 | ------------------------------ | ------------------------------------ |
 | Synonym                        | ████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ |
-| Sentence with Synonym          | ░░░░███░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ |
+| Sentence with Synonym          | ░░░███░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ |
 | Sentence without original word | ░░░░░░███░░░░░░░░░░░░░░░░░░░░░░░░░░░ |
 | Comparison                     | ░░░░░░░░░███████████████████████████ |
 
@@ -32,7 +32,7 @@ _Note: Each █ represents 0.295 seconds, width of timeline is 10.61 seconds = 3
 
 | Template                       | Cost                                 |
 | ------------------------------ | ------------------------------------ |
-| Synonym                        | ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ |
+| Synonym                        | ▓░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ |
 | Sentence with Synonym          | █░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ |
 | Sentence without original word | █░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ |
 | Comparison                     | ████████████████████████████████████ |

src/utils/markdown/createMarkdownChart.test.ts

@@ -33,6 +33,53 @@ describe('how createMarkdownChart works', () => {
         );
     });
 
+    it('should render half-tone boxes', () => {
+        expect(
+            createMarkdownChart({
+                nameHeader: 'Template',
+                valueHeader: 'Timeline',
+                items: [
+                    { title: 'Full', from: 0, to: 10 },
+                    { title: 'Tiny', from: 4.7, to: 5 },
+                ],
+                width: 10,
+                unitName: 'seconds',
+            }),
+        ).toBe(
+            spaceTrim(`
+                  | Template | Timeline   |
+                  |----------|------------|
+                  | Full     | ██████████ |
+                  | Tiny     | ░░░░▓░░░░░ |
+
+                  _Note: Each █ represents 1 seconds, width of timeline is 10 seconds = 10 squares_
+
+            `),
+        );
+        expect(
+            createMarkdownChart({
+                nameHeader: 'Template',
+                valueHeader: 'Timeline',
+                items: [
+                    { title: 'Full', from: 0, to: 10 },
+                    { title: 'Tiny', from: 5, to: 5.2 },
+                ],
+                width: 10,
+                unitName: 'seconds',
+            }),
+        ).toBe(
+            spaceTrim(`
+                | Template | Timeline   |
+                |----------|------------|
+                | Full     | ██████████ |
+                | Tiny     | ░░░░░▓░░░░ |
+
+                _Note: Each █ represents 1 seconds, width of timeline is 10 seconds = 10 squares_
+
+        `),
+        );
+    });
+
     it('should round boxes to nearest whole number', () => {
         expect(
             createMarkdownChart({
@@ -51,12 +98,48 @@ describe('how createMarkdownChart works', () => {
               | Template   | Timeline |
               |------------|----------|
               | Template 1 | ████     |
-              | Template 2 | ░░░░     |
-              | Template 3 | ░░██     |
+              | Template 2 | ░░▓░     |
+              | Template 3 | ░██░     |
 
               _Note: Each █ represents 2.55 seconds, width of timeline is 10.2 seconds = 4 squares_
 
           `),
         );
     });
+
+    it('should work in real-life example', () => {
+        // TODO: !!!! Fix
+        expect(
+            createMarkdownChart({
+                nameHeader: 'Template',
+                valueHeader: 'Timeline',
+                items: [
+                    { title: '🖋 Překlad popisu', from: 1707866836.134, to: 1707866836.134 },
+                    { title: '🖋 Účel stránek', from: 1707866836.134, to: 1707866836.134 },
+                    { title: '🖋 Příprava kontaktů', from: 1707866836.134, to: 1707866836.134 },
+                    { title: '🖋 Příprava odkazů', from: 1707866836.134, to: 1707866836.134 },
+                    { title: '🖋 Návrh zadání', from: 1707866836.134, to: 1707866836.134 },
+                    { title: '🖋 Návrh obrázku', from: 1707866836.134, to: 1707866836.134 },
+                    { title: '🖋 Prompt k obrázku', from: 1707866836.134, to: 1707866836.134 },
+                    { title: '🖋 Vylepšení názvu', from: 1707866836.134, to: 1707866836.134 },
+                    { title: '🖋 Claim pro web', from: 1707866836.134, to: 1707866836.134 },
+                    { title: '🖋 Analýza klíčových slov', from: 1707866836.134, to: 1707866836.134 },
+                    { title: '📃 Vytvoření obsahu webu', from: 1707866836.134, to: 1707866836.134 },
+                    { title: '💌 Kontaktní formulář', from: 1707866836.135, to: 1707866836.135 },
+                ],
+                width: 36,
+                unitName: 'seconds',
+            }),
+        ).toBe(
+            spaceTrim(`
+
+            `),
+        );
+    });
+
+    // TODO: !!!! ## ⌚ Time chart must make sense
 });
+
+/**
+ * TODO: !!!! Make 2 in 1 test mermaid + ASCII chart
+ */

src/utils/markdown/createMarkdownChart.ts

@@ -52,11 +52,34 @@ export function createMarkdownChart(options: CreateMarkdownChartOptions): string
     const table: Array<Array<string_markdown_text>> = [[nameHeader, valueHeader]];
 
     for (const item of items) {
-        const before = Math.round((item.from - from) * scale);
-        const during = Math.round((item.to - item.from) * scale);
+        const before = Math.floor((item.from - from) * scale);
+        let duringChar = '█';
+        let during = Math.round((item.to - item.from) * scale);
+
+        if (during === 0) {
+            duringChar = '▓';
+            during = 1;
+        }
+
         const after = width - before - during;
 
-        table.push([removeEmojis(item.title).trim(), '░'.repeat(before) + '█'.repeat(during) + '░'.repeat(after)]);
+        if (before < 0 || during < 0 || after < 0) {
+            console.error(
+                'Problem in createMarkdownChart',
+                { before, during, after },
+                { item, items, table, scale, options },
+                // <- TODO: Error with extra info
+            );
+            throw new Error(
+                //         <- TODO: [🥨] Make some NeverShouldHappenError
+                'Problem in createMarkdownChart, see more in console',
+            );
+        }
+
+        table.push([
+            removeEmojis(item.title).trim(),
+            '░'.repeat(before) + duringChar.repeat(during) + '░'.repeat(after),
+        ]);
     }
 
     const legend = `_Note: Each █ represents ${formatNumber(

src/version.ts

@@ -3,4 +3,4 @@ import type { string_version } from './types/typeAliases';
 /**
  * The version of the Promptbook library
  */
-export const PROMPTBOOK_VERSION: string_version = '0.36.4';
+export const PROMPTBOOK_VERSION: string_version = '0.36.4';