{"version":3,"sources":["https://lively-kernel.org/lively4/lively4-eventsourcing/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","onChange","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}"]}