feat(examples): dynamic chart width (package-stats)

thi-ng · Feb 5, 2019 · 2b3dd7f · 2b3dd7f
1 parent 0715665
commit 2b3dd7f
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 13 deletions.
diff --git a/examples/package-stats/src/dep-chart.ts b/examples/package-stats/src/dep-chart.ts
@@ -54,37 +54,39 @@ const packageDeps = packages
 
 const maxDeps = transduce(pluck(1), max(), packageDeps);
 
+const width = packages.length * 16;
+
 fs.writeFileSync(
     `package-deps.svg`,
     serialize(
         [barChart,
             {
                 attribs: {
-                    width: 1024,
+                    width: width,
                     height: 260,
                     "font-size": "10px",
                     "font-family": "Iosevka-Term-Light, Menlo, sans-serif"
                 },
                 x: {
-                    axis: [80, 1010, 170],
+                    axis: [50, width - 15, 170],
                     domain: [0, packageDeps.length, 1],
-                    range: [80, 1020],
+                    range: [50, width - 5],
                     ticks: [...map((x) => x[0].substr(8), packageDeps)],
                     label: labeledTickX
                 },
                 y: {
-                    axis: [170, 10, 65],
+                    axis: [170, 10, 35],
                     domain: [0, maxDeps, 10],
                     range: [160, 20],
-                    label: labeledTickY(1010)
+                    label: labeledTickY(width - 15)
                 },
                 axis: "#666",
                 fill: "#0cc"
             },
             mapIndexed((i, m) => [i, m[1]], packageDeps),
             group({ "font-size": "20px", "text-anchor": "middle" },
-                text([552, 28], "@thi.ng/umbrella internal re-use"),
-                text([552, 56], "(transitive dependents)"),
+                text([width / 2 + 25, 28], "@thi.ng/umbrella internal re-use"),
+                text([width / 2 + 25, 56], "(transitive dependents)"),
             )
         ]
     )

diff --git a/examples/package-stats/src/size-chart.ts b/examples/package-stats/src/size-chart.ts
@@ -35,6 +35,8 @@ const fileSizeChart =
         const get = getter([1, modType, type]);
         stats = [...stats].sort((a, b) => get(b) - get(a));
 
+        const width = stats.length * 16;
+
         const maxSize = transduce(
             mapcat(([_, m]) => [m.esm[type], m.cjs[type], m.umd[type]]),
             max(),
@@ -47,31 +49,31 @@ const fileSizeChart =
                 [barChart,
                     {
                         attribs: {
-                            width: 1024,
+                            width: width,
                             height: 260,
                             "font-size": "10px",
                             "font-family": "Iosevka-Term-Light, Menlo, sans-serif"
                         },
                         x: {
-                            axis: [80, 1010, 170],
+                            axis: [80, width - 15, 170],
                             domain: [0, stats.length, 1],
-                            range: [80, 1020],
+                            range: [80, width - 5],
                             ticks: [...map((x) => x[0], stats)],
                             label: labeledTickX
                         },
                         y: {
                             axis: [170, 10, 65],
                             domain: [0, maxSize, 5 * 1024],
                             range: [160, 20],
-                            label: labeledTickY(1010, bytes)
+                            label: labeledTickY(width - 15, bytes)
                         },
                         axis: "#666",
                         fill: "#0cc"
                     },
                     mapIndexed((i, m) => [i, get(m)], stats),
                     group({ "font-size": "20px", "text-anchor": "middle" },
-                        text([552, 28], `@thi.ng/umbrella package sizes (${modType.toUpperCase()})`),
-                        text([552, 56], `(minified + gzipped)`),
+                        text([width / 2 + 40, 28], `@thi.ng/umbrella package sizes (${modType.toUpperCase()})`),
+                        text([width / 2 + 40, 56], `(minified + gzipped)`),
                     )
                 ]
             )