sync

.gitignore

@@ -0,0 +1,4 @@
+node_modules
+pypy3.8-v7.3.7-win64
+cli
+.vscode

__t.js

@@ -0,0 +1,24 @@
+const { Chart } = require('echarts-ssr');
+ 
+const option = {
+    title: {
+        text: 'ECharts entry example'
+    },
+    backgroundColor: 'white',
+    tooltip: {},
+    legend: {
+        data:['Sales']
+    },
+    xAxis: {
+        data: ["shirt","cardign","chiffon shirt","pants","heels","socks"]
+    },
+    yAxis: {},
+    series: [{
+        name: 'Sales',
+        type: 'bar',
+        data: [5, 20, 36, 10, 10, 20]
+    }]
+};
+ 
+const chart = new Chart(800, 600);
+chart.renderToFileSync(option, 'render-to-file.png');

ankieterSampleData.json

@@ -0,0 +1,68 @@
+{
+    "index": [
+      1, 
+      2, 
+      3, 
+      9999, 
+      "*"
+    ], 
+    "mean Jak og\u00f3lnie ocenia P. jako\u015b\u0107 kszta\u0142cenia na swoim kierunku studi\u00f3w?": [
+      4.026791277258567, 
+      3.9738903394255876, 
+      4.008928571428571, 
+      3.4444444444444446, 
+      4.0111016225448335
+    ], 
+    "median Jak og\u00f3lnie ocenia P. jako\u015b\u0107 kszta\u0142cenia na swoim kierunku studi\u00f3w?": [
+      4.0, 
+      4.0, 
+      4.0, 
+      3.5, 
+      4.0
+    ], 
+    "rows Jak og\u00f3lnie ocenia P. jako\u015b\u0107 kszta\u0142cenia na swoim kierunku studi\u00f3w?": [
+      1605, 
+      383, 
+      336, 
+      18, 
+      2342
+    ], 
+    "share Jak og\u00f3lnie ocenia P. jako\u015b\u0107 kszta\u0142cenia na swoim kierunku studi\u00f3w?": [
+      {
+        "2": 34, 
+        "3": 290, 
+        "4": 880, 
+        "5": 401
+      }, 
+      {
+        "2": 18, 
+        "3": 74, 
+        "4": 191, 
+        "5": 100
+      }, 
+      {
+        "2": 12, 
+        "3": 52, 
+        "4": 193, 
+        "5": 79
+      }, 
+      {
+        "2": 1, 
+        "3": 8, 
+        "4": 9
+      }, 
+      {
+        "2": 65, 
+        "3": 424, 
+        "4": 1273, 
+        "5": 580
+      }
+    ], 
+    "std Jak og\u00f3lnie ocenia P. jako\u015b\u0107 kszta\u0142cenia na swoim kierunku studi\u00f3w?": [
+      0.717542901077322, 
+      0.8020570794050175, 
+      0.7309229787418631, 
+      0.6156987634551994, 
+      0.7347223270238585
+    ]
+}

barPlotNode.svg

@@ -0,0 +1,91 @@
+<svg width="400" height="300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" viewBox="0 0 400 300">
+<rect width="400" height="300" x="0" y="0" id="0" fill="none" fill-opacity="1"></rect>
+<path d="M40.5 60L40.5 230" fill="none" stroke="#E0E6F1"></path>
+<path d="M104.5 60L104.5 230" fill="none" stroke="#E0E6F1"></path>
+<path d="M168.5 60L168.5 230" fill="none" stroke="#E0E6F1"></path>
+<path d="M232.5 60L232.5 230" fill="none" stroke="#E0E6F1"></path>
+<path d="M296.5 60L296.5 230" fill="none" stroke="#E0E6F1"></path>
+<path d="M360.5 60L360.5 230" fill="none" stroke="#E0E6F1"></path>
+<path d="M40.5 230L40.5 60" fill="none" stroke="#6E7079" stroke-linecap="round"></path>
+<path d="M40 230.5L35 230.5" fill="none" stroke="#6E7079"></path>
+<path d="M40 196.5L35 196.5" fill="none" stroke="#6E7079"></path>
+<path d="M40 162.5L35 162.5" fill="none" stroke="#6E7079"></path>
+<path d="M40 128.5L35 128.5" fill="none" stroke="#6E7079"></path>
+<path d="M40 94.5L35 94.5" fill="none" stroke="#6E7079"></path>
+<path d="M40 60.5L35 60.5" fill="none" stroke="#6E7079"></path>
+<text dominant-baseline="central" text-anchor="end" style="font-size:12px;font-family:sans-serif;" transform="translate(32 213)" fill="#6E7079">Tom</text>
+<text dominant-baseline="central" text-anchor="end" style="font-size:12px;font-family:sans-serif;" transform="translate(32 179)" fill="#6E7079">Dick</text>
+<text dominant-baseline="central" text-anchor="end" style="font-size:12px;font-family:sans-serif;" transform="translate(32 145)" fill="#6E7079">Harry</text>
+<text dominant-baseline="central" text-anchor="end" style="font-size:12px;font-family:sans-serif;" transform="translate(32 111)" fill="#6E7079">Slim</text>
+<text dominant-baseline="central" text-anchor="end" style="font-size:12px;font-family:sans-serif;" transform="translate(32 77)" fill="#6E7079">Jim</text>
+<text dominant-baseline="central" text-anchor="middle" style="font-size:12px;font-family:sans-serif;" y="6" transform="translate(40 238)" fill="#6E7079">0</text>
+<text dominant-baseline="central" text-anchor="middle" style="font-size:12px;font-family:sans-serif;" y="6" transform="translate(104 238)" fill="#6E7079">1</text>
+<text dominant-baseline="central" text-anchor="middle" style="font-size:12px;font-family:sans-serif;" y="6" transform="translate(168 238)" fill="#6E7079">2</text>
+<text dominant-baseline="central" text-anchor="middle" style="font-size:12px;font-family:sans-serif;" y="6" transform="translate(232 238)" fill="#6E7079">3</text>
+<text dominant-baseline="central" text-anchor="middle" style="font-size:12px;font-family:sans-serif;" y="6" transform="translate(296 238)" fill="#6E7079">4</text>
+<text dominant-baseline="central" text-anchor="middle" style="font-size:12px;font-family:sans-serif;" y="6" transform="translate(360 238)" fill="#6E7079">5</text>
+<path d="M40 201.3l64 0l0 23.5l-64 0Z" fill="#5470c6" class="zr0-cls-0"></path>
+<path d="M40 167.3l128 0l0 23.5l-128 0Z" fill="#5470c6" class="zr0-cls-1"></path>
+<path d="M40 133.3l192 0l0 23.5l-192 0Z" fill="#5470c6" class="zr0-cls-2"></path>
+<path d="M40 99.3l256 0l0 23.5l-256 0Z" fill="#5470c6" class="zr0-cls-3"></path>
+<path d="M40 65.3l320 0l0 23.5l-320 0Z" fill="#5470c6" class="zr0-cls-4"></path>
+<style ><![CDATA[
+.zr0-cls-0 {
+animation:zr0-ani-0 1s cubic-bezier(0.65,0,0.35,1) both;
+}
+.zr0-cls-1 {
+animation:zr0-ani-1 1s cubic-bezier(0.65,0,0.35,1) both;
+}
+.zr0-cls-2 {
+animation:zr0-ani-2 1s cubic-bezier(0.65,0,0.35,1) both;
+}
+.zr0-cls-3 {
+animation:zr0-ani-3 1s cubic-bezier(0.65,0,0.35,1) both;
+}
+.zr0-cls-4 {
+animation:zr0-ani-4 1s cubic-bezier(0.65,0,0.35,1) both;
+}
+@keyframes zr0-ani-0 {
+0% {
+d:path("M40 201.3l0 0l0 23.5l0 0Z");
+}
+100% {
+d:path("M40 201.3l64 0l0 23.5l-64 0Z");
+}
+}
+@keyframes zr0-ani-1 {
+0% {
+d:path("M40 167.3l0 0l0 23.5l0 0Z");
+}
+100% {
+d:path("M40 167.3l128 0l0 23.5l-128 0Z");
+}
+}
+@keyframes zr0-ani-2 {
+0% {
+d:path("M40 133.3l0 0l0 23.5l0 0Z");
+}
+100% {
+d:path("M40 133.3l192 0l0 23.5l-192 0Z");
+}
+}
+@keyframes zr0-ani-3 {
+0% {
+d:path("M40 99.3l0 0l0 23.5l0 0Z");
+}
+100% {
+d:path("M40 99.3l256 0l0 23.5l-256 0Z");
+}
+}
+@keyframes zr0-ani-4 {
+0% {
+d:path("M40 65.3l0 0l0 23.5l0 0Z");
+}
+100% {
+d:path("M40 65.3l320 0l0 23.5l-320 0Z");
+}
+}
+]]>
+
+</style>
+</svg>

basic.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" style="user-select: none; position: absolute; left: 0px; top: 0px;" width="500" height="500"><g><rect width="500" height="500" x="0" y="0" id="0" fill="none" fill-opacity="1"></rect></g><g><defs><clipPath id="zr2323-clip-0"><path d="M 49 59 L 451 59 L 451 431 L 49 431 L 49 59 Z" fill="#000" fill-opacity="1" stroke="none"></path></clipPath></defs><path d="M 50 430.5 L 450 430.5" fill="none" stroke="#E0E6F1" stroke-width="1" paint-order="fill" stroke-opacity="1" stroke-dasharray="none" stroke-linecap="butt" stroke-miterlimit="10"></path><path d="M 50 368.5 L 450 368.5" fill="none" stroke="#E0E6F1" stroke-width="1" paint-order="fill" stroke-opacity="1" stroke-dasharray="none" stroke-linecap="butt" stroke-miterlimit="10"></path><path d="M 50 306.5 L 450 306.5" fill="none" stroke="#E0E6F1" stroke-width="1" paint-order="fill" 
+stroke-opacity="1" stroke-dasharray="none" stroke-linecap="butt" stroke-miterlimit="10"></path><path d="M 50 245.5 L 450 245.5" fill="none" stroke="#E0E6F1" stroke-width="1" paint-order="fill" stroke-opacity="1" stroke-dasharray="none" stroke-linecap="butt" stroke-miterlimit="10"></path><path d="M 50 183.5 L 450 183.5" fill="none" stroke="#E0E6F1" stroke-width="1" paint-order="fill" stroke-opacity="1" stroke-dasharray="none" stroke-linecap="butt" stroke-miterlimit="10"></path><path d="M 50 121.5 L 450 121.5" fill="none" stroke="#E0E6F1" stroke-width="1" paint-order="fill" stroke-opacity="1" stroke-dasharray="none" stroke-linecap="butt" stroke-miterlimit="10"></path><path d="M 50 60.5 L 450 60.5" fill="none" stroke="#E0E6F1" stroke-width="1" paint-order="fill" stroke-opacity="1" stroke-dasharray="none" stroke-linecap="butt" stroke-miterlimit="10"></path><path d="M 50 430.5 L 450 430.5" fill="none" stroke="#6E7079" stroke-width="1" paint-order="fill" stroke-opacity="1" stroke-dasharray="none" stroke-linecap="round" stroke-miterlimit="10"></path><path d="M 50.5 430 L 50.5 435" fill="none" stroke="#6E7079" stroke-width="1" paint-order="fill" stroke-opacity="1" stroke-dasharray="none" stroke-linecap="butt" stroke-miterlimit="10"></path><path d="M 107.5 430 L 107.5 435" fill="none" stroke="#6E7079" stroke-width="1" paint-order="fill" stroke-opacity="1" stroke-dasharray="none" stroke-linecap="butt" stroke-miterlimit="10"></path><path d="M 164.5 430 L 164.5 435" fill="none" stroke="#6E7079" stroke-width="1" paint-order="fill" stroke-opacity="1" stroke-dasharray="none" stroke-linecap="butt" stroke-miterlimit="10"></path><path d="M 221.5 430 L 221.5 435" fill="none" stroke="#6E7079" stroke-width="1" paint-order="fill" stroke-opacity="1" stroke-dasharray="none" stroke-linecap="butt" stroke-miterlimit="10"></path><path d="M 278.5 430 L 278.5 435" fill="none" stroke="#6E7079" 
+stroke-width="1" paint-order="fill" stroke-opacity="1" stroke-dasharray="none" stroke-linecap="butt" stroke-miterlimit="10"></path><path d="M 335.5 430 L 335.5 435" fill="none" stroke="#6E7079" stroke-width="1" paint-order="fill" stroke-opacity="1" stroke-dasharray="none" stroke-linecap="butt" stroke-miterlimit="10"></path><path d="M 393.5 430 L 393.5 435" fill="none" stroke="#6E7079" stroke-width="1" paint-order="fill" stroke-opacity="1" stroke-dasharray="none" stroke-linecap="butt" stroke-miterlimit="10"></path><path d="M 450.5 430 L 450.5 435" fill="none" stroke="#6E7079" stroke-width="1" paint-order="fill" stroke-opacity="1" stroke-dasharray="none" stroke-linecap="butt" stroke-miterlimit="10"></path><text xml:space="preserve" style="font: sans-serif 12px normal normal normal 12px;" fill="#6E7079" fill-opacity="1" stroke="none" transform="matrix(1,0,0,1,42,430)" dominant-baseline="central" text-anchor="end" x="0" y="0">0</text><text xml:space="preserve" style="font: sans-serif 12px normal normal normal 12px;" fill="#6E7079" fill-opacity="1" stroke="none" transform="matrix(1,0,0,1,42,368.3333)" dominant-baseline="central" text-anchor="end" x="0" y="0">50</text><text xml:space="preserve" style="font: sans-serif 12px normal normal normal 12px;" fill="#6E7079" fill-opacity="1" stroke="none" transform="matrix(1,0,0,1,42,306.6667)" dominant-baseline="central" text-anchor="end" x="0" y="0">100</text><text xml:space="preserve" style="font: sans-serif 12px normal normal normal 12px;" fill="#6E7079" fill-opacity="1" stroke="none" transform="matrix(1,0,0,1,42,245)" dominant-baseline="central" text-anchor="end" x="0" y="0">150</text><text xml:space="preserve" style="font: sans-serif 12px normal normal normal 12px;" fill="#6E7079" fill-opacity="1" stroke="none" transform="matrix(1,0,0,1,42,183.3333)" dominant-baseline="central" text-anchor="end" x="0" y="0">200</text><text 
+xml:space="preserve" style="font: sans-serif 12px normal normal normal 12px;" fill="#6E7079" fill-opacity="1" stroke="none" transform="matrix(1,0,0,1,42,121.6667)" dominant-baseline="central" text-anchor="end" x="0" y="0">250</text><text xml:space="preserve" style="font: sans-serif 12px normal normal normal 12px;" 
+fill="#6E7079" fill-opacity="1" stroke="none" transform="matrix(1,0,0,1,42,60)" dominant-baseline="central" text-anchor="end" x="0" y="0">300</text><text xml:space="preserve" style="font: sans-serif 12px normal normal normal 12px;" fill="#6E7079" fill-opacity="1" stroke="none" transform="matrix(1,0,0,1,78.5714,438)" dominant-baseline="central" text-anchor="middle" x="0" y="6">Mon</text><text xml:space="preserve" style="font: sans-serif 12px normal normal normal 12px;" fill="#6E7079" fill-opacity="1" stroke="none" transform="matrix(1,0,0,1,135.7143,438)" dominant-baseline="central" text-anchor="middle" x="0" y="6">Tue</text><text xml:space="preserve" style="font: sans-serif 12px normal normal normal 12px;" fill="#6E7079" fill-opacity="1" stroke="none" transform="matrix(1,0,0,1,192.8571,438)" dominant-baseline="central" text-anchor="middle" x="0" y="6">Wed</text><text xml:space="preserve" style="font: sans-serif 12px normal normal normal 12px;" fill="#6E7079" fill-opacity="1" stroke="none" transform="matrix(1,0,0,1,250,438)" dominant-baseline="central" text-anchor="middle" x="0" y="6">Thu</text><text xml:space="preserve" style="font: sans-serif 12px normal normal normal 12px;" fill="#6E7079" fill-opacity="1" stroke="none" transform="matrix(1,0,0,1,307.1429,438)" dominant-baseline="central" text-anchor="middle" x="0" y="6">Fri</text><text xml:space="preserve" style="font: sans-serif 12px normal normal normal 12px;" fill="#6E7079" fill-opacity="1" stroke="none" transform="matrix(1,0,0,1,364.2857,438)" dominant-baseline="central" text-anchor="middle" x="0" y="6">Sat</text><text xml:space="preserve" style="font: sans-serif 12px normal normal normal 12px;" fill="#6E7079" fill-opacity="1" stroke="none" transform="matrix(1,0,0,1,421.4286,438)" dominant-baseline="central" text-anchor="middle" x="0" y="6">Sun</text><g clip-path="url(#zr2323-clip-0)"><path d="M 78.5714 245 L 
+135.7143 146.3333 L 192.8571 153.7333 L 250 161.1333 L 307.1429 263.5 L 364.2857 248.7 L 421.4286 109.3333" fill="none" stroke="#5470c6" stroke-width="2" paint-order="fill" stroke-opacity="1" stroke-dasharray="none" stroke-linecap="butt" stroke-linejoin="bevel" stroke-miterlimit="10"></path></g><path d="M 1 0 A 1 1 0 1 1 1 -0.0001" fill="#fff" fill-opacity="1" stroke="#5470c6" stroke-width="0" paint-order="fill" stroke-opacity="1" stroke-dasharray="none" stroke-linecap="butt" stroke-miterlimit="10" transform="matrix(0,0,0,0,78.5714,245)"></path><path d="M 1 0 A 1 1 0 1 1 1 -0.0001" fill="#fff" fill-opacity="1" stroke="#5470c6" stroke-width="0" paint-order="fill" stroke-opacity="1" stroke-dasharray="none" stroke-linecap="butt" stroke-miterlimit="10" transform="matrix(0,0,0,0,135.7143,146.3333)"></path><path d="M 1 0 A 1 1 0 1 1 1 -0.0001" fill="#fff" fill-opacity="1" stroke="#5470c6" stroke-width="0" paint-order="fill" stroke-opacity="1" stroke-dasharray="none" stroke-linecap="butt" stroke-miterlimit="10" transform="matrix(0,0,0,0,192.8571,153.7333)"></path><path d="M 1 0 A 1 1 0 1 1 1 -0.0001" fill="#fff" fill-opacity="1" stroke="#5470c6" stroke-width="0" paint-order="fill" stroke-opacity="1" stroke-dasharray="none" stroke-linecap="butt" stroke-miterlimit="10" transform="matrix(0,0,0,0,250,161.1333)"></path><path d="M 1 0 A 1 1 0 1 1 1 -0.0001" fill="#fff" fill-opacity="1" stroke="#5470c6" stroke-width="0" paint-order="fill" stroke-opacity="1" stroke-dasharray="none" stroke-linecap="butt" stroke-miterlimit="10" transform="matrix(0,0,0,0,307.1429,263.5)"></path><path d="M 1 0 A 1 1 0 1 1 1 -0.0001" fill="#fff" fill-opacity="1" stroke="#5470c6" stroke-width="0" paint-order="fill" stroke-opacity="1" stroke-dasharray="none" stroke-linecap="butt" stroke-miterlimit="10" transform="matrix(0,0,0,0,364.2857,248.7)"></path><path d="M 1 0 A 1 1 0 1 1 1 -0.0001" fill="#fff" fill-opacity="1" stroke="#5470c6" stroke-width="0" paint-order="fill" stroke-opacity="1" stroke-dasharray="none" stroke-linecap="butt" stroke-miterlimit="10" transform="matrix(0,0,0,0,421.4286,109.3333)"></path></g></svg>

benchmarks.js

@@ -0,0 +1,166 @@
+const print = (x)=>console.log(x)
+const fs = require('fs');
+const mockData = require("./data.js");
+var { performance } = require('perf_hooks');
+const {init, createSingleChart} = require("./nativeSsr.js")
+const { fig2img } = require("./ssr.js");
+const renderer = require("./ssr.js")
+const {getMultipleBarsChartDataFromAnkieterDataFormat, rawData,prepareOptionsForMultipleBarsChartData} = require("./optionsGenerator.js")
+
+const benchmark_to_csv = (results)=>{
+    let csv = "";
+    for (let [k,v] of Object.entries(results))
+        csv += `${k}, ${v}\n`
+    return csv
+}
+const timeit = (fun, number=1,prepare=()=>null)=>{
+    let time=0
+    for(let _=0; _<number;_++){
+        // console.log(_)
+        prepare()
+        const startTime = performance.now();
+        fun()
+        const endTime = performance.now();
+        // console.log(endTime-startTime)
+        time+=endTime-startTime;
+    }
+
+    return time
+}
+const benchmark_linear=(start,end,func,prepare=()=>null)=>{
+    const out ={};
+    for (let i =start; i<end; i++)
+        out[i] = timeit(func, i,prepare);
+    return out;
+}
+const benchmark_series = (number, func, prepare=()=>null)=>{
+  const out ={};
+  for (let i =0; i<number; i++)
+      out[i] = timeit(func, 1,prepare);
+  return out;
+}
+
+
+  function sleep(ms) {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  }
+// let root = renderer.createNewRoot()
+// console.log(root)
+const measureUnits = async ()=>{
+    const c = performance.now()
+    await sleep(1000)
+    console.log(performance.now()-c)
+}
+let option = prepareOptionsForMultipleBarsChartData(getMultipleBarsChartDataFromAnkieterDataFormat(mockData.response))
+fs.writeFileSync("option.txt",JSON.stringify(option))
+option = {
+  legend: {},
+  tooltip: {},
+  dataset: {
+    // Define the dimension of array. In cartesian coordinate system,
+    // if the type of x-axis is category, map the first dimension to
+    // x-axis by default, the second dimension to y-axis.
+    // You can also specify 'series.encode' to complete the map
+    // without specify dimensions. Please see below.
+
+    dimensions: ['1','2015','2016'],
+    source: [
+      { "1": 5, '2015': 43.3, '2016': 85.8, '2017': 93.7 },
+      { "1": 2, '2015': 83.1, '2016': 73.4, '2017': 55.1 },
+      { "1": 1, '2015': 86.4, '2016': 65.2, '2017': 82.5 },
+      { "1": 8, '2015': 72.4, '2016': 53.9, '2017': 39.1 }
+    ]
+  },
+  xAxis: { type: 'value' },
+  yAxis: {type:"category"},
+  series: [{ type: 'bar', 'stack':'total' }, { type: 'bar','stack':'total' }, { type: 'bar','stack':'total' }]
+};
+
+option = {
+  xAxis: {
+    type: 'category',
+    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+  },
+  yAxis: {
+    type: 'value'
+  },
+  series: [
+    {
+      data: [150, 230, 224, 218, 135, 147, 260],
+      type: 'line'
+    }
+  ]
+};
+
+option = {
+  xAxis: {
+    type: 'value',
+    
+  },
+  yAxis: {
+    type: 'category',
+    data: ['Tom', 'Dick', 'Harry', 'Slim', 'Jim']
+  },
+  series: [
+    {
+      data: [1,2,3,4,5],
+      type: 'bar'
+    }
+  ]
+};
+
+const benchmarkDataTransformationFromAnkieterToEchartsFormat = ()=>{
+  console.log(benchmark_linear(1,100, ()=>prepareOptionsForMultipleBarsChartData(getMultipleBarsChartDataFromAnkieterDataFormat(mockData.response))))
+  console.log(benchmark_to_csv(benchmark_linear(1,100, ()=>prepareOptionsForMultipleBarsChartData(getMultipleBarsChartDataFromAnkieterDataFormat(mockData.response)))))
+}
+
+const warmup = ()=>{
+  benchmark_to_csv(benchmark_linear(1,20,
+    ()=>{
+        return createSingleChart(option)
+    },
+    ()=>{
+       option.series[0].data=[Math.random(),Math.random(),Math.random(),Math.random(),Math.random(),Math.random(),Math.random()]
+    }
+    )
+  )
+}
+// warmup()
+const number=100
+
+benchmarkDataTransformationFromAnkieterToEchartsFormat()
+// fs.writeFileSync("barPlotNode.svg", createSingleChart(option))
+
+// const res1 = benchmark_to_csv(benchmark_linear(1,number,
+//     ()=>{
+//         return createSingleChart(option)
+//     },
+//     ()=>{
+//         // option = JSON.parse(JSON.stringify(option))
+//         // option.series[0].data=[Math.random(),Math.random(),Math.random(),Math.random(),Math.random(),Math.random(),Math.random()]
+
+//     }
+//     )
+// )
+// print("Liniowy benchmark z generowanien nowej instancji wykresu za każdym razem")
+// print(res1)
+// console.log(createSingleChart(option))
+// const chartInstance = generateChartObject(root)
+// const linearBenchmarkOnExistingInstance = benchmark_to_csv(benchmark_linear(1,number, ()=>{
+//   return generateChart(root,chartInstance,option)
+// }))
+// print("Liniowy benchmark na wczesniej przygotowanej instancji wykresu")
+// print(linearBenchmarkOnExistingInstance)
+
+// const res2 = benchmark_to_csv(benchmark_linear(1,number,()=>fig2img(root,generateChart(root, chartInstance,option), false) ))
+// print("Liniowy benchmark create from scratch  + save")
+// print(res2)
+
+// let linearBufforSaveInstance = generateChartObject(root)
+// let figure = generateChart(root,linearBufforSaveInstance, option)
+
+// const res3= benchmark_to_csv(benchmark_linear(1,number,()=>fig2img(root, figure, false) ))
+// print("Liniowy benchmark zapisywania do bufora")
+// print(res3)

chartData.json

@@ -0,0 +1 @@
+{"ocena ogólna":{"1":0.21,"2":0.2,"3":0.213,"4":0.183,"5":0.194},"ocena jedzenia":{"1":0.18,"2":0.189,"3":0.202,"4":0.223,"5":0.206},"ocena obsługi":{"1":0.215,"2":0.196,"3":0.196,"4":0.194,"5":0.199},"Czy przyjdziesz ponownie?":{"0":0.468,"1":0.532}}

chartjs.html

@@ -0,0 +1,39 @@
+<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.0/dist/chart.min.js"></script>
+<canvas id="myChart" width="400" height="400"></canvas>
+<script>
+var ctx = document.getElementById('myChart').getContext('2d');
+const data = {
+  labels: ['January', 'February', 'April', 'March', 'June', 'July'],
+  datasets: [
+    {
+      label: 'Dataset 1',
+      data: [1,2,3,4,5,6],
+    },
+    
+  ]
+};
+
+const config = {
+  type: 'bar',
+  data: data,
+  options: {
+    indexAxis: 'y',
+    elements: {
+      bar: {
+        borderWidth: 2,
+      }
+    },
+  
+    plugins: {
+      legend: {
+        position: 'right',
+      },
+      title: {
+        display: true,
+        text: 'Chart.js Horizontal Bar Chart'
+      }
+    }
+  },
+};
+var myChart = new Chart(ctx, config);
+</script>

csv_generator.html

@@ -0,0 +1 @@
+<script src="csv_generator.js"></script>

csv_generator.js

@@ -0,0 +1,66 @@
+const fs = require('fs');
+const { Obj } = require('prelude-ls');
+
+const timeit = (fun, number)=>{
+    const startTime = performance.now();
+    for(let _=0; _<number;_++)fun();
+    const endTime = performance.now();
+    return endTime-startTime;
+}
+
+const randint = (min,max)=>Math.floor(Math.random() * (max - min + 1)) + min;
+const zeroToFiveGrade = ()=>randint(1,5)
+const yesOrNo = ()=>randint(0,1)
+const columns = {
+    "ocena ogólna":zeroToFiveGrade,
+    "ocena jedzenia":zeroToFiveGrade,
+    "ocena obsługi":zeroToFiveGrade,
+    "Czy przyjdziesz ponownie?":yesOrNo
+}
+const rows_count=1000
+const raw_data = new Array(rows_count).fill(undefined).map(x=>Object.values(columns).map(v=>v()))
+
+const transform_csv = (columns,raw_data)=>{
+    const count_data = {}
+    for (let [i, column] of Object.keys(columns).entries()){
+        const values_count = {}
+        const values_percent = {}
+        let total = 0
+        for (let row of raw_data){
+            if (!values_count[row[i]]) values_count[row[i]]=0
+            values_count[row[i]]+=1
+            total+=1
+        }
+        for (let value of Object.keys(values_count))
+            values_percent[value] = values_count[value]/total
+        count_data[column]=values_percent
+    }
+
+    return count_data
+}
+
+if (!performance) //if running in node.js
+    var { performance } = require('perf_hooks');
+
+
+console.log(timeit(()=>transform_csv(columns,raw_data), 1000))
+console.log(timeit(()=>JSON.parse(JSON.stringify(raw_data)), 1000))
+
+fs.writeFileSync('chartData.json', JSON.stringify(transform_csv(columns, raw_data)), 'utf-8');
+let generateDataset = (transformed_csv)=>{
+    console.log(transformed_csv)
+    const dataset = {dimensions: ["question", "1","2","3","4","5"]}
+    const source = Object.entries(transformed_csv).map(([key,value])=>{
+        return {question:key, ...value}
+    })
+    dataset.source=source;
+    return dataset
+}
+let generateSeries = (dataset)=>{
+    return dataset.map(x=>({ type: 'bar', stack:'total'}))
+}
+console.log(generateDataset(transform_csv(columns,raw_data)))
+const renderer = require("./ssr.js")
+console.log("imported..")
+
+renderer.generateChart(renderer.root, {})

csv_generator.py

@@ -0,0 +1,29 @@
+from collections import defaultdict
+import copy
+import random
+
+from numpy.core.fromnumeric import sort
+oneToFiveGrade = lambda: random.randint(1,5) 
+yesOrNo = lambda: random.randint(0,1)
+columns = {
+    "ocena ogolna":oneToFiveGrade,
+    "ocena jedzenia":oneToFiveGrade,
+    "ocena obslugi":oneToFiveGrade, 
+    "ocena wystroju":oneToFiveGrade, 
+    "ocena karty dan":oneToFiveGrade, 
+    "ocena cen":oneToFiveGrade, 
+    "ocena lokalizacji":oneToFiveGrade, 
+    "ocena przystawek":oneToFiveGrade, 
+    "ocena karty win":oneToFiveGrade, 
+    "Co ci sie podobalo - obsluga":yesOrNo,
+    "Co ci sie podobalo - ceny":yesOrNo,
+    "Co ci sie podobalo - wystroj":yesOrNo,
+    "Czy przyjdziesz ponownie - prosze zaznaczyc wszystkie powody - obsluga":yesOrNo,
+    "Czy przyjdziesz ponownie - prosze zaznaczyc wszystkie powody - ceny":yesOrNo,
+    "Czy przyjdziesz ponownie - prosze zaznaczyc wszystkie powody - jakosc dan":yesOrNo,
+}
+rows_count = 1000
+raw_data = [[func() for func in columns.values()] for _ in range(rows_count)]
+string_data = "\n".join([",".join([str(entry) for entry in row]) for row in [columns.keys()] + raw_data])
+with open("data.csv", "w+", encoding="utf-8") as csv_file:
+    csv_file.write(string_data)

data.js

@@ -0,0 +1,125 @@
+const query = {
+    "as":[
+       "share",
+       "median",
+       "std",
+       "mean",
+       "rows"
+    ],
+    "by":[
+       "Na którym stopniu studiów P. studiuje?",
+       "*"
+    ],
+    "get":[
+       [
+          "Jak ogólnie ocenia P. jakość kształcenia na swoim kierunku studiów?"
+       ]
+    ],
+    "if":[
+       [
+          "Jak ogólnie ocenia P. jakość kształcenia na swoim kierunku studiów?",
+          "in",
+          "3",
+          "2",
+          "5",
+          "4"
+       ],
+       [
+          0,
+          "notin",
+          "9999",
+          "999"
+       ],
+       [
+          3,
+          "notin",
+          "9999"
+       ],
+       [
+          1,
+          "notin",
+          "9999"
+       ],
+       [
+          2,
+          "notin",
+          "9999"
+       ]
+    ],
+    "except":[
+       
+    ]
+}
+ const response = {
+    "index": [
+      1, 
+      2, 
+      3, 
+      9999, 
+      "*"
+    ], 
+    "mean Jak og\u00f3lnie ocenia P. jako\u015b\u0107 kszta\u0142cenia na swoim kierunku studi\u00f3w?": [
+      4.026791277258567, 
+      3.9738903394255876, 
+      4.008928571428571, 
+      3.4444444444444446, 
+      4.0111016225448335
+    ], 
+    "median Jak og\u00f3lnie ocenia P. jako\u015b\u0107 kszta\u0142cenia na swoim kierunku studi\u00f3w?": [
+      4.0, 
+      4.0, 
+      4.0, 
+      3.5, 
+      4.0
+    ], 
+    "rows Jak og\u00f3lnie ocenia P. jako\u015b\u0107 kszta\u0142cenia na swoim kierunku studi\u00f3w?": [
+      1605, 
+      383, 
+      336, 
+      18, 
+      2342
+    ], 
+    "share Jak og\u00f3lnie ocenia P. jako\u015b\u0107 kszta\u0142cenia na swoim kierunku studi\u00f3w?": [
+      {
+        "2": 34, 
+        "3": 290, 
+        "4": 880, 
+        "5": 401
+      }, 
+      {
+        "2": 18, 
+        "3": 74, 
+        "4": 191, 
+        "5": 100
+      }, 
+      {
+        "2": 12, 
+        "3": 52, 
+        "4": 193, 
+        "5": 79
+      }, 
+      {
+        "2": 1, 
+        "3": 8, 
+        "4": 9
+      }, 
+      {
+        "2": 65, 
+        "3": 424, 
+        "4": 1273, 
+        "5": 580
+      }
+    ], 
+    "std Jak og\u00f3lnie ocenia P. jako\u015b\u0107 kszta\u0142cenia na swoim kierunku studi\u00f3w?": [
+      0.717542901077322, 
+      0.8020570794050175, 
+      0.7309229787418631, 
+      0.6156987634551994, 
+      0.7347223270238585
+    ]
+}
+const mockData = {query: query, response:response}
+module.exports = {
+  mockData:mockData,
+  response:response,
+}

data_tranformations.py

@@ -0,0 +1,131 @@
+from collections import defaultdict
+import copy
+import random
+from PIL import Image
+from numpy.core.fromnumeric import sort
+
+with open("data.csv") as f:
+    raw_data = [line.replace("\n","").split(",") for line in f.readlines()]
+    columns=copy.deepcopy(raw_data[0])
+    raw_data=raw_data[1:]
+
+def transform_csv(columns, raw_data):
+    count_data={}
+    for i,column in enumerate(columns):
+        values_count=defaultdict(lambda: 0)
+        values_percent={}
+        total=0
+        for row in raw_data:
+            values_count[row[i]]+=1
+            total+=1
+        for value in values_count.keys():
+            values_percent[value] = values_count[value]/total
+        count_data[column] = values_percent
+    return count_data
+import timeit
+time_result = timeit.timeit(lambda: transform_csv(columns,raw_data), number=1)
+print(time_result*1000)
+def generate_dataset(transformed_csv):
+    # print(transformed_csv)
+    legend = list(transformed_csv.keys())
+    series = [[entry[1] for entry in sorted(list(values.items()), key= lambda x: x[0])] for values in transformed_csv.values()]
+    return (legend,series)
+
+def fig2img(fig):
+    import io
+    buf = io.BytesIO()
+    fig.savefig(buf, format="svg")
+    buf.seek(0)
+    plt.close(fig)
+    return buf
+# importing package
+import matplotlib.pyplot as plt
+import numpy as np
+def benchmark_linear_to_csv(results):
+    csv = ""
+    for k, v in results.items():
+        csv += f"{k}, {v}\n"
+    return csv
+
+def benchmark_linear(start,end,function):
+    out = {}
+    for i in range(start,end):
+        out[i] = timeit.timeit(function, number=i)*1000
+    return out
+# create data
+def createLinePlot():
+    x = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+    y = [150, 230, 224, 218, 135, 147, 260]
+    fig,ax1 = plt.subplots()
+    ax1.plot(x,y)
+    return fig
+
+def createBarPlot():
+    np.random.seed(19680801)
+    plt.rcdefaults()
+    fig, ax = plt.subplots()
+    # Example data
+    people = ('Tom', 'Dick', 'Harry', 'Slim', 'Jim')
+    y_pos = np.arange(len(people))
+    performance = [1,2,3,4,5]
+
+    ax.barh(y_pos, performance, align='center')
+    ax.set_yticks(y_pos, labels=people)
+    ax.invert_yaxis()  
+    ax.set_xlabel('Performance')
+    ax.set_title('How fast do you want to go today?')
+    return fig
+
+
+
+def createPlotFromStratch():
+
+    x = ['1', '2', '3', '4', '5']
+    dataset = generate_dataset(transform_csv(columns,raw_data))
+
+    set_already = []
+
+    dataset = (dataset[0][0], dataset[1][0])
+
+    # print("dataset")
+    # print(dataset)
+    labels = dataset[0]
+    fig,ax = plt.subplots()
+    already = [0]
+    for bar_series in zip(x,dataset[1]):
+        # print(already)
+        # print(bar_series)
+        ax.barh(labels, bar_series[1], 0.1, label=bar_series[0], left=sum(already))
+        already=already+[bar_series[1]]
+    ax.set_ylabel("Wyniki")
+    ax.legend()
+    return fig
+# print("Czas tworzenia i zapisywania 100 wykresów:")
+# time_result = timeit.timeit(lambda: fig2img(createPlotFromStratch()), number=100)
+# print(time_result*1000)
+
+# print("Czas zapisywania 100 wykresów:")
+# figure = createPlotFromStratch()
+# time_result = timeit.timeit(lambda: fig2img(figure), number=100)
+# print(time_result*1000)
+with open("barPlotPython.svg", 'wb+') as f:
+    f.write(fig2img(createBarPlot()).read())
+input()
+print("Liniowy benchmark create from scratch")
+def generate_and_close():
+    fig = createPlotFromStratch()
+    plt.close('all')
+    plt.close()
+    plt.cla()
+    plt.clf()
+    
+# print(benchmark_linear_to_csv(benchmark_linear(1,5,lambda:plt.close(createPlotFromStratch()) )))
+
+print(benchmark_linear_to_csv(benchmark_linear(1,20,lambda:plt.close(createBarPlot()) )))
+
+# print("Liniowy benchmark create from scratch  + save")
+# print(benchmark_linear_to_csv(benchmark_linear(1,20,lambda: fig2img(createPlotFromStratch()) )))
+
+# print("Liniowy benchmark zapisywania do bufora")
+# print(benchmark_linear_to_csv(benchmark_linear(1,25,lambda: fig2img(figure) )))
+

fragmentOCSV.txt

@@ -0,0 +1,41 @@
+
+Przykładowe dane zostały wygenerowane następującym skryptem w języku Python 3:
+\begin{lstlisting}
+import random
+oneToFiveGrade = lambda: random.randint(1,5) 
+yesOrNo = lambda: random.randint(0,1)
+columns = {
+    "ocena ogolna":oneToFiveGrade,
+    "ocena jedzenia":oneToFiveGrade,
+    "ocena obslugi":oneToFiveGrade, 
+    "ocena wystroju":oneToFiveGrade, 
+    "ocena karty dan":oneToFiveGrade, 
+    "ocena cen":oneToFiveGrade, 
+    "ocena lokalizacji":oneToFiveGrade, 
+    "ocena przystawek":oneToFiveGrade, 
+    "ocena karty win":oneToFiveGrade, 
+    "Co ci sie podobalo - obsluga":yesOrNo,
+    "Co ci sie podobalo - ceny":yesOrNo,
+    "Co ci sie podobalo - wystroj":yesOrNo,
+    "Czy przyjdziesz ponownie - prosze zaznaczyc wszystkie powody 
+    - obsluga":yesOrNo,
+    "Czy przyjdziesz ponownie - prosze zaznaczyc wszystkie powody
+    - ceny":yesOrNo,
+    "Czy przyjdziesz ponownie - prosze zaznaczyc wszystkie powody
+    - jakosc dan":yesOrNo,
+}
+rows_count = 1000
+raw_data = [
+    [func() for func in columns.values()]
+    for _ in range(rows_count)
+]
+string_data = "\n".join(
+    [",".join(
+       [str(entry) for entry in row]
+    ) for row in [columns.keys()] + raw_data]
+)
+with open("data.csv", "w+", encoding="utf-8") as csv_file:
+    csv_file.write(string_data)
+
+\end{lstlisting}
+Skrypt generuje plik CSV z losowymi danymi używanymi w dalszej części.

hartocsv.py

@@ -0,0 +1,16 @@
+import json
+import sys
+sys.stdout.reconfigure(encoding='utf-8')
+f = json.loads(open("har.har", 'r', encoding='utf-8').read())
+csv = "rozmiar, czas, czas blokady, czas polaczenia, czas procesowania\n"
+for entry in f['log']['entries']:
+    if 'data' in entry['request']['url']:
+        size = entry['request']['bodySize'] + entry['request']['headersSize'] + entry['response']['bodySize'] + entry['response']['headersSize']
+        size=size*0.001
+        time = entry['time']
+        blocking = entry['timings']['blocked']
+        if blocking<0: blocking=0
+        connection = entry['timings']['dns'] + entry['timings']['connect'] + entry['timings']['ssl']
+        processingTime = entry['timings']['wait']
+        csv += f'{size}, {time}, {blocking}, {connection}, {processingTime}\n'
+print(csv)

nativeSsr.js

@@ -0,0 +1,20 @@
+const echarts = require('echarts');
+
+const init = (w=400,h=300)=> echarts.init(null, null, {
+    renderer: 'svg', 
+    ssr: true, 
+    width: w, 
+    height: h
+  });
+const createSingleChart = (option,w=400,h=300)=>{
+      const chart = init(w,h)
+      chart.setOption(option);
+      const str = chart.renderToSVGString()
+      chart.dispose()
+      return str;
+}
+
+module.exports = {
+    init:init,
+    createSingleChart:createSingleChart
+}

optimalizationExample.js

@@ -0,0 +1,26 @@
+var { performance } = require('perf_hooks');
+const timeit = (fun, number=1,prepare=()=>null)=>{
+    let time=0
+    for(let _=0; _<number;_++){
+        // console.log(_)
+        prepare()
+        const startTime = performance.now();
+        fun()
+        const endTime = performance.now();
+        // console.log(endTime-startTime)
+        time+=endTime-startTime;
+    }
+
+    return time
+}
+
+
+
+//inline caches
+function load(a){
+    return a.key;
+}
+const o = {key:Math.random()}
+for (let i=0; i<10000; i++){
+    console.log(i+","+timeit(()=>load(o), 1, ()=>o.key = Math.random() ))
+}

optimizationExample.py

@@ -0,0 +1,20 @@
+import timeit,random
+def precise_timeit(fun, number=1,prepare=lambda:None):
+    time=0
+    for _ in range(number):
+        # prepare()
+        time+=timeit.timeit(lambda: fun())
+    return time
+
+
+class TestClass:
+    def __init__(self):
+        self.key=random.randint(0,99999)
+
+def load(a):
+    return a.key
+def set_value(a):
+    a.key=random.randint(0,99999)
+o = TestClass()
+for i in range(10000):
+    print(f"{i},{timeit.timeit(lambda:load(o), number=1)*1000}")

option.txt

@@ -0,0 +1 @@
+{"animation":false,"color":"#3b3b3b","pxHeight":280,"legend":{"textStyle":{"fontSize":11}},"dataset":{"dimensions":["1","2","3","4","5"],"source":[{"1":0,"2":34,"3":290,"4":880,"5":401},{"1":0,"2":18,"3":74,"4":191,"5":100},{"1":0,"2":12,"3":52,"4":193,"5":79},{"1":0,"2":1,"3":8,"4":9,"5":0},{"1":0,"2":65,"3":424,"4":1273,"5":580}]},"grid":{"top":60,"left":"3%","right":"4%","bottom":"3%","containLabel":true},"xAxis":{"type":"value","show":false,"animation":false,"max":100,"axisLabel":{}},"yAxis":{"type":"category","show":true,"data":[1,2,3,9999,"*"]},"series":[{"type":"bar","stack":"total"},{"type":"bar","stack":"total"},{"type":"bar","stack":"total"}]}

optionsGenerator.js

@@ -0,0 +1,97 @@
+const fs = require('fs');
+const rawData = fs.readFileSync("chartData.json",{encoding:"utf-8"})
+const restaurantData = JSON.parse(rawData)
+const { mockData,response } = require("./data.js");
+
+
+
+const R = require("ramda")
+let print = R.curry((label, x)=>{console.log("\n"+label);console.log("-----");console.dir(x, {depth:null}); return x});
+const transform = (data)=>{
+    const entries = Object.entries(data)
+    const groups = data.index
+    const entriesExceptForIndices = entries.filter(x=>x[0]!='index')
+    const tableHeader = Object.entries(entriesExceptForIndices.map(x=>x[0]))
+    const tableRows = entriesExceptForIndices.map(x=>Object.entries(x[1]))
+    return {headers:tableHeader, rows:tableRows, groups:groups}
+}
+
+const transpose = (data)=>{
+    return {groups:data.groups, headers:data.headers.map(z=>z[1]), rows: data.headers.map(x=>{
+        const index = x[0]
+        return data.rows.map(v=>v.find(inner=>inner[0]===index)[1])
+    })}
+}
+const mergeIntoOneArray = (data)=>{
+    return {groups:data.groups,data: [data.headers, ...data.rows]}
+}
+const getData = R.curry((data)=>data.data)
+const transformToDataset = R.compose(mergeIntoOneArray, transpose, transform)
+
+const extractSeriesByName = R.curry((name,data)=>{
+    const index = R.findIndex((x)=>x.includes(name))(getData(data)[0])
+   
+    return {groups:data.groups, name:getData(data)[0][index], data:
+        R.slice(1,Infinity)(
+        R.map(
+            R.curry((x)=>x[index]),
+        )(getData(data)))}
+})
+const complementShareSeries = R.curry((allKeys, data)=>{
+    const template = R.fromPairs(
+        R.map(o=>[o,0])(allKeys)
+        )
+
+    return {groups:data.groups, name:data.name, data: R.map(
+        (x)=>{
+             return R.fromPairs()(R.map(
+                key=>{
+                    const surveyValue = x[key]
+                    if (surveyValue) return [key,surveyValue]
+                    return [key,0]
+                }
+            )(R.keys(template))
+             )
+        }
+    )(data.data)}
+})
+
+const extractShareSeries = extractSeriesByName("share")
+
+const getChartData = R.compose(complementShareSeries(['1','2','3','4','5']), extractShareSeries,transformToDataset)
+const prepareOptions = (chartData)=>{
+    return {
+      animation:false,
+      color: '#3b3b3b',
+      pxHeight: chartData.groups.length * (120 / 3) + 80,
+      legend: {
+        
+        textStyle:{fontSize:11},
+      },
+      dataset:{
+          dimensions:Object.keys(chartData.data[0]),
+          source:chartData.data
+      },
+      grid: {
+        top:60,
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true
+      },
+      xAxis: {type: 'value', show: false, animation: false, max: 100, axisLabel: {formatter: (value, index) => `${value}%`}},
+      yAxis: {
+        type: 'category', show: true, data:chartData.groups
+      },
+      series: [
+        {type: 'bar', stack:'total'},
+        {type: 'bar',stack:'total'},
+        {type: 'bar',stack:'total'}
+    ]
+    }
+  }
+module.exports = {
+    getMultipleBarsChartDataFromAnkieterDataFormat:getChartData,
+    prepareOptionsForMultipleBarsChartData:prepareOptions,
+    rawData:rawData,
+}

package.json

@@ -0,0 +1,19 @@
+{
+  "name": "em_praca",
+  "version": "1.0.0",
+  "description": "",
+  "main": "main.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "canvas": "^2.9.0",
+    "echarts": "^5.3.0",
+    "echarts-ssr": "0.0.1",
+    "jsdom": "^18.1.0",
+    "ramda": "^0.28.0",
+    "svg-png-converter": "^0.0.9"
+  }
+}

renderTime.html

@@ -0,0 +1 @@
+<img src="barChart.png">

ssr.js

@@ -0,0 +1,70 @@
+
+var { performance } = require('perf_hooks');
+const timeit = (fun, number)=>{
+
+    const startTime = performance.now();
+    for(let _=0; _<number;_++)fun();
+    const endTime = performance.now();
+    return endTime-startTime;
+}
+const echarts = require("echarts");
+const {createCanvas} = require('canvas');
+const {svg2png} = require('svg-png-converter')
+
+const fs = require('fs');
+const { number } = require('echarts');
+// echarts.setCanvasCreator(() => {
+//     return createCanvas(100, 100);
+// });
+
+
+const {JSDOM} = require('jsdom');
+const {window} = new JSDOM();
+global.window = window;
+global.navigator = window.navigator;
+global.document = window.document;
+Object.defineProperty(window, "clientWidth", {value: 500});
+Object.defineProperty(window, "clientHeight", {value: 500});
+console.log("finished canvas setup.")
+const createNewRoot = (window)=>{
+    let root = window.document.createElement('div');
+    root.style.cssText = 'width: 500px; height: 500px;';
+    window.document.body.appendChild(root)
+    return root
+}
+const generateChartObject = (root)=>{
+    const chart = echarts.init(root, null, {
+        renderer: 'svg'
+    });
+    return chart;
+}
+const generateChart = (root,chart, options)=>{
+    chart.setOption(options);
+    return chart
+}
+const fig2img = (root,chart,dispose=true)=>{
+    const svgFile = root.querySelector('svg').outerHTML;
+    if (dispose) chart.dispose();
+    return svgFile;
+}
+
+const convertToPng = async (src)=>{
+    let s = await svg2png({
+        input:src,
+        encoding: 'dataURL',
+        format: 'png',
+        width: 100,
+        height: 100,
+        multiplier: .7,
+        quality: .5
+      })
+}
+module.exports = {
+    echarts:echarts,
+    g:global,
+    createNewRoot:createNewRoot,
+    convert:convertToPng,
+    fig2img:fig2img,
+    generateChart:generateChart,
+    generateChartObject:generateChartObject,
+}