{"version":3,"sources":["https://lively-kernel.org/lively4/lively4-livelyenergy/src/components/demo/lively-simulation-chart-view.js"],"names":["Morph","_","Chart","LivelySimulationChartView","initialize","ctx","get","type","options","animation","duration","elements","line","tension","hover","animationDuration","maintainAspectRatio","plugins","colorschemes","scheme","responsive","responsiveAnimationDuration","scales","xAxes","scaleLabel","display","labelString","yAxes","showLines","attachedCallback","registerVisibilityUpdater","detachedCallback","isActive","append","timestamp","entry","chart","keyedDatasets","keyBy","newDatasets","difference","keys","forEach","toPairs","label","dataset","x","y","data","update","reset","selector","shadowRoot","querySelector"],"mappings":"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","file":"lively-simulation-chart-view.js","sourcesContent":["/*MD\n  ![](https://lively-kernel.org/lively4/lively4-core/demos/lively-simulation/screenshots/chart-view.png){width=500px}\nMD*/\n\n\"enable aexpr\";\n\nimport Morph from 'src/components/widgets/lively-morph.js';\nimport _ from 'src/external/lodash/lodash.js';\nimport Chart from 'src/external/chart.js';\nimport 'src/external/chartjs-plugin-colorschemes.js';\n\nexport default class LivelySimulationChartView extends Morph {\n  \n  // life cycle\n  initialize() {\n    const ctx = this.get('#chart').getContext('2d');\n    this.chart = new Chart(ctx, {\n      type: 'scatter',\n      options: {\n        animation: {\n            duration: 0 // general animation time\n        },\n        elements: {\n            line: {\n                tension: 0 // disables bezier curves\n            }\n        },\n        hover: {\n            animationDuration: 0 // duration of animations when hovering an item\n        },\n        maintainAspectRatio: false,\n        plugins: {\n          colorschemes: {\n            scheme: 'office.Office6'\n          }\n        },\n        responsive: true,\n        responsiveAnimationDuration: 0, // animation duration after a resize\n        scales: {\n          xAxes: [{\n            scaleLabel: {\n              display: true,\n              labelString: 'Time in ms'\n            },\n            type: 'linear',\n          }],\n          yAxes: [{\n            scaleLabel: {\n              display: true,\n              labelString: 'Value'\n            }\n          }]\n        },\n        showLines: false\n      }\n    });\n  }\n  \n  attachedCallback() {\n    this.registerVisibilityUpdater();\n  }\n  \n  detachedCallback() {\n    this.visibilityUpdater.dispose();\n  }\n  \n  registerVisibilityUpdater() {\n    this.visibilityUpdater = aexpr(() => this.classList.contains('active')).onChange((isActive) => isActive && this.chart.update());\n  }\n  \n  // other\n  append(timestamp, entry) {\n    const { chart } = this;\n    const keyedDatasets = _.keyBy(chart.data.datasets, 'label');\n    const newDatasets = _.difference(_.keys(entry), _.keys(keyedDatasets));\n    _.forEach(_.toPairs(keyedDatasets), ([label, dataset]) => dataset.data.push({\n      x: timestamp,\n      y: entry[label].value\n    }));\n    _.forEach(newDatasets, label => \n      chart.data.datasets.push({\n        label,\n        data: [{ x: timestamp, y: entry[label].value }]\n      }));\n    if (this.classList.contains('active')) chart.update(0);\n  }\n  \n  reset() {\n    const { chart } = this;\n    chart.data.datasets = [];\n    chart.data.labels = [];\n    chart.update();\n  }\n  \n  get(selector) {\n    const { shadowRoot } = this;\n    return shadowRoot.querySelector(selector);\n  }\n}"]}