www: Display example benchmark results using chartjs rather than an i…

…mage.
Senryoku · May 16, 2024 · 0af3b0f · 0af3b0f
1 parent 4850c1a
commit 0af3b0f
Show file tree

Hide file tree

Showing 5 changed files with 231 additions and 114 deletions.
diff --git a/www/src/assets/img/bench-compress-min.png b/www/src/assets/img/bench-compress-min.png
diff --git a/www/src/assets/img/bench-decompress-min.png b/www/src/assets/img/bench-decompress-min.png
diff --git a/www/src/components/BenchmarkResults.vue b/www/src/components/BenchmarkResults.vue
@@ -0,0 +1,128 @@
+<template>
+  <div>
+    <div>
+      <h3>Compression Time</h3>
+      <div>
+        <Bar :options="chartOptions" :data="chartDataCompression!" />
+      </div>
+    </div>
+    <div>
+      <h3>Decompression Time</h3>
+      <div>
+        <Bar :options="chartOptions" :data="chartDataDecompression!" />
+      </div>
+    </div>
+    <div>
+      <h3>Compressed Size</h3>
+      <div>
+        <Bar :options="chartSizeOptions" :data="chartDataSize!" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { Bar } from 'vue-chartjs'
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  BarElement,
+  CategoryScale,
+  LinearScale,
+  Colors
+} from 'chart.js'
+
+ChartJS.defaults.color = '#ddd'
+ChartJS.defaults.borderColor = '#555'
+
+ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, Colors)
+
+const props = defineProps<{
+  results: {
+    compressed: Record<string, Record<string, number>>
+    decompressed: Record<string, Record<string, number>>
+    size: Record<string, Record<string, number>>
+    success: Record<string, Record<string, boolean>>
+  }
+}>()
+
+const chartOptions = {
+  responsive: true,
+  maintainAspectRatio: true,
+  plugins: {
+    colors: {
+      forceOverride: true
+    }
+  },
+  scales: {
+    x: {
+      title: {
+        display: true,
+        text: 'File'
+      }
+    },
+    y: {
+      title: {
+        display: true,
+        text: 'Time (ms)'
+      }
+    }
+  }
+}
+
+const chartSizeOptions = structuredClone(chartOptions)
+chartSizeOptions.scales.y.title.text = 'Size (%)'
+
+const methods = ['smol-string', 'LZString', 'LZString UTF-16']
+
+const chartDataCompression = computed(() => {
+  const datasets = []
+  for (const method of methods) {
+    datasets.push({
+      label: method,
+      data: Object.values(props.results.compressed).map((o) => o[method] ?? 0)
+    })
+  }
+
+  return {
+    labels: Object.keys(props.results.compressed),
+    datasets
+  }
+})
+
+const chartDataDecompression = computed(() => {
+  const datasets = []
+  for (const method of methods) {
+    datasets.push({
+      label: method,
+      data: Object.values(props.results.decompressed).map((o) => o[method] ?? 0)
+    })
+  }
+
+  return {
+    labels: Object.keys(props.results.decompressed),
+    datasets
+  }
+})
+
+const chartDataSize = computed(() => {
+  const datasets = []
+  for (const method of methods) {
+    datasets.push({
+      label: method,
+      data: Object.values(props.results.size).map((o) => o[method] ?? 0)
+    })
+  }
+
+  return {
+    labels: Object.keys(props.results.size),
+    datasets
+  }
+})
+</script>
+
+<style scoped></style>
diff --git a/www/src/components/LibBenchmark.vue b/www/src/components/LibBenchmark.vue
@@ -1,132 +1,26 @@
 <template>
   <div>
-    <div>
-      <h3>Compression Time</h3>
-      <div>
-        <Bar :options="chartOptions" :data="chartDataCompression!" />
-      </div>
-    </div>
-    <div>
-      <h3>Decompression Time</h3>
-      <div>
-        <Bar :options="chartOptions" :data="chartDataDecompression!" />
-      </div>
-    </div>
-    <div>
-      <h3>Compressed Size</h3>
-      <div>
-        <Bar :options="chartSizeOptions" :data="chartDataSize!" />
-      </div>
-    </div>
+    <BenchmarkResults :results="results" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
-
-import { Bar } from 'vue-chartjs'
-import {
-  Chart as ChartJS,
-  Title,
-  Tooltip,
-  Legend,
-  BarElement,
-  CategoryScale,
-  LinearScale,
-  Colors
-} from 'chart.js'
-
-ChartJS.defaults.color = '#ddd'
-ChartJS.defaults.borderColor = '#555'
-
-ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, Colors)
+import { ref, onMounted } from 'vue'
 
 import { compress, decompress } from 'smol-string/worker'
 
 // @ts-expect-error
 import LZString from '../../lz-string.min.js'
 
+import BenchmarkResults from './BenchmarkResults.vue'
+
 const results = ref({ compressed: {}, decompressed: {}, success: {}, size: {} } as {
   compressed: Record<string, Record<string, number>>
   decompressed: Record<string, Record<string, number>>
   size: Record<string, Record<string, number>>
   success: Record<string, Record<string, boolean>>
 })
 
-const chartOptions = {
-  responsive: true,
-  maintainAspectRatio: true,
-  plugins: {
-    colors: {
-      forceOverride: true
-    }
-  },
-  scales: {
-    x: {
-      title: {
-        display: true,
-        text: 'File'
-      }
-    },
-    y: {
-      title: {
-        display: true,
-        text: 'Time (ms)'
-      }
-    }
-  }
-}
-
-const chartSizeOptions = structuredClone(chartOptions)
-chartSizeOptions.scales.y.title.text = 'Size (%)'
-
-const methods = ['smol-string', 'LZString', 'LZString UTF-16']
-
-const chartDataCompression = computed(() => {
-  const datasets = []
-  for (const method of methods) {
-    datasets.push({
-      label: method,
-      data: Object.values(results.value['compressed']).map((o) => o[method] ?? 0)
-    })
-  }
-
-  return {
-    labels: Object.keys(results.value['compressed']),
-    datasets
-  }
-})
-
-const chartDataDecompression = computed(() => {
-  const datasets = []
-  for (const method of methods) {
-    datasets.push({
-      label: method,
-      data: Object.values(results.value['decompressed']).map((o) => o[method] ?? 0)
-    })
-  }
-
-  return {
-    labels: Object.keys(results.value['decompressed']),
-    datasets
-  }
-})
-
-const chartDataSize = computed(() => {
-  const datasets = []
-  for (const method of methods) {
-    datasets.push({
-      label: method,
-      data: Object.values(results.value['size']).map((o) => o[method] ?? 0)
-    })
-  }
-
-  return {
-    labels: Object.keys(results.value['size']),
-    datasets
-  }
-})
-
 async function test(
   method: string,
   file: string,
@@ -180,8 +74,6 @@ onMounted(async () => {
       LZString.decompressFromUTF16
     )
   }
-
-  console.log(await results.value)
 })
 </script>
 

diff --git a/www/src/views/HomeView.vue b/www/src/views/HomeView.vue
@@ -1,3 +1,4 @@
+import BenchmarkResults from '@/components/BenchmarkResults.vue';
 <template>
   <div>
     <section>
@@ -60,8 +61,9 @@ const decompressed = await decompress(compressed);'
         (Warning: The page might be unresponsive while the benchmarks are running)
       </p>
       <p>Example run in Chrome:</p>
-      <img src="../assets/img/bench-compress-min.png" alt="Compression Benchmark Results" />
-      <img src="../assets/img/bench-decompress-min.png" alt="Decompression Benchmark Results" />
+      <div style="margin: 2em">
+        <BenchmarkResults :results="ChromeBenchmarkResults" />
+      </div>
     </section>
     <section>
       <h2>More Information</h2>
@@ -73,6 +75,101 @@ const decompressed = await decompress(compressed);'
   </div>
 </template>
 
+<script setup lang="ts">
+import BenchmarkResults from '@/components/BenchmarkResults.vue'
+
+const ChromeBenchmarkResults = {
+  compressed: {
+    json_512kb: {
+      'smol-string': 34.900000002235174,
+      LZString: 80.19999999925494,
+      'LZString UTF-16': 66.90000000223517
+    },
+    json_1mb: {
+      'smol-string': 49.5,
+      LZString: 127.5,
+      'LZString UTF-16': 118.39999999850988
+    },
+    json_4mb: {
+      'smol-string': 253.19999999925494,
+      LZString: 771.8000000007451,
+      'LZString UTF-16': 738.8999999985099
+    },
+    json_8mb: {
+      'smol-string': 276.6000000014901,
+      LZString: 1458.5,
+      'LZString UTF-16': 1440.7999999970198
+    }
+  },
+  decompressed: {
+    json_512kb: {
+      'smol-string': 5.300000000745058,
+      LZString: 15.300000000745058,
+      'LZString UTF-16': 15.199999999254942
+    },
+    json_1mb: {
+      'smol-string': 5.899999998509884,
+      LZString: 20.399999998509884,
+      'LZString UTF-16': 19.600000001490116
+    },
+    json_4mb: {
+      'smol-string': 25.099999997764826,
+      LZString: 140.60000000149012,
+      'LZString UTF-16': 146.90000000223517
+    },
+    json_8mb: {
+      'smol-string': 28.899999998509884,
+      LZString: 154.60000000149012,
+      'LZString UTF-16': 168.19999999925494
+    }
+  },
+  success: {
+    json_512kb: {
+      'smol-string': true,
+      LZString: true,
+      'LZString UTF-16': true
+    },
+    json_1mb: {
+      'smol-string': true,
+      LZString: true,
+      'LZString UTF-16': true
+    },
+    json_4mb: {
+      'smol-string': true,
+      LZString: true,
+      'LZString UTF-16': true
+    },
+    json_8mb: {
+      'smol-string': true,
+      LZString: true,
+      'LZString UTF-16': true
+    }
+  },
+  size: {
+    json_512kb: {
+      'smol-string': 11.337326050173045,
+      LZString: 11.2901420567393,
+      'LZString UTF-16': 12.043110807768022
+    },
+    json_1mb: {
+      'smol-string': 9.21076454612789,
+      LZString: 9.179052478534002,
+      'LZString UTF-16': 9.791018571859656
+    },
+    json_4mb: {
+      'smol-string': 13.949844914424425,
+      LZString: 13.807306905265873,
+      'LZString UTF-16': 14.727823349027563
+    },
+    json_8mb: {
+      'smol-string': 7.582730870091672,
+      LZString: 7.54022476383985,
+      'LZString UTF-16': 8.042920284726897
+    }
+  }
+}
+</script>
+
 <style scoped>
 p {
   margin-left: 1em;