{"version":3,"sources":["https://lively-kernel.org/lively4/lively4-stable/src/components/d3/d3-barchart-gh.js"],"names":["Morph","d3","D3BarchartGh","constructor","width","get","svgElement","clientWidth","height","clientHeight","getData","data","Name","Value","setData","updateViz","initialize","setSize","innerHTML","margin","top","right","bottom","left","svg","select","attr","append","x","scaleBand","range","padding","y","scaleLinear","domain","map","d","max","selectAll","enter","style","bandwidth","call","axisBottom","axisLeft","livelyExample","livelyMigrate","other"],"mappings":"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","file":"d3-barchart-gh.js","sourcesContent":["import Morph from \"src/components/widgets/lively-morph.js\"\nimport d3 from \"src/external/d3.v5.js\"\n/*MD # D3 Barchart (Simple)\n\n![](d3-barchart-gh.png){height=300px}\n\nMD*/\n\nexport default class D3BarchartGh extends Morph {\n  constructor() {\n    super();\n    this.width = this.get('#svg').svgElement.clientWidth;\n    this.height = this.get('#svg').svgElement.clientHeight;\n    \n  }\n\n  getData() {\n    if (!this.data) {\n      this.data = [\n        { Name: 'a', Value: 10 },\n        { Name: 'b', Value: 15 },\n        { Name: 'c', Value: 12 },\n      ];\n    }\n    return this.data\n  }\n  \n  setData(data) {\n    this.data = data;\n    this.updateViz()\n  }\n  \n  async initialize() {   \n    this.updateViz()\n  }\n  \n  setSize(width, height) {\n    this.width = width;\n    this.height = height;\n  }\n  \n  updateViz() {\n   this.getData();\n\n     this.get('#svg').innerHTML = '';\n\n     const margin = {top: 20, right: 20, bottom: 30, left: 40};\n    const svgElement = this.get('#svg');\n    const width = this.width - margin.left - margin.right;\n    const height = this.height - margin.top - margin.bottom;\n\n     const svg = d3.select(svgElement)\n      .attr('width', width + margin.left + margin.right)\n      .attr('height', height + margin.top + margin.bottom)\n      .append('g')\n\n       .attr('transform', \n          'translate(' + margin.left + ',' + margin.top + ')');\n\n     var x = d3.scaleBand()\n          .range([0, width])\n          .padding(0.1);\n    var y = d3.scaleLinear()\n              .range([height, 0]);\n\n\n     x.domain(this.data.map(function(d) { return d.Name; }));\n    y.domain([0, d3.max(this.data, function(d) { return d.Value; })]);\n\n     svg.selectAll(\".bar\")\n        .data(this.data)\n        .enter().append(\"rect\")\n        .style(\"fill\", \"steelblue\")\n        .attr(\"class\", \"bar\")\n        .attr(\"x\", function(d) { return x(d.Name); })\n        .attr(\"width\", x.bandwidth())\n        .attr(\"y\", function(d) { return y(d.Value); })\n        .attr(\"height\", function(d) { return height - y(d.Value); });\n\n     svg.append(\"g\")\n        .attr(\"transform\", \"translate(0,\" + height + \")\")\n        .call(d3.axisBottom(x));\n\n     svg.append(\"g\")\n        .call(d3.axisLeft(y));\n    \n  }\n  \n  async livelyExample() {\n    this.setData([\n      { Name: 'a', Value: 10 },\n      { Name: 'b', Value: 15 },\n      { Name: 'c', Value: 12 },\n    ]);\n  }\n  \n  livelyMigrate(other) {\n    this.data = other.data\n  }\n  \n}\n"]}